Accueil Blogue Conférences

Éviter le Flash des Styles Ant Design dans React Router v7 Framework / Remix

2025-01-28

La nouvelle version de React Router a fusionné avec Remix, devenant React Router v7 Framework.

Les projets qui étaient auparavant basés sur React Router SPA peuvent maintenant utiliser la technologie SSR pour améliorer la vitesse de chargement.

Cependant, lors de l’utilisation d’Ant Design, nous rencontrons un problème de flash de contenu non stylé en raison du chargement paresseux du CSS.

La solution consiste à modifier le composant App dans root.tsx pour générer des styles en ligne en utilisant @ant-design/cssinjs.

import {
  Outlet,
  useLocation,
} from 'react-router'
import { createCache, StyleProvider, extractStyle } from '@ant-design/cssinjs'
import { renderToString } from 'react-dom/server'
import type Entity from '@ant-design/cssinjs/lib/Cache'
import { useEffect, useInsertionEffect, useState } from 'react'

const CssCache = new Map<string, Entity>()

export default function App() {
  const location = useLocation()
  const pathname = location.pathname
  const isServer = typeof document === 'undefined'
  const cache = CssCache.get(pathname) || createCache()
  const [serverCss, setServerCss] = useState<string | null>(null)

  useInsertionEffect(() => {
    if (!CssCache.has(pathname)) {
      CssCache.set(pathname, cache)
    }
  }, [pathname, cache])

  useEffect(() => {
    if (isServer) {
      if (serverCss !== null) return

      renderToString(<StyleProvider cache={cache}>
        <Outlet />
      </StyleProvider>)

      const css = extractStyle(cache)
      setServerCss(css)
    } else {
      setServerCss('')
    }
  }, [pathname])

  if (serverCss === null) return null

  return (
    <>
      <style dangerouslySetInnerHTML={{ __html: serverCss }} />
      <Outlet />
    </>
  )
}
Retour à tous les articles