How to use emotion with renderToPipeableStream

[0Lucifer0]

I'm looking at how to implement SSR emotion with react 18.
React18 made renderToPipeableStream method the new recommended way and deprecated the renderToNodeStream method.

The documentation only seems to deal with the now deprecated renderToNodeStream and I can't figure out how to make it works with the pipeable stream.

cf:
https://reactjs.org/docs/react-dom-server.html#rendertonodestream
https://emotion.sh/docs/ssr#renderstylestonodestream

Documentation links:
https://emotion.sh/docs/ssr

[Andarist]

We didn't implement integration with renderToPipeableStream yet.

[Tjerk-Haaye-Henricus]

Hey there :)
Will this feature come in near future ?

[skriems]

Is there any roadmap/plan when this is going to be integrated?

[willopez]

Hello looking forward to this feature, how can we help make its implementation?

[Andarist]

You could try implementing PoC for this. We could hop on a call to discuss some challenges and stuff before that - if you would be interested in this sort of a thing.

[0Lucifer0]

kind of hacky but it works for the server side.

const stylesPipeableStream =
    (res: Response, cache: EmotionCache, nonceString: string) => {
        let content = '';
        const inlineStream = new Writable({
            write(chunk, _encoding, cb) {
                let match;
                content = content.concat(chunk.toString());
                let regex = new RegExp(`<style data-emotion="${cache.key} ([a-zA-Z0-9-_ ]+)">(.+)<\\/style>`, 'gm');
                regex.lastIndex = 0;
                while ((match = regex.exec(content)) !== null) {
                    const id = match[1];
                    const css = match[2];
                    cache.nonce = nonceString;
                    cache.inserted[id] = css;
                }

                res.write(chunk, cb);
            },
            final() {
                res.end();
            },
        });

        return inlineStream;
    };

 onShellReady() {
               ...
                stream.pipe(stylesPipeableStream(res, cache, nonce));
            },
bootstrapScriptContent: `
${Object.keys(cache.inserted).map(id => `
if(document.querySelectorAll('[data-emotion="${cache.key} ${id}"]').length === 0) {
    document.head.innerHTML += '<style data-emotion="${cache.key} ${id}"${!cache.nonce ? '' : ` nonce="${cache.nonce}"`}>${cache.inserted[id].toString()}</style>';
}`).join('\n')}
...
`

[Andarist]

Note that this won't work correctly with Suspense because you are only awaiting the shell. A more complete solution would append <script/> to our <style/>s that would move the preceding <style> to document.head. On top of that, you'd have to figure out how to properly rehydrate all the streamed <style/>s.

[0Lucifer0]

yeah and to figure out how to avoid the hydratation missmatch that force react to re render. facebook/react#24430

This solution is far from ideal that is why I didn't open a pull request with this code but at least it give some short term fix in my case to the unstyled page flashing on loading

[Andarist]

Hm, the quoted issue is somewhat weird - I don't get why React would be bothered by a script injected before <head/>. Hydration should only occur within the root (as far as I know) and that's usually part of the <body/>. Note thought that I didn't read the whole thread there.

This solution is far from ideal that is why I didn't open a pull request with this code but at least it give some short term fix in my case to the unstyled page flashing on loading

I think that you could try to insert the appropriate <script/> within write into the chunk before calling res.write with it. The simplest approach, for now, would be to insert:

<script>
  var s = document.currentScript;
  document.head.appendChild(s.previousSibling);
  s.remove();
</script>

[waspeer]

A lot of metaframeworks like next.js and remix render the whole document afaik. Would it be possible to create a suspense component that renders a style tag with all the aggregated styles that resolves after the rest of the document has resolved. That might keep react happy?

[sgabriel]

Remix released CSS-in-JS support with v1.11.0 does that help here?

[indeediansbrett]

@Andarist to make sure I understand correctly, does the work you're doing on styled-components carry over here to emotion?

styled-components/styled-components#3658

[LorenDorez]

@Andarist can you tell us where we stand here?

1. Is Emotion just not going to be able to support SSR (renderToPipeableStream) anytime soon?
2. Are there any solid work around? I saw in the linked 'styled-components' you have a potential one using a custom Writable, any updates there and/or an example usage would be awesome

Sorry to be a bother, this just holds up our usage of MUI and keeps us on React v17

[WesleyYue]

