SSR (ServerStyleSheet)

Styled-Components 🔴 Senior

Definition

Mecanisme pour extraire les styles generes cote serveur et les injecter dans le HTML initial. Evite le flash of unstyled content (FOUC) en SSR/SSG.

Analogie

Preparer les vetements la veille pour ne pas sortir en pyjama le matin (FOUC).

Exemple de code

import { ServerStyleSheet } from 'styled-components'

const sheet = new ServerStyleSheet()
try {
  const html = renderToString(
    sheet.collectStyles(<App />)
  )
  const styles = sheet.getStyleTags()
  // Injecter styles dans le <head>
} finally { sheet.seal() }

Cas d'usage

Integrer styled-components avec Next.js ou tout framework SSR pour eviter le FOUC.

Termes lies

#styling#interview#css-in-js