diff --git a/.changeset/selfish-pigs-pull.md b/.changeset/selfish-pigs-pull.md new file mode 100644 index 000000000000..03c3844d8e39 --- /dev/null +++ b/.changeset/selfish-pigs-pull.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/kit': patch +--- + +Reuse server data when the client load is invalidated diff --git a/packages/kit/src/runtime/client/client.js b/packages/kit/src/runtime/client/client.js index 755f0d85c428..46a66b14857d 100644 --- a/packages/kit/src/runtime/client/client.js +++ b/packages/kit/src/runtime/client/client.js @@ -656,10 +656,9 @@ export function create_client({ target, base, trailing_slash }) { /** * @param {import('types').ServerDataNode | import('types').ServerDataSkippedNode | null} node - * @param {import('./types').DataNode | null} [previous] * @returns {import('./types').DataNode | null} */ - function create_data_node(node, previous) { + function create_data_node(node) { if (node?.type === 'data') { return { type: 'data', @@ -671,8 +670,6 @@ export function create_client({ target, base, trailing_slash }) { url: !!node.uses.url } }; - } else if (node?.type === 'skip') { - return previous ?? null; } return null; } @@ -759,6 +756,8 @@ export function create_client({ target, base, trailing_slash }) { throw server_data_node; } + const prev_server_data_node = (!changed?.url && previous?.server) || null; + return load_node({ loader: loader[1], url, @@ -771,7 +770,7 @@ export function create_client({ target, base, trailing_slash }) { } return data; }, - server_data_node: create_data_node(server_data_node, previous?.server) + server_data_node: create_data_node(server_data_node) ?? prev_server_data_node }); }); diff --git a/packages/kit/test/apps/basics/src/routes/load/server-data-reuse/with-client-invalidation/+page.js b/packages/kit/test/apps/basics/src/routes/load/server-data-reuse/with-client-invalidation/+page.js new file mode 100644 index 000000000000..cc910681b3f8 --- /dev/null +++ b/packages/kit/test/apps/basics/src/routes/load/server-data-reuse/with-client-invalidation/+page.js @@ -0,0 +1,5 @@ +/** @type {import('./$types').PageLoad} */ +export function load({ data, depends }) { + depends('isomorphic-load'); + return { from_server: data }; +} diff --git a/packages/kit/test/apps/basics/src/routes/load/server-data-reuse/with-client-invalidation/+page.server.js b/packages/kit/test/apps/basics/src/routes/load/server-data-reuse/with-client-invalidation/+page.server.js new file mode 100644 index 000000000000..f3fc49dac602 --- /dev/null +++ b/packages/kit/test/apps/basics/src/routes/load/server-data-reuse/with-client-invalidation/+page.server.js @@ -0,0 +1,4 @@ +/** @type {import('./$types').PageServerLoad} */ +export function load() { + return { server: true }; +} diff --git a/packages/kit/test/apps/basics/src/routes/load/server-data-reuse/with-client-invalidation/+page.svelte b/packages/kit/test/apps/basics/src/routes/load/server-data-reuse/with-client-invalidation/+page.svelte new file mode 100644 index 000000000000..e775d6e53789 --- /dev/null +++ b/packages/kit/test/apps/basics/src/routes/load/server-data-reuse/with-client-invalidation/+page.svelte @@ -0,0 +1,12 @@ + + +

Page with server load and isomorphic-load

+ +
{JSON.stringify(data.from_server)}
diff --git a/packages/kit/test/apps/basics/src/routes/load/server-data-reuse/with-server-load/+page.svelte b/packages/kit/test/apps/basics/src/routes/load/server-data-reuse/with-server-load/+page.svelte index f64e3918b0b0..6f1c8cf5424e 100644 --- a/packages/kit/test/apps/basics/src/routes/load/server-data-reuse/with-server-load/+page.svelte +++ b/packages/kit/test/apps/basics/src/routes/load/server-data-reuse/with-server-load/+page.svelte @@ -6,3 +6,5 @@

Page with server load

{JSON.stringify(data)}
+ +No load page diff --git a/packages/kit/test/apps/basics/test/client.test.js b/packages/kit/test/apps/basics/test/client.test.js index 1c12378205a8..a5054b926839 100644 --- a/packages/kit/test/apps/basics/test/client.test.js +++ b/packages/kit/test/apps/basics/test/client.test.js @@ -377,6 +377,11 @@ test.describe('Load', () => { expect(await page.textContent('pre')).toBe(JSON.stringify({ foo: { bar: 'Custom layout' } })); }); + test('server data is reused if client load is invalidated', async ({ page }) => { + await page.goto('/load/server-data-reuse/with-client-invalidation'); + expect(await page.textContent('pre')).toBe(JSON.stringify({ server: true })); + }); + test('load does not call fetch if max-age allows it', async ({ page, request }) => { await request.get('/load/cache-control/reset');