Atoms / Library

howtonextjsssrserver-renderingintegrationguide

Next.js SSR personalisation from API key to zero-flicker render

The Spectare SSR guide at /guide/ssr walks you through every step of server-side personalisation in a Next.js app router project. You start by installing @spectare-personalisation/react and setting SPECTARE_API_KEY in .env.local, then building a fail-safe getServerAssembly helper in lib/spectare.ts that calls the /api/assemble/ssr endpoint with cache set to no-store.

The helper never throws. On any network error or non-OK response it returns null, so your page always falls back to its default copy rather than breaking. The guide then shows three ways to render the returned assembly: a direct PersonalisedSection drop-in, a zero-flicker path where personalised HTML ships in the initial response with no DOM swap on load, and a hybrid that hands off to the client classifier when the server result matches the detected intent.

The caching section explains why you must set cache to no-store on the SSR fetch (personalisation is per-visitor, not per-URL) and how Spectare's own two-layer Redis and edge cache sits upstream of your server so cold assemblies are still fast. A troubleshooting reference covers the most common misconfigurations, including missing Authorization headers and org slug mismatches.

The guide is linked from the integration guide's SSR section and from the guide index, so it surfaces for developers who arrive through either path.

This is one atom from the Spectare content library. Spectare assembles the right atoms for each visitor in real time, based on who they are and how they arrived.