Closed as not planned
Description
I'm trying to render the initial styles on the server to avoid CLS. Is there a way to do it currently?
ex:
https://emotion.sh/docs/ssr#renderstylestostring
This is what I'm trying but it obviously doesn't work,
import React from 'react'
import { MantineProvider } from '@mantine/core';
import { escapeInject } from 'vite-plugin-ssr'
import { renderStylesToNodeStream } from '@emotion/server'
import { renderToStream } from 'react-streaming/server'
import { PageLayout } from './PageLayout'
export async function render(pageContext) {
const { Page, pageProps } = pageContext;
const page = (
<MantineProvider withGlobalStyles withNormalizeCSS>
<PageLayout pathname={pageContext.urlPathname}>
<Page {...pageProps} />
</PageLayout>
</MantineProvider>
)
const stream = await renderToStream(page, { disable: false })
const newStream = stream.pipe(renderStylesToNodeStream())
return escapeInject`<!DOCTYPE html>
<html lang="en">
<body>
<div id="page-view">${newStream}</div>
</body>
</html>`
}Metadata
Metadata
Assignees
Labels
No labels