Replies: 1 comment
|
The linked docs page is the You need a cache created once and shared between // createEmotionCache.ts
import createCache from '@emotion/cache'
export default function createEmotionCache() {
return createCache({ key: 'css' })
}Then in import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'
import createEmotionServer from '@emotion/server/create-instance'
import { CacheProvider } from '@emotion/react'
import createEmotionCache from '../createEmotionCache'
export default class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const cache = createEmotionCache()
const { extractCriticalToChunks, constructStyleTagsFromChunks } = createEmotionServer(cache)
const originalRenderPage = ctx.renderPage
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
(
<CacheProvider value={cache}>
<App {...props} />
</CacheProvider>
),
})
const initialProps = await Document.getInitialProps(ctx)
const chunks = extractCriticalToChunks(initialProps.html)
const emotionStyleTags = constructStyleTagsFromChunks(chunks)
return { ...initialProps, styles: [initialProps.styles, emotionStyleTags] }
}
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
This gives you one |
Uh oh!
There was an error while loading. Please reload this page.
My Question is the following:
Is there any possible way to achieve the same behavior as here: https://emotion.sh/docs/ssr#on-server
For nextjs with _document in Nextjs Pages router?
I switched recently to @emotion from styled-components. Styled components had an really straight forward way to extract stylings and inject them in one single style tag on SSR. I would like to do the same with Emotion. Is there any possible way? (Background: Some of our projects would not be feasable to refactor to remove nth-child and :first-child selectors and as the documentation states its possible with extracting like in the link. But i am missing an example for nextjs _document.tsx component.)
All reactions