From a37a86acf03f9fed27791d92e226d6cfe291eef5 Mon Sep 17 00:00:00 2001 From: Niklas Mischkulnig <4586894+mischnic@users.noreply.github.com> Date: Mon, 31 Aug 2026 09:46:38 +0200 Subject: [PATCH 1/5] tests: Improve use-cache-cross-deployment tests (#98049) Followup to #95233 - unskip one client component test since that is actually expected behavior already, we just need to test the observable behavior instead - Fix instant insights warnings - Don't use console.log since that errors when trying to print server references --- .../app/argument-use-cache/get-data.ts | 5 ++- .../app/argument-use-cache/page.tsx | 2 ++ .../app/argument-use-client/client.tsx | 20 ++++++++++-- .../app/argument-use-client/get-data.ts | 7 ----- .../app/argument-use-client/get-data.tsx | 10 ++++++ .../app/argument-use-client/page.tsx | 6 ++-- .../app/argument-use-server/get-data.ts | 5 ++- .../app/argument-use-server/page.tsx | 2 ++ .../app/client/page.tsx | 2 ++ .../app/nested/page.tsx | 2 ++ .../use-cache-cross-deployment/app/page.tsx | 2 ++ .../app/prerender/page.tsx | 2 ++ .../public/favicon.ico | Bin 15086 -> 0 bytes .../use-cache-cross-deployment.test.ts | 29 ++++++++++++------ 14 files changed, 71 insertions(+), 23 deletions(-) delete mode 100644 test/production/app-dir/use-cache-cross-deployment/app/argument-use-client/get-data.ts create mode 100644 test/production/app-dir/use-cache-cross-deployment/app/argument-use-client/get-data.tsx delete mode 100644 test/production/app-dir/use-cache-cross-deployment/public/favicon.ico diff --git a/test/production/app-dir/use-cache-cross-deployment/app/argument-use-cache/get-data.ts b/test/production/app-dir/use-cache-cross-deployment/app/argument-use-cache/get-data.ts index 4b62504ea037..cfd357242600 100644 --- a/test/production/app-dir/use-cache-cross-deployment/app/argument-use-cache/get-data.ts +++ b/test/production/app-dir/use-cache-cross-deployment/app/argument-use-cache/get-data.ts @@ -1,7 +1,10 @@ +globalThis.noop = () => {} + export async function getData(action) { 'use cache: remote' - console.log(action) + // Pretend to use it + globalThis.noop(action) return Math.random() } diff --git a/test/production/app-dir/use-cache-cross-deployment/app/argument-use-cache/page.tsx b/test/production/app-dir/use-cache-cross-deployment/app/argument-use-cache/page.tsx index 37edb04ff7f3..34968b78596d 100644 --- a/test/production/app-dir/use-cache-cross-deployment/app/argument-use-cache/page.tsx +++ b/test/production/app-dir/use-cache-cross-deployment/app/argument-use-cache/page.tsx @@ -2,6 +2,8 @@ import { connection } from 'next/server' import { action } from './action' import { getData } from './get-data' +export const instant = false + export default async function Page() { await connection() diff --git a/test/production/app-dir/use-cache-cross-deployment/app/argument-use-client/client.tsx b/test/production/app-dir/use-cache-cross-deployment/app/argument-use-client/client.tsx index fc07343ca9c0..499545d44878 100644 --- a/test/production/app-dir/use-cache-cross-deployment/app/argument-use-client/client.tsx +++ b/test/production/app-dir/use-cache-cross-deployment/app/argument-use-client/client.tsx @@ -1,5 +1,21 @@ 'use client' -export function client() { - return 'first' +import { useState } from 'react' + +export function Client() { + const [text, setText] = useState('') + + return ( +
+
Client Component A
+ + {text} +
+ ) } diff --git a/test/production/app-dir/use-cache-cross-deployment/app/argument-use-client/get-data.ts b/test/production/app-dir/use-cache-cross-deployment/app/argument-use-client/get-data.ts deleted file mode 100644 index 0dcfdc19520c..000000000000 --- a/test/production/app-dir/use-cache-cross-deployment/app/argument-use-client/get-data.ts +++ /dev/null @@ -1,7 +0,0 @@ -export async function getData(client) { - 'use cache: remote' - - console.log(client) - - return Math.random() -} diff --git a/test/production/app-dir/use-cache-cross-deployment/app/argument-use-client/get-data.tsx b/test/production/app-dir/use-cache-cross-deployment/app/argument-use-client/get-data.tsx new file mode 100644 index 000000000000..2e20c356d2d7 --- /dev/null +++ b/test/production/app-dir/use-cache-cross-deployment/app/argument-use-client/get-data.tsx @@ -0,0 +1,10 @@ +export async function getData(Client) { + 'use cache: remote' + + return ( +
+ {Math.random()} + +
+ ) +} diff --git a/test/production/app-dir/use-cache-cross-deployment/app/argument-use-client/page.tsx b/test/production/app-dir/use-cache-cross-deployment/app/argument-use-client/page.tsx index 02fa0fd11a36..604275d6b061 100644 --- a/test/production/app-dir/use-cache-cross-deployment/app/argument-use-client/page.tsx +++ b/test/production/app-dir/use-cache-cross-deployment/app/argument-use-client/page.tsx @@ -1,9 +1,11 @@ import { connection } from 'next/server' -import { client } from './client' +import { Client } from './client' import { getData } from './get-data' +export const instant = false + export default async function Page() { await connection() - return {await getData(client)} + return
{await getData(Client)}
} diff --git a/test/production/app-dir/use-cache-cross-deployment/app/argument-use-server/get-data.ts b/test/production/app-dir/use-cache-cross-deployment/app/argument-use-server/get-data.ts index 4b62504ea037..cfd357242600 100644 --- a/test/production/app-dir/use-cache-cross-deployment/app/argument-use-server/get-data.ts +++ b/test/production/app-dir/use-cache-cross-deployment/app/argument-use-server/get-data.ts @@ -1,7 +1,10 @@ +globalThis.noop = () => {} + export async function getData(action) { 'use cache: remote' - console.log(action) + // Pretend to use it + globalThis.noop(action) return Math.random() } diff --git a/test/production/app-dir/use-cache-cross-deployment/app/argument-use-server/page.tsx b/test/production/app-dir/use-cache-cross-deployment/app/argument-use-server/page.tsx index 37edb04ff7f3..34968b78596d 100644 --- a/test/production/app-dir/use-cache-cross-deployment/app/argument-use-server/page.tsx +++ b/test/production/app-dir/use-cache-cross-deployment/app/argument-use-server/page.tsx @@ -2,6 +2,8 @@ import { connection } from 'next/server' import { action } from './action' import { getData } from './get-data' +export const instant = false + export default async function Page() { await connection() diff --git a/test/production/app-dir/use-cache-cross-deployment/app/client/page.tsx b/test/production/app-dir/use-cache-cross-deployment/app/client/page.tsx index 39b38020aaba..5ed468ec6dc0 100644 --- a/test/production/app-dir/use-cache-cross-deployment/app/client/page.tsx +++ b/test/production/app-dir/use-cache-cross-deployment/app/client/page.tsx @@ -10,6 +10,8 @@ async function DynamicCache({ id }: { id: string }) { return {getDate()} } +export const instant = false + export default async function Page() { await connection() diff --git a/test/production/app-dir/use-cache-cross-deployment/app/nested/page.tsx b/test/production/app-dir/use-cache-cross-deployment/app/nested/page.tsx index 17b39bc213b2..72fc1ea2b897 100644 --- a/test/production/app-dir/use-cache-cross-deployment/app/nested/page.tsx +++ b/test/production/app-dir/use-cache-cross-deployment/app/nested/page.tsx @@ -13,6 +13,8 @@ async function getOuterData() { return getInnerData() } +export const instant = false + export default async function Page() { await connection() diff --git a/test/production/app-dir/use-cache-cross-deployment/app/page.tsx b/test/production/app-dir/use-cache-cross-deployment/app/page.tsx index 9bb9b6d57b5d..ac200a6924ba 100644 --- a/test/production/app-dir/use-cache-cross-deployment/app/page.tsx +++ b/test/production/app-dir/use-cache-cross-deployment/app/page.tsx @@ -14,6 +14,8 @@ async function AsyncComp() { return {data} } +export const instant = false + export default async function Home() { await connection() diff --git a/test/production/app-dir/use-cache-cross-deployment/app/prerender/page.tsx b/test/production/app-dir/use-cache-cross-deployment/app/prerender/page.tsx index aad28420e07c..d747d7c0117c 100644 --- a/test/production/app-dir/use-cache-cross-deployment/app/prerender/page.tsx +++ b/test/production/app-dir/use-cache-cross-deployment/app/prerender/page.tsx @@ -8,6 +8,8 @@ async function DynamicCache({ id }: { id: string }) { return {getDate()} } +export const instant = false + export default function Page() { return (
diff --git a/test/production/app-dir/use-cache-cross-deployment/public/favicon.ico b/test/production/app-dir/use-cache-cross-deployment/public/favicon.ico deleted file mode 100644 index 4965832f2c9b0605eaa189b7c7fb11124d24e48a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 15086 zcmeHOOH5Q(7(R0cc?bh2AT>N@1PWL!LLfZKyG5c!MTHoP7_p!sBz0k$?pjS;^lmgJ zU6^i~bWuZYHL)9$wuvEKm~qo~(5=Lvx5&Hv;?X#m}i|`yaGY4gX+&b>tew;gcnRQA1kp zBbm04SRuuE{Hn+&1wk%&g;?wja_Is#1gKoFlI7f`Gt}X*-nsMO30b_J@)EFNhzd1QM zdH&qFb9PVqQOx@clvc#KAu}^GrN`q5oP(8>m4UOcp`k&xwzkTio*p?kI4BPtIwX%B zJN69cGsm=x90<;Wmh-bs>43F}ro$}Of@8)4KHndLiR$nW?*{Rl72JPUqRr3ta6e#A z%DTEbi9N}+xPtd1juj8;(CJt3r9NOgb>KTuK|z7!JB_KsFW3(pBN4oh&M&}Nb$Ee2 z$-arA6a)CdsPj`M#1DS>fqj#KF%0q?w50GN4YbmMZIoF{e1yTR=4ablqXHBB2!`wM z1M1ke9+<);|AI;f=2^F1;G6Wfpql?1d5D4rMr?#f(=hkoH)U`6Gb)#xDLjoKjp)1;Js@2Iy5yk zMXUqj+gyk1i0yLjWS|3sM2-1ECc;MAz<4t0P53%7se$$+5Ex`L5TQO_MMXXi04UDIU+3*7Ez&X|mj9cFYBXqM{M;mw_ zpw>azP*qjMyNSD4hh)XZt$gqf8f?eRSFX8VQ4Y+H3jAtvyTrXr`qHAD6`m;aYmH2zOhJC~_*AuT} zvUxC38|JYN94i(05R)dVKgUQF$}#cxV7xZ4FULqFCNX*Forhgp*yr6;DsIk=ub0Hv zpk2L{9Q&|uI^b<6@i(Y+iSxeO_n**4nRLc`P!3ld5jL=nZRw6;DEJ*1z6Pvg+eW|$lnnjO zjd|8>6l{i~UxI244CGn2kK@cJ|#ecwgSyt&HKA2)z zrOO{op^o*- { const key1 = await execute(next, 'NEXT_DEPLOYMENT_ID', 'dpl-id-1') @@ -258,7 +259,8 @@ describe.each(['NEXT_DEPLOYMENT_ID', 'BUILD_ID', 'default'])( // TODO when serializing server reference arguments, we need to include the server reference's // entropy in the argument-part of the cache key. - // Furthermore, we need to compute the metadata information for use-server functions. + // But currently, you cannot do anything with the passed server reference anyway. + // Furthermore, we need to compute the metadata information for `use cache` functions as well. it.skip('should recompute when a use server reference argument changes', async () => { const key1 = await execute(next, 'NEXT_DEPLOYMENT_ID', 'dpl-id-1') @@ -349,22 +351,29 @@ describe.each(['NEXT_DEPLOYMENT_ID', 'BUILD_ID', 'default'])( ) }) - // TODO this seems like a preexisting bug? The reference gets serialized into the cache key as just "$T" - it.skip('should recompute when a client reference argument changes', async () => { + it('should work still when a client reference argument changes', async () => { + // The client reference is passed as an opaque argument. Instead, we need to make sure that + // the client reference still uses the up-to-date chunks. const key1 = await execute(next, 'NEXT_DEPLOYMENT_ID', 'dpl-id-1') await next.patchFile( 'app/argument-use-client/client.tsx', (oldContent) => - oldContent.replace( - "'use client'", - "'use client'\n\nawait Promise.resolve()" - ), + oldContent + .replace('Client Component A', 'Client Component B') + .replace('Button clicked', 'Handle clicked'), async () => { const key2 = await execute(next, 'NEXT_DEPLOYMENT_ID', 'dpl-id-2') - expect(key1.keyArgumentUseClient).not.toBe(key2.keyArgumentUseClient) - expect(key1.dataArgumentUseClient).not.toBe( - key2.dataArgumentUseClient + expect(key1.keyArgumentUseClient).toBe(key2.keyArgumentUseClient) + expect(key1.dataArgumentUseClient).toBe(key2.dataArgumentUseClient) + + const browser = await next.browser('/argument-use-client') + expect(await browser.elementById('title').text()).toBe( + 'Client Component B' + ) + await browser.elementByCss('button').click() + expect(await browser.elementById('state').text()).toBe( + 'Handle clicked' ) } ) From 086294e2e5bee8352d69929ba5772e4d3863bba9 Mon Sep 17 00:00:00 2001 From: Aurora Scharff <66901228+aurorascharff@users.noreply.github.com> Date: Mon, 31 Aug 2026 11:22:47 +0200 Subject: [PATCH 2/5] docs: add layout stability guidance for videos and iframes (#98070) ## Summary - Document how dimensions and poster images keep video layouts stable while media loads. - Add equivalent sizing guidance for lazy-loaded iframes. ## Verification - `prettier --check docs/01-app/02-guides/videos.mdx` --- docs/01-app/02-guides/videos.mdx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/docs/01-app/02-guides/videos.mdx b/docs/01-app/02-guides/videos.mdx index c745ec1127ca..90fb15c52250 100644 --- a/docs/01-app/02-guides/videos.mdx +++ b/docs/01-app/02-guides/videos.mdx @@ -17,7 +17,13 @@ The HTML [`