0
198
Vistas¿Por qué una página generada estáticamente no tiene estilo cuando se envía al cliente?
Al ejecutar el repetitivo oficial npx create-next-app y obtener una vista previa en el navegador, noté que el documento html generado estáticamente no tiene estilo:
Creo que esto podría conducir a problemas de FOUC . ¿Cómo puedo asegurarme de que la página ya tenga un estilo cuando se entrega al cliente, como en el caso del sitio oficial de Next.js?
Nota: Acabo de crear un proyecto repetitivo usando npx create-next-app y no modifiqué ningún código. Estoy usando Next.js v12.0.7 y React v17.0.2.
1 Respuestas
Responde la pregunta0
Para obtener una respuesta similar a la del sitio web de Next.js, debe incluir CSS crítico en línea. Esto es (todavía) experimental en next@12.0.7 (y sin documentar). Para habilitarlo, modifique su next.config.js :
module.exports = { experimental: { optimizeCss: true } } Necesitas instalar critters ( yarn add -D critters o npm i -D critters ) para que esto funcione. Además, debe ejecutar la compilación de producción ( next build && next start ), no una de desarrollo como la que está haciendo en esa imagen que ha compartido.
Resultado:
