Good morning, how would we go about dynamic content on pages with nextjs? Some of our enonic parts use cookies. As far as I know that means we can not do static sites in nextjs? But is it possible to only switch the pages using cookies, or do we need to witch all of our site to fully being server side rendered? For better performance we would like to keep the pages that do not need cookies to be statically rendered.
Regards,
Markus
Hi Markus.
AFAIK, modern Next.js will automatically disable static pages if you read headers (including cookies) in your code. A solution might be to implement the personalization (cookie-based rendering of selected parts) purely client-side. Have you looked into that approach?
thanks for the reply. Hmm interesting idea. We could render the default component on the server, and on the client (based on the cookie) render the personalized part. But with this the user will see this happening. The user would see the default message first, and then the personalzied one. Not a good user experience.
Is it possible to have two pages in nextjs? One for static content and one used for pages with personalized content? The enonic nextjs adapter would then need to switch between the two somehow based on if the personalized part is in use on the given page.
Otherwise we would have to switch all of our page to fully being server side rendered I guess
To avoid the problem, I propose you just render a placeholder - and then the part is always personalized. I.e. you never show a “default” message
The default value could ofc be rendered by the server, but “injected” and presented by client-side code - so it would be fast as well.
yes that is also possible, but bad for SEO. Since this is a public page SEO is important. That is why my thought was to render the default message first. Like with no cookie. That would be the message google sees.
For some customer we want to give them a special message in some places on our site. And we do not want htem to see the default message first. I guess server side rendering is the best optoin for us for now?
SSR is much more flexible ofc, but does have a hit on performance and user experience - which also counts against SEO. I suggest you try it out, and evaluate if performance is acceptable before you conclude :-).
Hi again,
finally I had the time to look at this again. so we have switched to fully server side rendering but are still having issues with the personalization on our page. We want to switch rendering based on a cookie. For example it should render a fragment if the cookie has a certain value. Code would for example look like this:
const comp = await fetchContent({
locale: "no-nb",
contentPath:
"/privat/fragmenter/sb-boks/utloggingsbudskap/investeringsappen-kron-utlogg",
});
console.log("Personalized, comp: ", comp);
return <MainView {...comp} />;
The response from fetchContent is below. This works in devmode but not in production. How can we render fragments like this?
