Fluent UI React v9 + Next.js Integration

Overview

Next.js introduces server-side rendering (SSR) and React Server Components (RSC) that create specific challenges for Fluent UI React v9. Fluent uses Griffel for CSS-in-JS styling, which generates styles at runtime by default. In a server-rendered environment, styles must be collected during server rendering and injected into the HTML before the client hydrates — otherwise users experience a flash of unstyled content (FOUC) or hydration mismatches.

Why special handling is required:

1. CSS-in-JS hydration — Griffel generates atomic CSS classes at runtime. On the server, these styles must be captured and serialized into <style> tags so the client can rehydrate without regenerating them.

2. React Server Components — Next.js App Router defaults all components to RSC. Fluent UI components use React context, state, and effects — all client-only APIs. Every Fluent component must be rendered inside a 'use client' boundary.