How the Next.js App Router SDK works

The SDK splits the work between the middleware and the page.

1. The middleware makes a code. The middleware reads the path and draft mode from the request. It adds the default consent and the locale from its options or the server configuration. It writes these values into a short code, and rewrites the request to /uniform/[code]. The middleware makes no network calls.
2. The page resolves the route. UniformComposition reads the code and gets the route from the Uniform Route API. A Uniform redirect gives a redirect. A missing route gives the Next.js 404 page.
3. The page renders the composition. Each Uniform component goes through your resolveComponent function and renders as a React Server Component.
4. Personalizations and A/B tests get their variants. The code identifies the route, not the visitor. Thus all visitors of a published route share one cached page. Variants are chosen in one of two modes:
   • Lite mode: the server renders default variants. After hydration, the browser chooses the variants of the visitor.
   • Edge mode: the page contains all variants. The edge middleware keeps only the variants of the visitor, so the first paint is correct. Refer to Edge mode execution.
5. Canvas edits the page. In preview, the page renders draft content and adds the scripts for visual editing.