dedupe css loading

vercel · Jul 12, 2022 · 4280fcc · 4280fcc
1 parent 1d5cab2
commit 4280fcc
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 17 deletions.
diff --git a/packages/next/client/app-index.tsx b/packages/next/client/app-index.tsx
@@ -72,6 +72,7 @@ const getCacheKey = () => {
 }
 
 const encoder = new TextEncoder()
+const loadedCss: Set<string> = new Set()
 
 let initialServerDataBuffer: string[] | undefined = undefined
 let initialServerDataWriter: ReadableStreamDefaultController | undefined =
@@ -161,11 +162,12 @@ async function loadCss(cssChunkInfoJson: string) {
 }
 
 function createLoadFlightCssStream(callback?: () => Promise<void>) {
-  const promises: Promise<any>[] = []
+  const cssLoadingPromises: Promise<any>[] = []
   const loadCssFromStreamData = (data: string) => {
     const seg = data.split(':')
     if (seg[0] === 'CSS') {
-      promises.push(loadCss(seg.slice(1).join(':')))
+      const cssJson = seg.slice(1).join(':')
+      if (!loadedCss.has(cssJson)) cssLoadingPromises.push(loadCss(cssJson))
     }
   }
 
@@ -188,7 +190,7 @@ function createLoadFlightCssStream(callback?: () => Promise<void>) {
   })
 
   if (process.env.NODE_ENV === 'development') {
-    Promise.all(promises).then(() => {
+    Promise.all(cssLoadingPromises).then(() => {
       // TODO: find better timing for css injection
       setTimeout(() => {
         callback?.()
@@ -247,11 +249,9 @@ function Root({ children }: React.PropsWithChildren<{}>): React.ReactElement {
   return children as React.ReactElement
 }
 
-function RSCComponent({ onFlightCssLoaded }: { onFlightCssLoaded: any }) {
+function RSCComponent(props: any) {
   const cacheKey = getCacheKey()
-  return (
-    <ServerRoot cacheKey={cacheKey} onFlightCssLoaded={onFlightCssLoaded} />
-  )
+  return <ServerRoot {...props} cacheKey={cacheKey} />
 }
 
 export async function hydrate(opts?: {

diff --git a/packages/next/server/app-render.tsx b/packages/next/server/app-render.tsx
@@ -131,7 +131,6 @@ function useFlightResponse(
       .pipeThrough(createPrefixStream(cssFlightData))
       .getReader()
     const writer = writable.getWriter()
-    // let remainingFlightResponse = ''
     function process() {
       forwardReader.read().then(({ done, value }) => {
         if (!bootstrapped) {

diff --git a/packages/next/server/node-web-streams-helper.ts b/packages/next/server/node-web-streams-helper.ts
@@ -140,20 +140,21 @@ export function createDevScriptTransformStream(): TransformStream<
   Uint8Array,
   Uint8Array
 > {
-  const headClosedTag = '</head>'
+  let injected = false
   const foucTags = `<style data-next-hide-fouc>body{display:none}</style>
-    <noscript data-next-hide-fouc>
-      <style>body{display:block}</style>
-    </noscript>`
+  <noscript data-next-hide-fouc>
+    <style>body{display:block}</style>
+  </noscript>`
   return new TransformStream({
     transform(chunk, controller) {
       const content = decodeText(chunk)
+      let index
+      if (!injected && (index = content.indexOf('</head')) !== -1) {
+        injected = true
+        // head content + fouc tags + </head
+        const injectedContent =
+          content.slice(0, index) + foucTags + content.slice(index)
 
-      if (content.includes(headClosedTag)) {
-        const injectedContent = content.replaceAll(
-          headClosedTag,
-          foucTags + headClosedTag
-        )
         controller.enqueue(encodeText(injectedContent))
       } else {
         controller.enqueue(chunk)