neuefische GmbH
Problems with the CLS value at Lighthouse test #852
-
|
Hello, Repository: https://github.com/Miningmark/yumekai-website
|
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
Hi @Miningmark, The issue seems to be that the CSS is only rendering on the client. (If you watch closely on the page you will see a "flash", or if you look at the snapshots in the google lighthouse report you can also sometimes see it). A possible solution would be to use Here is some boiler-plate (that we use in our other recap projects) that you could tailor to your needs (for import Document, { Html, Head, Main, NextScript } from "next/document";
import { ServerStyleSheet } from "styled-components";
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
sheet.collectStyles(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: [initialProps.styles, sheet.getStyleElement()],
};
} finally {
sheet.seal();
}
}
render() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}I hope this helps. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks Pete for this solution. I've tried so much that I didn't even notice it anymore :) |
Beta Was this translation helpful? Give feedback.
Hi @Miningmark,
The issue seems to be that the CSS is only rendering on the client. (If you watch closely on the page you will see a "flash", or if you look at the snapshots in the google lighthouse report you can also sometimes see it).
A possible solution would be to use
ServerStyleSheet.Here is some boiler-plate (that we use in our other recap projects) that you could tailor to your needs (for
_document.js)