When your content needs to be fresh on every page load (think personalized pages, frequently updated catalogs, or gated content), server-side rendering is the way to go. This kickstart wires up Next.js SSR with Contentstack's live preview system, where the CMS injects query parameters into the preview URL and the application reads them server-side to fetch the latest draft content.

Every time you edit content in the CMS, the browser refreshes to show the updated page rendered with the newest data. There's no client-side diffing or hydration tricks. Just a clean, predictable SSR cycle that ensures what you see in preview is exactly what your visitors will get.

Choose this variant when your production site will use getServerSideProps or Next.js App Router server components, and you want your preview experience to match your rendering strategy exactly.

Key Features:

• Server-Side Rendering with query-parameter-based live preview
• Full page refresh on content edit for guaranteed accuracy
• Same SDK initialization and Visual Builder setup as the base kickstart
• Ideal for dynamic, frequently changing content

Seed this Kickstart stack only with the cli for when you already have the codebase:

csdx cm:stacks:seed --repo "contentstack/kickstart-stack-seed" --org "<YOUR_ORG_ID>" -n "Kickstart Next SSR"

Or do a full install and seed like the below and choose Kickstarts Next SSR:

csdx cm:bootstrap