theme-prerender

Two Next.js 16 apps exploring how to keep cacheComponents benefits while supporting per-user theming. Reading cookies forces the read under Suspense, which postpones the static shell — these apps avoid that.

	route-segment/	cookie-sync/
Theme source at render	URL segment /[theme]/	none — page is theme-agnostic
Prerender variants per page	N (one per known theme)	1
Cache slots per page	N×	1×
Theme baked into HTML	Yes, fully	No (applied by inline script)
Needs JS to theme	No	Yes (inlined)
Switch theme cost	router.refresh() + cookie	DOM class swap + cookie
Best when	theme changes rendered output	theme is pure CSS

See each app's README for the mechanics.

When to pick which

• route-segment if theme affects rendered output (RTL, different components, SEO meta).
• cookie-sync if theme is purely visual (color, density, fonts).

Run

cd route-segment && npx next dev
# or
cd cookie-sync && npx next dev