SSR (ServerStyleSheet)

Styled-Components 🔴 Senior

Définition

Mécanisme d'extraction des styles générés côté serveur pour les injecter dans le HTML initial et éviter le FOUC. Avec Next.js App Router, le motif officiel est un registre : un Client Component qui crée une ServerStyleSheet et vide ses styles dans le <head> via useServerInsertedHTML, avec compiler.styledComponents: true dans next.config.js. Note : styled-components est en mode maintenance depuis le 17 mars 2025.

Analogie

Préparer les vêtements la veille pour ne pas sortir en pyjama le matin (FOUC).

Exemple de code

// lib/registry.tsx — Next.js App Router (styled-components >= 6)
'use client';
import { useState } from 'react';
import { useServerInsertedHTML } from 'next/navigation';
import { ServerStyleSheet, StyleSheetManager } from 'styled-components';

export default function StyledRegistry({ children }) {
  const [sheet] = useState(() => new ServerStyleSheet());
  useServerInsertedHTML(() => {
    const styles = sheet.getStyleElement();
    sheet.instance.clearTag();
    return <>{styles}</>;
  });
  if (typeof window !== 'undefined') return <>{children}</>;
  return <StyleSheetManager sheet={sheet.instance}>{children}</StyleSheetManager>;
}

Cas d'usage

Intégrer styled-components dans un projet Next.js App Router existant sans flash de contenu non stylé.

Termes liés

#styling#interview#css-in-js

Sources

Fiche mise à jour le 2026-09-27