Update RSC etag generation handling

packages/next/src/server/send-payload.ts

@@ -72,7 +72,48 @@ export async function sendRenderResult({
   const payload = result.isDynamic ? null : result.toUnchunkedString()
 
   if (payload !== null) {
-    const etag = generateEtags ? generateETag(payload) : undefined
+    let etagPayload = payload
+    if (type === 'rsc') {
+      // ensure etag generation is deterministic as
+      // ordering can differ even if underlying content
+      // does not differ
+      etagPayload = payload.split('\n').sort().join('\n')
+    } else if (type === 'html' && payload.includes('__next_f')) {
+      const { parse } =
+        require('next/dist/compiled/node-html-parser') as typeof import('next/dist/compiled/node-html-parser')
+
+      try {
+        // Parse the HTML
+        let root = parse(payload)
+
+        // Get script tags in the body element
+        let scriptTags = root
+          .querySelector('body')
+          ?.querySelectorAll('script')
+          .filter(
+            (node) =>
+              !node.hasAttribute('src') && node.innerHTML?.includes('__next_f')
+          )
+
+        // Sort the script tags by their inner text
+        scriptTags?.sort((a, b) => a.innerHTML.localeCompare(b.innerHTML))
+
+        // Remove the original script tags
+        scriptTags?.forEach((script: any) => script.remove())
+
+        // Append the sorted script tags to the body
+        scriptTags?.forEach((script: any) =>
+          root.querySelector('body')?.appendChild(script)
+        )
+
+        // Stringify back to HTML
+        etagPayload = root.toString()
+      } catch (err) {
+        console.error(`Error parsing HTML payload`, err)
+      }
+    }
+
+    const etag = generateEtags ? generateETag(etagPayload) : undefined
     if (sendEtagResponse(req, res, etag)) {
       return
     }

test/e2e/app-dir/app-static/app-static.test.ts

@@ -522,6 +522,36 @@ createNextDescribe(
     })
 
     if (isNextStart) {
+      if (!process.env.__NEXT_EXPERIMENTAL_PPR) {
+        it('should have deterministic etag across revalidates', async () => {
+          const initialRes = await next.fetch(
+            '/variable-revalidate-stable/revalidate-3'
+          )
+          expect(initialRes.status).toBe(200)
+
+          // check 2 revalidate passes to ensure it's consistent
+          for (let i = 0; i < 2; i++) {
+            let startIdx = next.cliOutput.length
+
+            await retry(
+              async () => {
+                const res = await next.fetch(
+                  '/variable-revalidate-stable/revalidate-3'
+                )
+                expect(next.cliOutput.substring(startIdx)).toContain(
+                  'rendering /variable-revalidate-stable'
+                )
+                expect(initialRes.headers.get('etag')).toBe(
+                  res.headers.get('etag')
+                )
+              },
+              12_000,
+              3_000
+            )
+          }
+        })
+      }
+
       it('should output HTML/RSC files for static paths', async () => {
         const files = (
           await glob('**/*', {
@@ -733,6 +763,10 @@ createNextDescribe(
             "variable-revalidate-edge/post-method/page_client-reference-manifest.js",
             "variable-revalidate-edge/revalidate-3/page.js",
             "variable-revalidate-edge/revalidate-3/page_client-reference-manifest.js",
+            "variable-revalidate-stable/revalidate-3.html",
+            "variable-revalidate-stable/revalidate-3.rsc",
+            "variable-revalidate-stable/revalidate-3/page.js",
+            "variable-revalidate-stable/revalidate-3/page_client-reference-manifest.js",
             "variable-revalidate/authorization.html",
             "variable-revalidate/authorization.rsc",
             "variable-revalidate/authorization/page.js",
@@ -1445,6 +1479,22 @@ createNextDescribe(
               "initialRevalidateSeconds": 3,
               "srcRoute": "/variable-config-revalidate/revalidate-3",
             },
+            "/variable-revalidate-stable/revalidate-3": {
+              "dataRoute": "/variable-revalidate-stable/revalidate-3.rsc",
+              "experimentalBypassFor": [
+                {
+                  "key": "Next-Action",
+                  "type": "header",
+                },
+                {
+                  "key": "content-type",
+                  "type": "header",
+                  "value": "multipart/form-data",
+                },
+              ],
+              "initialRevalidateSeconds": 3,
+              "srcRoute": "/variable-revalidate-stable/revalidate-3",
+            },
             "/variable-revalidate/authorization": {
               "dataRoute": "/variable-revalidate/authorization.rsc",
               "experimentalBypassFor": [

test/e2e/app-dir/app-static/app/variable-revalidate-stable/revalidate-3/page.tsx

@@ -0,0 +1,28 @@
+import { Suspense } from 'react'
+
+export const revalidate = 3
+
+async function RandomSuspenseResolve() {
+  await new Promise((resolve) => {
+    setTimeout(resolve, Math.random() * 5_000)
+  })
+  return <p>hello world</p>
+}
+
+export default function Page() {
+  console.log('rendering /variable-revalidate-stable/revalidate-3')
+  return (
+    <>
+      <p>Testing etag...</p>
+      <Suspense fallback={'Loading...'}>
+        <RandomSuspenseResolve />
+      </Suspense>
+      <Suspense fallback={'Loading...'}>
+        <RandomSuspenseResolve />
+      </Suspense>
+      <Suspense fallback={'Loading...'}>
+        <RandomSuspenseResolve />
+      </Suspense>
+    </>
+  )
+}