Streaming in React / Next #838

joaogarin · 2022-09-20T13:36:51Z

joaogarin
Sep 20, 2022

Hello,

I am currently considering moving from styled components to something that has no runtime cost and that allows for better performance, the two main projects we are considering is CSS modules and Vanilla extract.

We tried both and Vanilla extract seems very very interesting, one of the things we are considering is potentially getting into blockers with the new features (pretty relevant themselves for performance as well) from nextjs. Most specifically the Layouts RFC and streaming

We were wondering if people here have some idea (given that CSS modules has already support by the information in the streaming link above) if Vanilla extract does some sort of magic that would make it difficult or that would maybe be at first incompatible with these?

Any thoughts on this would be very appreciated. Thanks! Awesome library the prototype we did with it we loved the UX and performance of it.

mattcompiles · 2022-09-20T21:42:27Z

mattcompiles
Sep 20, 2022
Maintainer

Both CSS modules and vanilla-extract compile to regular CSS files during your build. Vanilla-extract should be capable of everything CSS modules can do. That being said, if the Next team write specific code to handle CSS modules then it likely won't cater to vanilla-extract. I'd speak to Next about this if you can, maybe even suggest they support vanilla-extract OOTB 😉.

2 replies

arthurpeixotomelo Feb 6, 2023

Would love to see that happening, cause i'm anxious to use next app with VE and to switch completely from Stitches (cause no runtime and still being able to use Typescript for my CSS among others quality of live improv's) to VE and BTW i'll try to help in the Next side, but i think maybe implementing the useInsertionEffect, may help in React side to avoid using the dynamic package (maybe a adapter function for React without needing the runtime) and be a better sollution for these use cases. Leaving the Guide to useInsertionEffect here for more info about it and if i can be of any help developing this i'm happy to help!

arthurpeixotomelo Feb 6, 2023

Searching in the Next repo i found that the actual implementation for others CSS-in-JS libraries Next Doc Page:

The code example of Styled JSX implementation:

import React from 'react'
import ReactDOM from 'react-dom/server'
import { StyleRegistry, useStyleRegistry } from 'styled-jsx'
import App from './app'

function Styles() {
  const registry = useStyleRegistry()
  const styles = registry.styles()
  return <>{styles}</>
}

export default (req, res) => {
  const app = ReactDOM.renderToString(<App />)
  const html = ReactDOM.renderToStaticMarkup(
    <StyleRegistry>
      <html>
        <head>
          <Styles />
        </head>
        <body>
          <div id="root" dangerouslySetInnerHTML={{ __html: app }} />
        </body>
      </html>
    </StyleRegistry>
  )
  res.end('<!doctype html>' + html)
}

const registry = createStyleRegistry()
const styles = registry.styles() // access styles

function Page() {
  return (
    <StyleRegistry registry={registry}>
      <App />
    </StyleRegistry>
  )
}

'use client';

import React, { useState } from 'react';
import { useServerInsertedHTML } from 'next/navigation';
import { StyleRegistry, createStyleRegistry } from 'styled-jsx';

export default function StyledJsxRegistry({
  children,
}: {
  children: React.ReactNode;
}) {
  // Only create stylesheet once with lazy initial state
  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
  const [jsxStyleRegistry] = useState(() => createStyleRegistry());

  useServerInsertedHTML(() => {
    const styles = jsxStyleRegistry.styles();
    jsxStyleRegistry.flush();
    return <>{styles}</>;
  });

  return <StyleRegistry registry={jsxStyleRegistry}>{children}</StyleRegistry>;
}

import StyledJsxRegistry from './lib/registry';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <StyledJsxRegistry>{children}</StyledJsxRegistry>
      </body>
    </html>
  );
}

The code example of Styled Components implementation:

import { renderToString } from 'react-dom/server';
import { ServerStyleSheet } from 'styled-components';

const sheet = new ServerStyleSheet();
try {
  const html = renderToString(sheet.collectStyles(<YourApp />));
  const styleTags = sheet.getStyleTags(); // or sheet.getStyleElement();
} catch (error) {
  // handle error
  console.error(error);
} finally {
  sheet.seal();
}

