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 />
</>
)
}