feat(server): add extractCriticalToChunks (#2334)

* init * add some resets * updates * fixes * cleanup * Update packages/server/types/create-instance.d.ts Co-authored-by: Mateusz Burzyński <[email protected]> * Update packages/server/src/create-instance/extract-critical2.js Co-authored-by: Mateusz Burzyński <[email protected]> * adress comments * tests * flow fixes * Improve auto-rehydration for global styles when using extractCritical2 * Fixed constructStyleTags to include all ids correctly * Update packages/server/types/create-instance.d.ts Co-authored-by: Mateusz Burzyński <[email protected]> * Update packages/server/src/create-instance/construct-style-tags.js Co-authored-by: Mateusz Burzyński <[email protected]> * fix flow issues & update tests * Update packages/react/__tests__/rehydration.js * tweak test title * renamed to extractCriticalToChunks * spacings * spacing * Fixed an issue with Global styles being reinjected when rehydrating * resolve comments * test updates * Fixed issue with global styles being sometimes owned by multiple sheets after hydration * Add tests for global rehydration * add comment about why the data-attribute is reset in <Global/> * fix flow errors * Revert merging layout effects in <Global/> * Update packages/server/src/create-instance/extract-critical-to-chunks.js * Create tidy-feet-buy.md * Create chilly-clocks-jam.md Co-authored-by: Mateusz Burzyński <[email protected]> Co-authored-by: Mitchell Hamilton <[email protected]>
emotion-js · May 7, 2021 · 7d9e74f · 7d9e74f
1 parent 38f9d44
commit 7d9e74f
Show file tree

Hide file tree

Showing 15 changed files with 840 additions and 20 deletions.
diff --git a/.changeset/chilly-clocks-jam.md b/.changeset/chilly-clocks-jam.md
@@ -0,0 +1,7 @@
+---
+"@emotion/react": patch
+---
+
+The Global component no longer replaces style elements from server-rendering on first mount and instead reuses the server-side rendered style element
+
+author: @Andarist
diff --git a/.changeset/tidy-feet-buy.md b/.changeset/tidy-feet-buy.md
@@ -0,0 +1,5 @@
+---
+"@emotion/server": minor
+---
+
+Added `extractCriticalToChunks` that allows the Global component to remove styles on unmount unlike `extractCritical` along with `constructStyleTagsFromChunks` to render the chunks to style tags.
diff --git a/docs/ssr.mdx b/docs/ssr.mdx
@@ -35,6 +35,48 @@ You can also use the advanced integration, it requires more work but does not ha
 
 ### On server
 
+#### When using `@emotion/react`
+
+```jsx
+import { CacheProvider } from '@emotion/react'
+import { renderToString } from 'react-dom/server'
+import createEmotionServer from '@emotion/server/create-instance'
+import createCache from '@emotion/cache'
+
+const key = 'custom'
+const cache = createCache({ key })
+const { extractCriticalToChunks, constructStyleTagsFromChunks } = createEmotionServer(cache)
+
+let element = (
+  <CacheProvider value={cache}>
+    <App />
+  </CacheProvider>
+)
+
+let { html, styles } = extractCriticalToChunks(renderToString(element))
+
+res
+  .status(200)
+  .header('Content-Type', 'text/html')
+  .send(`<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>My site</title>
+    ${constructStyleTagsFromChunks({ html, styles })}
+</head>
+<body>
+    <div id="root">${html}</div>
+
+    <script src="./bundle.js"></script>
+</body>
+</html>`);
+```
+
+#### When using `@emotion/css`
+
 ```jsx
 import { CacheProvider } from '@emotion/react'
 import { renderToString } from 'react-dom/server'