For Remix users, you can follow this example. The example is with Chakra but I believe you can use the same approach for any Emotion js setup

[LorenDorez]

That solution basically readers the entire app and defeats the purpose of streaming.

Im working on a POC to address this with Andraist code he provided on the Linked Styled-Components issue. However, he posted that it wasnt his latest version and would try to find it but never posted a follow-up there

Once i have my POC in a good spot ill post it here

[St2r]

I just found a small work-around for this situation.

const {pipe, abort} = renderToPipeableStream(
  <CacheProvider value={cache}>
    <YourAPP />
  </CacheProvider>,
  {
    onShellReady() {
      const body = new PassThrough();

      let oldContent = '';
      body.on('data', (chunk) => {
        const chunkStr = chunk.toString()

        if (chunkStr.endsWith('<!-- emotion ssr markup -->')) {
          return;
        }

        if (chunkStr.endsWith('</html>') || chunkStr.endsWith('</script>')) {
          const keys = Object.keys(cache.inserted);
          const content = keys.map(key => cache.inserted[key]).join(' ');

          if (content === oldContent) {
            return;
          }

          body.write(`<style data-emotion-streaming>${content}</style><!-- emotion ssr markup -->`);
          oldContent = content;
        }
      });

      responseHeaders.set("Content-Type", "text/html");

      resolve(
        new Response(body, {
          headers: responseHeaders,
          status: responseStatusCode,
        })
      );

      pipe(body);
    },
  }
);

After each chunk is spit out, a NEW STYLE TAG is appended to the html according to the contents of the emotion cache.

(A little trick is used here - I determine the end of each valid chunk of react 18 just by simple string matching.)

From my testing, this guarantees that the styles are correct when Server Side Rendering.

[tats-u]

@Andarist

Hm, the quoted issue is somewhat weird - I don't get why React would be bothered by a script injected before . Hydration should only occur within the root

• Astro can control when React components are hydrated. https://docs.astro.build/en/core-concepts/framework-components/
  • You can hydrate them for the first time when they are in the view area.
• Hydration roots of components in Astro is not the document root but the component roots. https://docs.astro.build/en/concepts/islands/

I stopped using Emotion due to this and lack of support for RSC. I'll recommend everyone to stop using it and migrate to SCSS Modules or vanilla-extract (or somethig better zero-runtime solutions).

[heath-freenome]

Over 1 year later and emotion still hasn't figure this out? I waited a very long time to upgrade to React 18 and I'm still stuck with rendering the whole document because of this one issue. And I'm only using styled-components with @mui.

[piotrblasiak]

Another year has gone. Are there any plans to support this?

[karol-f]

Another year has gone. Are there any plans to support this?

At this time, everyone is moving to solutions that works fine with React Server Components and Next.js App Router

[piotrblasiak]

Another year has gone. Are there any plans to support this?

At this time, everyone is moving to solutions that works fine with React Server Components and Next.js App Router

You mean other libraries? Like?

[karol-f]

Multiple solutions like zero-runtime CSS-in-JS libraries

https://mui.com/blog/introducing-pigment-css/ , https://github.com/mui/pigment-css?tab=readme-ov-file#how-to-guides

In the era of React Server Components and the Next.js App Router, component libraries like Material UI must make some paradigm-shifting changes to reap the potential performance gains by moving more of the work of rendering UIs from client to server.

Trouble is, the "traditional" CSS-in-JS solutions we rely on aren't able to come along with us because the React context API only works on the client.

or e.g.

Panda.css - CSS-in-JS can make it easy to build dynamic UI components, it usually comes with some pretty expensive performance tradeoffs. And since most CSS-in-JS libraries don’t work reliably with server components, it’s clear that the whole paradigm needs to evolve, or risk becoming irrelevant.
That’s where Panda comes in. It’s a new styling engine that aims to combine the DX of CSS-in-JS with the performance of atomic CSS, in a way that’s both type-safe and RSC compatible.

Or even CSS Modules or Tailwind.

Also check Next.js docs - https://nextjs.org/docs/app/building-your-application/styling/css-in-js

The following libraries are supported in Client Components in the app directory (alphabetical)

[rockyshi1993]

I wrote a framework that uses renderToPipeableStream to render pages.
It only needs to add the following two lines of code in the entry file, but I am not sure this method is suitable for all frameworks.
import createCache from '@emotion/cache'; createCache({ key:'css' });

