Load's fetch re-requests data on every route change with prerendered pages

Describe the bug

If I understand correctly, using the fetch implementation provided by load on a prerendered route should effectively just hydrate the page with JSON fetched during build, unless the request is different than it was on the server. Initial page loads suggest this is happening, but on every route change fetch is called again, and it’s not consistently cached, resulting in laggy navigation on a fully prerendered site.

Reproduction

• Branch of website this is occurring on: https://github.com/heybokeh/website/tree/load\
• Data fetching function: https://github.com/heybokeh/website/blob/load/src/lib/prismic.ts#L18
• Example simple route: https://github.com/heybokeh/website/blob/load/src/routes/pricing.svelte
• Repro in staging: https://bokeh-website-git-load-tomorrowstudio.vercel.app/

Repro steps:

• Load website in incognito (to avoid service worker caching) & open inspector
• Navigate back and forth between routes
• See repeated graphql requests in network tab

Logs

System Info

System:
    OS: macOS 12.1
    CPU: (8) arm64 Apple M1
    Memory: 150.48 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.0 - /usr/local/bin/node
    Yarn: 1.22.15 - /usr/local/bin/yarn
    npm: 8.1.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 98.0.4758.80
    Firefox: 94.0.2
    Safari: 15.2
  npmPackages:
    @sveltejs/adapter-auto: ^1.0.0-next.17 => 1.0.0-next.17 
    @sveltejs/kit: ^1.0.0-next.260 => 1.0.0-next.260 
    svelte: ^3.46.4 => 3.46.4 

Severity

serious, but I can work around it

Additional Information

• Deployed to vercel with adapter-vercel
• Every route prerendered with export const prerender = true

[madeleineostoja]

Just wanted to mention that after building a couple SSG client sites with this setup, it’s really not that clear, and I agree that maxage isn’t a solution for SSG sites that get rebuilt on content changes.

I think the docs should be much more explicit around all the ways that sveltekit loads data, because right now it feels like a real minefield and it’s the thing I spend the most of my time explaining to colleagues when getting them to try svelte in general.

I would also LOVE if there was a way for load to act like a page endpoint and generate a static bundle of data. Maybe I’m an outlier here but I find separate files for data fetching in every route really clunky, especially when it’s a 3 line API call, and especially when there are still cases that shadow endpoints silently fall over (index, error, layout, etc).

I think shadow endpoints and endpoints in general have a really strong use case in complex server logic (eg: serverside glue code for otherwise clientside apps), but are confusing as a tool for isomorphic code that you only want to run during build, which is super common for CMS backed SSGs, which themselves are a super common use case for sveltekit.

Sorry for the short essay but the data layer of sveltekit is the only part that really irks me, and the part that almost every dev I try to introduce it to gets hung up on.

[marlosin]

I had to say I’ve been struggling to avoid that fetch when changing routes. With. prerender = true and hydrate = false, every initial load does indeed use the generated JSON, but I’m trying to generate static pages with the fetch done only at build time, so external fetches are not done for every route navigation, but load the JSON instead. I guess I could still use maxage but what would be my alternative, to call fetch from a page endpoint?

@Rich-Harris , for my use case, I don’t want that the client executes external fetches for hydration on every route change. I have a CMS (strapi) running in Heroku where I expose my api, and my sveltekit client is hosted in Netlify, so my intention is to run a build every time my CMS changes. With that I think maxage wouldn’t be the preferable choice for me because I just don’t want to set like 6 months as I’m not sure whether this content will be updated some time before that. I’m using a personal fork and just changed this line https://github.com/marlosin/kit/commit/9b12d50ff084a31fd3a86942e01b90d24fa76f0c . I was wondering whether you see a way of accomplishing the same results without needing to do it?