SvelteKit page data doesn't always update when opening new page in the same dynamic route

Question

I have a route structure /items/[category]. When the user is browsing /items/category1 and then tries to go to a another page in the same route (eg. /items/category2) the page data usually updates to show category2 items, but not always. Sometimes the URL updates in the browser but the page data still shows items from the previous URL.

My +page.server.js for /items/[category] looks like:

import { getItems } from '$lib/services/ItemService';
export const csr = false;
export const load = ({ locals, params }) => {
    return {
        items: getItems(locals, `category = "${params.itemCategory}"`)
    };
};

And my +page.svelte is:

<script>
   import { ItemCard } from '$lib/components';
   export let data
   let items = data.items
</script>
...
<div class="grid grid-cols-1 md:grid-cols-3 px-4 gap-6">   
   {#each items as item}
      <ItemCard {item}/>
   {/each}
</div>

The getItems() function retrieves JSON data from pocketbase and is working correctly.

I read that adding the export const csr = false; to the +page.server.js should solve the problem, but it appears that the page still isn't always re-loading data from the server when swapping between routes.

Answer 1

You change local state non-reactively:

let items = data.items

If data is updated by the router, items will not.

Making it reactive might fix the issue:

$: items = data.items              // Svelte 3/4
const items = $derived(data.items) // Svelte 5 runes

You can also destructure props reactively, which requires additional parentheses for labeled statements:

$: ({ items } = data)            // Svelte 3/4
const { items } = $derived(data) // Svelte 5 runes

SvelteKit docs on this issue.