# SSR · Tech watch

[Canonical source](<https://sebastien.rigaux.be/en/tech-watch/tags/ssr>)

Producing HTML on the server and coordinating it with client-side data and interactions.

## [React hydration and SSR: prevent mismatches without hiding content](<https://sebastien.rigaux.be/en/tech-watch/links/react-hydration-and-ssr-prevent-mismatches-without-hiding-content>)

In Next.js, a `localStorage` value can make server-rendered HTML differ from the first client render. The article compares the trade-offs: waiting until mount avoids the error but leaves the real content out of the SSR HTML; using the same initial value for both renders preserves that content, though a later update can cause flicker.

To synchronize a sidebar without that flash, an inline script applies its saved state to the DOM before hydration and passes it to React, which uses the same classes. The article also distinguishes an isolated theme control from a mobile backdrop handled with CSS.

2026-11-07 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/react-hydration-and-ssr-prevent-mismatches-without-hiding-content.md>) · [Original resource](<https://www.gmoniava.com/blog/hydration-mismatch-errors-and-how-to-fix-them>)

## [Redact: a smaller React runtime with synchronous rendering](<https://sebastien.rigaux.be/en/tech-watch/links/redact-a-smaller-react-runtime-with-synchronous-rendering>)

Tanner Linsley’s AI-driven React projection experiment has become a TanStack project used in production. Redact is a smaller, React-compatible runtime that already works with Start, Next.js, Vinext, and Vite. On the server, React still handles SSR and Server Components.

The tradeoff is in rendering: Redact renders synchronously, without React’s time slicing. As the blog post acknowledges, a heavy render can still delay input. The smaller runtime therefore comes with a constraint worth considering for interfaces that need to remain responsive under load.

2026-10-29 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/redact-a-smaller-react-runtime-with-synchronous-rendering.md>) · [Original resource](<https://github.com/shader-effects-inc/shaders>)

## [next-themes: handle themes without flashes or hydration pitfalls](<https://sebastien.rigaux.be/en/tech-watch/links/next-themes-handle-themes-without-flashes-or-hydration-pitfalls>)

next-themes applies the theme as the page loads, respects the system preference, and syncs the choice across tabs. Its `ThemeProvider` works with both the App Router and `pages/`, while a hook lets components switch themes or handle multiple variants.

One architectural detail matters: the browser-stored theme is unavailable during server rendering. UI that depends on `useTheme` should wait until the client component mounts to avoid hydration errors. The library also updates the `<html>` attribute—`suppressHydrationWarning` is recommended—and remains independent of the CSS solution in use.

2026-10-29 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/next-themes-handle-themes-without-flashes-or-hydration-pitfalls.md>) · [Original resource](<https://github.com/pacocoursey/next-themes#readme>)

## [c15t 3: one consent engine for eight frameworks](<https://sebastien.rigaux.be/en/tech-watch/links/c15t-3-one-consent-engine-for-eight-frameworks>)

c15t 3 rebuilds consent management around a shared engine with adapters for Next.js, React, Vue, Nuxt, Astro, Svelte, TanStack Start, and plain HTML sites. Banners can be rendered into server HTML, while a **consent manifest** avoids waiting on the backend for every request. The reported gains depend on the deployment mode and come from benchmarks published by the project.

The migration preserves choices stored by v2, but changes APIs, packages, and the backend. Codemods handle part of the upgrade; clients and backend must move to v3 together. The release also introduces more strictly validated policy rules and a rewritten self-hosted backend supporting PostgreSQL, MySQL, and SQLite.

2026-10-23 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/c15t-3-one-consent-engine-for-eight-frameworks.md>) · [Original resource](<https://c15t.com/changelog/3.0.0>)

## [vinext 1.1.0: Next.js parity fixes and stale-while-revalidate cache](<https://sebastien.rigaux.be/en/tech-watch/links/vinext-1-1-0-next-js-parity-fixes-and-stale-while-revalidate-cache>)

vinext 1.1.0, the Vite plugin reimplementing the Next.js API, brings many behaviors in line with Next.js, especially for the App Router (redirect handling, metadata, special errors) and cache management. This release introduces **stale-while-revalidate** for `use cache`, serving stale entries while regenerating them in the background, and fixes several cache and server-side rendering inconsistencies. A milestone for those seeking a deploy-anywhere alternative to Next.js.

2026-10-16 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/vinext-1-1-0-next-js-parity-fixes-and-stale-while-revalidate-cache.md>) · [Original resource](<https://github.com/cloudflare/vinext/releases/tag/vinext%401.1.0>)

## [TanStack Start 1.0: a stable, type-safe full-stack framework for React and Solid](<https://sebastien.rigaux.be/en/tech-watch/links/tanstack-start-1-0-a-stable-type-safe-full-stack-framework-for-react-and-solid>)

TanStack Start 1.0 marks the official stable release of a full-stack framework, already proven in production, that blends SPA-style routing, server rendering, streaming, and typed server functions for React and Solid. Its focus on **end-to-end type safety**—from route params to loaders and server functions—makes maintenance and evolution easier, even for AI agents. React Server Components are opt-in, and deployment is flexible via Vite, Nitro, or Rsbuild, without enforcing a single architecture.

2026-10-16 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/tanstack-start-1-0-a-stable-type-safe-full-stack-framework-for-react-and-solid.md>) · [Original resource](<https://tanstack.com/blog/tanstack-start-1-0>)

## [React’s browser() API: rendering components only in the browser](<https://sebastien.rigaux.be/en/tech-watch/links/react-browser-api-rendering-components-only-in-the-browser>)

React Canary introduces the `browser()` API to render a component exclusively in the browser, avoiding hydration mismatches and extra mounted-state logic. The article demonstrates how to use `use(browser())` inside a client component, wrapped in Suspense, to defer rendering until browser APIs are available. Several concrete examples show how this approach enables access to `localStorage`, the DOM, or user-specific data, without the usual workarounds like `useEffect` or environment checks.

2026-10-15 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/react-browser-api-rendering-components-only-in-the-browser.md>) · [Original resource](<https://certificates.dev/blog/reacts-new-browser-api-rendering-components-only-in-the-browser>)
