[ppr] Support fallback params for client layouts

packages/next/src/client/components/client-segment.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+type ClientSegmentRootProps = {
+  Component: React.ComponentType
+  props: { [props: string]: any }
+}
+
+export function ClientSegmentRoot({
+  Component,
+  props,
+}: ClientSegmentRootProps) {
+  if (typeof window === 'undefined') {
+    const { createDynamicallyTrackedParams } =
+      require('./fallback-params') as typeof import('./fallback-params')
+
+    props.params = props.params
+      ? createDynamicallyTrackedParams(props.params)
+      : {}
+  }
+  return <Component {...props} />
+}

packages/next/src/server/app-render/create-component-tree.tsx

@@ -90,6 +90,7 @@ async function createComponentTreeInternal({
       LayoutRouter,
       RenderFromTemplateContext,
       ClientPageRoot,
+      ClientSegmentRoot,
       createUntrackedSearchParams,
       createDynamicallyTrackedSearchParams,
       createDynamicallyTrackedParams,
@@ -592,15 +593,22 @@ async function createComponentTreeInternal({
           isStaticGeneration={isStaticGeneration}
           ready={getMetadataReady}
         >
-          {pageElement}
           {layerAssets}
+          {pageElement}
         </Segment>
       </React.Fragment>,
       parallelRouteCacheNodeSeedData,
       loadingData,
     ]
   } else {
-    props.params = createDynamicallyTrackedParams(currentParams)
+    let layoutElement: React.ReactNode
+    if (isClientComponent) {
+      props.params = currentParams
+      layoutElement = <ClientSegmentRoot props={props} Component={Component} />
+    } else {
+      props.params = createDynamicallyTrackedParams(currentParams)
+      layoutElement = <Component {...props} />
+    }
 
     // For layouts we just render the component
     return [
@@ -617,7 +625,7 @@ async function createComponentTreeInternal({
         ready={getMetadataReady}
       >
         {layerAssets}
-        <Component {...props} />
+        {layoutElement}
       </Segment>,
       parallelRouteCacheNodeSeedData,
       loadingData,

packages/next/src/server/app-render/entry-base.ts

@@ -16,6 +16,7 @@ import { requestAsyncStorage } from '../../client/components/request-async-stora
 import { prerenderAsyncStorage } from './prerender-async-storage.external'
 import { actionAsyncStorage } from '../../client/components/action-async-storage.external'
 import { ClientPageRoot } from '../../client/components/client-page'
+import { ClientSegmentRoot } from '../../client/components/client-segment'
 import {
   createUntrackedSearchParams,
   createDynamicallyTrackedSearchParams,
@@ -61,6 +62,7 @@ export {
   Postpone,
   taintObjectReference,
   ClientPageRoot,
+  ClientSegmentRoot,
   NotFoundBoundary,
   patchFetch,
 }

test/e2e/app-dir/ppr-full/app/fallback/client/params/[slug]/dynamic.jsx

@@ -0,0 +1,7 @@
+export default function Dynamic({ params }) {
+  return (
+    <div data-file="app/fallback/client/params/[slug]/dynamic">
+      {params.slug}
+    </div>
+  )
+}

test/e2e/app-dir/ppr-full/app/fallback/client/params/[slug]/layout.jsx

@@ -0,0 +1,7 @@
+'use client'
+
+export default function Layout({ children }) {
+  return (
+    <div data-file="app/fallback/client/params/[slug]/layout">{children}</div>
+  )
+}

test/e2e/app-dir/ppr-full/app/fallback/client/params/[slug]/loading.jsx

@@ -0,0 +1,5 @@
+export default function Loading() {
+  return (
+    <div data-file="app/fallback/client/params/[slug]/loading">Loading...</div>
+  )
+}

test/e2e/app-dir/ppr-full/app/fallback/client/params/[slug]/page.jsx

@@ -0,0 +1,9 @@
+import Dynamic from './dynamic'
+
+export default function Page({ params }) {
+  return (
+    <div data-file="app/fallback/client/params/[slug]/page">
+      <Dynamic params={params} />
+    </div>
+  )
+}

test/e2e/app-dir/ppr-full/ppr-full.test.ts

@@ -275,7 +275,7 @@ describe('ppr-full', () => {
         for (const [pattern, client, nested] of patterns) {
           let slug: string
           if (nested) {
-            let slugs: string[] = []
+            const slugs: string[] = []
             for (let j = i + 1; j < i + 2; j++) {
               slugs.push(`slug-${pad(i)}/slug-${pad(j)}`)
             }
@@ -313,7 +313,7 @@ describe('ppr-full', () => {
             expect(streamEnd - start).toBeGreaterThanOrEqual(delay)
 
             if (client) {
-              let browser = await next.browser(pathname)
+              const browser = await next.browser(pathname)
               try {
                 await browser.waitForElementByCss('[data-slug]')
                 expect(
@@ -345,15 +345,15 @@ describe('ppr-full', () => {
       describe('Dynamic Shell', () => {
         it('should render the fallback shell on first visit', async () => {
           const random = Math.random().toString(16).slice(2)
-          const pathname = '/fallback/dynamic/params/on-first-visit-' + random
+          const pathname = `/fallback/dynamic/params/on-first-visit-${random}`
           const $ = await next.render$(pathname)
           expect($('[data-slug]').closest('[hidden]').length).toBe(1)
           expect($('[data-agent]').closest('[hidden]').length).toBe(1)
         })
 
         it('should render the dynamic shell on the second visit', async () => {
           const random = Math.random().toString(16).slice(2)
-          const pathname = '/fallback/dynamic/params/on-second-visit-' + random
+          const pathname = `/fallback/dynamic/params/on-second-visit-${random}`
 
           let $ = await next.render$(pathname)
           expect($('[data-slug]').closest('[hidden]').length).toBe(1)
@@ -368,7 +368,7 @@ describe('ppr-full', () => {
 
         it('should render the dynamic shell as static if the page is static', async () => {
           const random = Math.random().toString(16).slice(2)
-          const pathname = '/fallback/params/on-second-visit-' + random
+          const pathname = `/fallback/params/on-second-visit-${random}`
 
           // Expect that the slug had to be resumed.
           let $ = await next.render$(pathname)
@@ -402,7 +402,7 @@ describe('ppr-full', () => {
 
         it('will only revalidate the page', async () => {
           const random = Math.random().toString(16).slice(2)
-          const pathname = '/fallback/dynamic/params/revalidate-' + random
+          const pathname = `/fallback/dynamic/params/revalidate-${random}`
 
           let $ = await next.render$(pathname)
           const fallbackID = $('[data-layout]').data('layout') as string
@@ -418,7 +418,7 @@ describe('ppr-full', () => {
 
           // Now let's revalidate the page.
           await next.fetch(
-            '/api/revalidate?pathname=' + encodeURIComponent(pathname)
+            `/api/revalidate?pathname=${encodeURIComponent(pathname)}`
           )
 
           // We expect to get the fallback shell again.
@@ -437,7 +437,7 @@ describe('ppr-full', () => {
 
         it('will revalidate the page and fallback shell', async () => {
           const random = Math.random().toString(16).slice(2)
-          const pathname = '/fallback/dynamic/params/revalidate-' + random
+          const pathname = `/fallback/dynamic/params/revalidate-${random}`
 
           let $ = await next.render$(pathname)
           const fallbackID = $('[data-layout]').data('layout') as string
@@ -453,20 +453,41 @@ describe('ppr-full', () => {
 
           // Now let's revalidate the page.
           await next.fetch(
-            '/api/revalidate?pathname=/fallback/dynamic/params/[slug]'
+            `/api/revalidate?pathname=${encodeURIComponent(pathname)}`
           )
 
-          // We expect to get a revalidated shell, not the same one as before.
+          // We expect to get the fallback shell.
           $ = await next.render$(pathname)
-          expect($('[data-layout]').data('layout')).not.toBe(fallbackID)
+          expect($('[data-layout]').data('layout')).toBe(fallbackID)
 
           // Let's wait for the page to be revalidated.
+          let revalidatedDynamicID: string
           await retry(async () => {
             $ = await next.render$(pathname)
-            expect($('[data-layout]').data('layout')).not.toBe(dynamicID)
+            revalidatedDynamicID = $('[data-layout]').data('layout') as string
+            expect(revalidatedDynamicID).not.toBe(dynamicID)
+            expect(revalidatedDynamicID).not.toBe(fallbackID)
           })
         })
       })
+
+      it('should support client layouts', async () => {
+        const $ = await next.render$('/fallback/client/params/slug-01')
+
+        let selector = $(
+          '[data-file="app/fallback/client/params/[slug]/loading"]'
+        )
+        expect(selector.length).toBe(1)
+        expect(selector.closest('[hidden]').length).toBe(0)
+
+        selector = $('[data-file="app/fallback/client/params/[slug]/layout"]')
+        expect(selector.length).toBe(1)
+        expect(selector.closest('[hidden]').length).toBe(0)
+
+        selector = $('[data-file="app/fallback/client/params/[slug]/page"]')
+        expect(selector.length).toBe(1)
+        expect(selector.closest('[hidden]').length).toBe(1)
+      })
     })
   }