You can check how to configure it here: https://github.com/rockyshi1993/nodestack?tab=readme-ov-file#how-to-perform-server-side-rendering-ssr

[rockyshi1993]

又一年过去了。有什么计划支持这一点吗？

React Server Componen
You can see if this framework is suitable for you, it uses renderToPipeableStream to render pages https://github.com/rockyshi1993/nodestack?tab=readme-ov-file#how-to-perform-server-side-rendering-ssr

[karmeleon]

I got something working for streaming Emotion 11 styles via React 18.3.1 renderToPipeableStream. I can't share actual code because it's integrated into my company's nightmarish SSR setup, but I can share the general approach and some example code that should be more broadly applicable.

First is to set up SSR using the "Advanced Approach" SSR docs. You'll need access to your server-side Emotion cache soon. For the app shell, use whatever you need to get the critical CSS style tags into the head (or wherever you put them).

For the streamed chunks, I used a Node transform stream to modify the stream that renderToPipeableStream provides. Here's what it needs to do:

1. Pass through all the shell markup unmodified.
2. Use some method to tell the stream that the shell has been sent (e.g. call a method on the transform stream instance).
3. Save all the Emotion keys that the critical SSR code inserted.
4. Keep a running buffer of the current Suspense chunk, using html-validate to determine when it's complete. ¹
5. When it is, clear the buffer, gather up all the new keys that Emotion generated since your last Emotion insertion, and use them to construct an inline script tag that calls insertStyles on your browser's Emotion cache. Elsewhere in your browser JS, you'll need to assign this function with something like window.cacheInsertFn = insertStyles.bind(null, browserEmotionCache).
6. Pushing the chunks to the cache will synchronously add them to the page head in the same operation as React swapping them in for their Suspense fallbacks, so the styles will be present and no FOUC will occur. And, since they should be the same thing that the browser's Emotion library generates during chunk hydration, there are no SSR mismatches either.

Here's broadly what the TransformStream should look like (I didn't actually run this code so copy at your own risk):

import { TransformStream } from 'node:stream';
import { HtmlValidate } from 'html-validate';
import { createCache } from '@emotion/cache';

const validator = new HtmlValidate({
    rules: {
        'close-order': 'error'
    }
};

const emotionKey = 'my-key';

const emotionCache = createCache({ key: emotionKey });

class SomeTransformStream extends TransformStream {
    alreadyInsertedKeys = new Set();

    hasShellBeenSent = false;

    chunkBuffer = '';

    onShellComplete() {
        this.hasShellBeenSent = true;
        this.alreadyInsertedKeys = new Set(Object.keys(emotionCache.inserted));
    }

    _transform(chunk, encoding, cb) {
        this.push(chunk);

        if (!hasShellBeenSent) {
            cb();
            return;
        }

        const decodedChunk = Buffer.from(chunk).toString(encoding);

        this.chunkBuffer += decodedChunk;

        if (validator.validateStringSync(this.chunkBuffer).valid) {
            this.chunkBuffer = '';
            const currentInsertedKeys = new Set(Object.keys(emotionCache.inserted));
            const newEmotionKeys = currentInsertedKeys.difference(this.alreadyInsertedKeys);
            this.alreadyInsertedKeys = currentInsertedKeys;

            const newEmotionChunks = [...newEmotionKeys].map(key => ({
                name: key,
                styles: emotionCache.registered[`${emotionKey}-${key}`],
            });

            this.push(`<script>${JSON.stringify(newEmotionChunks)}.forEach(c => window.cacheInsertFn.?(c))</script>`);
        }
        cb();
    }
}

Caveats

• This is all from memory, so some of it might be wrong. Hopefully the idea gets across anyway.
• If the user is on a shitty network connection, they may receive the inline script tag before your page JS has actually populated window.cacheInsertFn. This will cause a FOUC. I've been experimenting with generating the style tags in the inline script in this case using the contents of emotionCache.inserted[key] and allowing the normal Emotion hydration routine to hoist them to the head when the cache gets initialized, but that's a little complicated and I'm not as confident in it at the moment.
• This is absolutely not a "correct" way to do things, but in my testing it seems to work well. Do with that what you will.

Footnotes

1. There's probably a better way to do this, but it's fairly quick and seems to be correct 🤷‍♂️ ↩