import { renderToString } from 'react-dom/server';
import { ServerStyleSheet, StyleSheetManager } from 'styled-components';

const sheet = new ServerStyleSheet();
try {
  const html = renderToString(
    <StyleSheetManager sheet={sheet.instance}>
      <YourApp />
    </StyleSheetManager>
  );
  const styleTags = sheet.getStyleTags(); // or sheet.getStyleElement();
} catch (error) {
  // handle error
  console.error(error);
} finally {
  sheet.seal();
}

'use client';

import React, { useState } from 'react';
import { useServerInsertedHTML } from 'next/navigation';
import { ServerStyleSheet, StyleSheetManager } from 'styled-components';

export default function StyledComponentsRegistry({
  children,
}: {
  children: React.ReactNode;
}) {
  // Only create stylesheet once with lazy initial state
  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());

  useServerInsertedHTML(() => {
    const styles = styledComponentsStyleSheet.getStyleElement();
    styledComponentsStyleSheet.instance.clearTag();
    return <>{styles}</>;
  });

  if (typeof window !== 'undefined') return <>{children}</>;

  return (
    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
      {children}
    </StyleSheetManager>
  );
}

import StyledComponentsRegistry from './lib/registry';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
      </body>
    </html>
  );
}

They even had a code example for Streaming Rendering:

import { renderToNodeStream } from 'react-dom/server';
import styled, { ServerStyleSheet } from 'styled-components';

// if you're using express.js, you'd have access to the response object "res"

// typically you'd want to write some preliminary HTML, since React doesn't handle this
res.write('<html><head><title>Test</title></head><body>');

const Heading = styled.h1`
  color: red;
`;

const sheet = new ServerStyleSheet();
const jsx = sheet.collectStyles(<Heading>Hello SSR!</Heading>);
const stream = sheet.interleaveWithNodeStream(renderToNodeStream(jsx));

// you'd then pipe the stream into the response object until it's done
stream.pipe(res, { end: false });

// and finalize the response with closing HTML
stream.on('end', () => res.end('</body></html>'));

For what i could understand the Next Hook useServerInsertedHTML is a Callback used for creating, using a Context and adding the result in the as stated here in this issue(it even has a workaround example for a bug with the Ant Design CSS-in-JS in Next App). The Context is a wrapper for the lib Registry, which is also responsible to update the State for changes, of the Styles.

Not yet found how exactly the Style9 lib have implemented the support for the App directory (It's listed in the Next App Doc's so it's working...or kinda)

Then i found a reply in this issue about a workaround plugin for VE, still...... not the best resolution, but it's a start!

Will keep looking for updates on everything as i possibly can to track or find a way to solve these problems and maybe hope to help in any way 😄

joaogarin · 2022-09-21T14:23:24Z

joaogarin
Sep 21, 2022
Author

Not sure this ads some more relevant information for these kind of libraries. reactwg/react-18#108 (vanilla extract mentioned there specifically :) )

1 reply

arthurpeixotomelo Feb 6, 2023

Actually this Discussion was super relevant as it has been added to React a Hook useInsertionEffect exactly for injecting styles inline eliminating need for runtime use case(for most cases and it is advised to avoid it), they even explain a bit more than the docs page in this Guide to useInsertionEffect the how's and why's.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Streaming in React / Next #838

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Streaming in React / Next #838

Uh oh!

joaogarin Sep 20, 2022

Replies: 2 comments · 3 replies

Uh oh!

mattcompiles Sep 20, 2022 Maintainer

Uh oh!

arthurpeixotomelo Feb 6, 2023

Uh oh!

Uh oh!

arthurpeixotomelo Feb 6, 2023

Uh oh!

joaogarin Sep 21, 2022 Author

Uh oh!

Uh oh!

arthurpeixotomelo Feb 6, 2023

joaogarin
Sep 20, 2022

Replies: 2 comments 3 replies

mattcompiles
Sep 20, 2022
Maintainer

joaogarin
Sep 21, 2022
Author