Layout broken after page reload (using with-styletron) #21825
Comments
Deliaz
added
bug
|
If you change your import Document, { Html, Head, Main, NextScript } from 'next/document';
import { Provider as StyletronProvider } from 'styletron-react';
import styletron from '../styletron';
const RESET_STYLES = `
html,body {min-height:100vh;}
body{margin:0;}
`;
class MyDocument extends Document {
static async getInitialProps(ctx) {
const originalRenderPage = ctx.renderPage;
ctx.renderPage = () => originalRenderPage({
enhanceApp: (App) => (props) => <StyletronProvider value={styletron}><App {...props} /></StyletronProvider>,
});
const initialProps = await Document.getInitialProps(ctx);
const stylesheets = styletron.getStylesheets() || [];
return { ...initialProps, stylesheets };
}
render() {
return (
<Html>
<Head>
{this.props.stylesheets.map((sheet, i) => (
<style
className="_styletron_hydrate_"
dangerouslySetInnerHTML={{ __html: sheet.css }}
media={sheet.attrs.media}
data-hydrate={sheet.attrs['data-hydrate']}
key={i}
/>
))}
<style type="text/css">{RESET_STYLES}</style>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument; |
|
It solved the issue, Thank you! May I wonder, how did you come up with this solution? |
Great, I'm glad it fixed the issue! I cloned your reproduction repo and saw that Layout wasn't being populated on page load, that is why there was a difference between the client side routing and the server side rendering. I submitted a PR to see if we can get this included in the example. |
|
This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
What example does this report relate to?
with-styletron
What version of Next.js are you using?
"latest"
What version of Node.js are you using?
v12.13.0
What browser are you using?
Chrome
What operating system are you using?
macOS
How are you deploying your application?
yarn dev
Describe the Bug
I've scaffolded a simple website with two layouts based on "with-styletron".
Everything works fine on browser rendering, but the layout breaks after reloading [id].js page.
Feels like there is some inconsistency between SSR and probably hydration.
The same issue happened with a Header component in a different project, which also based on "with-styletron" example and has multiple layouts.
Expected Behavior
(see reproduce section for details)
Expected that the layout stays persistent.
To Reproduce
The text was updated successfully, but these errors were encountered: