Improve readability of the extractCriticalToChunks example in the docs (#2460)

nguyenyou · web-flow · commit 685bbec09937 · 2021-10-08T23:58:18.000+02:00
diff --git a/docs/ssr.mdx b/docs/ssr.mdx
@@ -47,13 +47,14 @@ const key = 'custom'
 const cache = createCache({ key })
 const { extractCriticalToChunks, constructStyleTagsFromChunks } = createEmotionServer(cache)
 
-let element = (
+const html = renderToString(
   <CacheProvider value={cache}>
     <App />
   </CacheProvider>
 )
 
-let { html, styles } = extractCriticalToChunks(renderToString(element))
+const chunks = extractCriticalToChunks(html)
+const styles = constructStyleTagsFromChunks(chunks)
 
 res
   .status(200)
@@ -65,7 +66,7 @@ res
     <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 })}
+    ${styles}
 </head>
 <body>
     <div id="root">${html}</div>
