Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SSR of styles from emotion css-in-js library #16

Closed
pyrossh opened this issue Mar 1, 2023 · 5 comments
Closed

SSR of styles from emotion css-in-js library #16

pyrossh opened this issue Mar 1, 2023 · 5 comments

Comments

@pyrossh
Copy link

pyrossh commented Mar 1, 2023

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>`
}
@pyrossh
Copy link
Author

pyrossh commented Mar 1, 2023 •
edited
Loading

Here is the example, I'm trying to switch to mantine ui from blueprintjs
react-streaming-tigris

@brillout
Copy link
Owner

brillout commented Mar 1, 2023

Does Emotion support React 18 streaming? I'm not all to familiar with Emotion, but I believe CSS may be generated during the stream, so Emotion needs to be able to emit CSS live during the stream. Does it have an API for that?

react-streaming-tigris

Neat, that looks really nice.

@pyrossh
Copy link
Author

pyrossh commented Mar 2, 2023

Does Emotion support React 18 streaming?

Yes it does have a streaming API,

import { renderToNodeStream } from 'react-dom/server'
import { renderStylesToNodeStream } from '@emotion/server'
import App from './App'

const stream = renderToNodeStream(<App />).pipe(renderStylesToNodeStream())

Now the question is,
If renderToStream similar to renderToNodeStream? Which seems like it isn't to me as the styles are not extracted. Or how can I make it compatible with renderToNodeStream.

@brillout
Copy link
Owner

brillout commented Mar 2, 2023

I see.

FYI React has been doing some work about this: facebook/react#24886.

Context: reactjs/rfcs#219 (comment).

So I'm not sure what React's recommendation is about this nowadays? I think we should open a ticket over at Emotion see what they think/know about this.

@brillout
Copy link
Owner

brillout commented May 5, 2023

Closing but let me know if you believe there is something that react-streaming can do to help.

@brillout brillout closed this as not planned Won't fix, can't repro, duplicate, stale May 5, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@brillout @pyrossh