--- id: wiki-2026-0508-style-registry title: Style Registry category: 10_Wiki/Topics status: verified canonical_id: self aliases: [SSR Style Registry, useServerInsertedHTML, CSS-in-JS SSR] duplicate_of: none source_trust_level: A confidence_score: 0.9 verification_status: applied tags: [frontend, ssr, css-in-js, nextjs, react, app-router] raw_sources: [] last_reinforced: 2026-05-10 github_commit: pending tech_stack: language: typescript framework: nextjs --- # Style Registry ## 매 한 줄 > **"매 SSR streaming 시 CSS-in-JS 의 styles 를 HTML 에 inject 하는 mechanism"**. Next.js 13 App Router 의 `useServerInsertedHTML` hook 도입 — 매 streaming RSC render 도중 styled-components / emotion / @mui 가 generated CSS 를 `` 의 inject. 2026 zero-runtime CSS (Vanilla Extract / Panda) 의 등장 으로 registry 의 less common, but legacy SC/emotion app 의 still required. ## 매 핵심 ### 매 Why needed - **CSS-in-JS = runtime styles**: rules generated when component renders. - **SSR**: server renders HTML; client hydrates. Without registry → FOUC (flash of unstyled content) + hydration mismatch. - **Streaming SSR**: HTML chunks sent progressively. Styles must inject as components render, not at end. - **App Router**: `useServerInsertedHTML` provides hook into Suspense boundary stream. ### 매 Mechanism 1. Server: collect styles into sheet during render (per request). 2. Server: insert `