0
203
VisualizaçõesWhy is a statically generated page unstyled when sent to the client?
When running the Next.js official boilerplate npx create-next-app and previewing it in the browser, I noticed the statically generated html document isn't styled:
I believe this could lead to FOUC problems. How can I make sure that the page is already styled when served to the client, as in the case of Next.js' official site:
Note: I just created a boilerplate project using npx create-next-app and did not modify any code. I am using Next.js v12.0.7 and React v17.0.2.
1 Respostas
Responde à pergunta0
To get the response similar to Next.js' website, you need to inline critical CSS. This is (still) experimental in next@12.0.7 (and undocumented). To enable it modify your next.config.js:
module.exports = {
experimental: { optimizeCss: true }
}
You need to install critters (yarn add -D critters or npm i -D critters) for this to work. Also, you need to run production build (next build && next start) not a dev one like you're doing in that image you have shared.
Result:
