[core] Streaming Server Side Rendering doesn't work. Emotion by itself does work.

[Industrial]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Hi!

I got Streaming Server Side Rendering working with my Deno Web Framework and I would like to use Emotion and also MaterialUI.

Expected behavior 🤔

When doing Streaming Server Side Rendering, the <style> tags are rendered before the component and they contain all the css needed to display that component. This way the component and the style tags can be sent to the browser while other components are still rendering on the server.

Steps to reproduce 🕹

/** @jsx jsx */
import { css, jsx } from '@emotion/react';
import {
  AppBar,
  Button,
  IconButton,
  Toolbar,
  Typography,
} from '@mui/material';
import { Menu as MenuIcon } from '@mui/icons-material';

import { NavigationItem } from '../../lib/navigation.tsx';

export type NavbarProps = {
  items: NavigationItem[];
};

export function NavbarOrganism({ items }: NavbarProps) {
  return (
    <AppBar position='static'>
      <Toolbar>
        <IconButton
          size='large'
          edge='start'
          color='inherit'
          aria-label='menu'
          sx={{ mr: 2 }}
        >
          <MenuIcon />
        </IconButton>
        <Typography variant='h6' component='div' sx={{ flexGrow: 1 }}>
          News
        </Typography>
        <div
          css={css`
            background-color: #f00;
            font-weight: bold;
          `}
        >
          NEI
        </div>
        <Button color='inherit'>Login</Button>
      </Toolbar>
    </AppBar>
  );
}

This renders to:

            <header class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionStatic css-1x7skt0">
               <div class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular css-i6s8oy">
                  <button class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit MuiIconButton-edgeStart MuiIconButton-sizeLarge css-jziuck" tabindex="0" type="button" aria-label="menu">
                     <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="MenuIcon">
                        <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
                     </svg>
                  </button>
                  <div class="MuiTypography-root MuiTypography-h6 css-1a3lqbo">News</div>
                  <style data-emotion="css uuyzvw">.css-uuyzvw{background-color:#f00;font-weight:bold;}</style>
                  <div class="css-uuyzvw">NEI</div>
                  <button class="MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit MuiButtonBase-root  css-b7766g" tabindex="0" type="button">
                     Login<!-- -->
                  </button>
               </div>
            </header>

As you can see, only the emotion call is rendered correctly and the MaterialUI parts are not. They do work and emotion does pick them up but only in the browser and after a considerable amount of time loading dependencies. This means I get a Flash of Unstyled Content for around 5 seconds while the red text is already there from the first paint it got streamed into the browser.

Please support Streaming Server Side Rendering because Emotion supports this.

Context 🔦

I am NOT using Node.js but using Deno. Deno supports Web Streams. My React Web Framework supports Streaming Server Rendering by utilizing Web Streams. Emotion supports Streaming Server Rendering. MaterialUI does not.

Your environment 🌎

System:
OS: Linux 5.10 Manjaro Linux
Binaries:
Node: 17.5.0 - ~/.nvm/versions/node/v17.5.0/bin/node
Yarn: 1.22.17 - ~/.nvm/versions/node/v17.5.0/bin/yarn
npm: 8.4.1 - ~/.nvm/versions/node/v17.5.0/bin/npm
Browsers:
Chrome: Not Found
Firefox: 101.0
npmPackages:
typescript: ^4.6.4 => 4.7.3

[garronej]

Hi @Industrial,

Only the emotion's "Default Approach" in compatible with the steaming API (it injects styles inline):

But MUI requires emotion's advanced approach (styles manually written in the head) for SSR setup to be implemented. See this quote from @oliviertassinari. and the recommended SSR setup for Next.js.

However the advanced approach isn't compatible with streaming API.

UPDATE: Acording to the author of emotion it seems that this is something will be supported eventually but it will be a long process.

[Industrial]

@garronej thanks for getting into this. I understand that it's going to be a long term thing. Implementing Streaming SSR was a research/fun project for me and MaterialUI is my go-to UI framework :)