sveltejs / sveltejs/kit

Server loader with cache headers can't cache first load

Open
#7,790 3 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
20.8k
Forks
2.3k
Avg merge
1d 16h
Merged PRs (30d)
156

Description

Describe the bug

If I have cache headers set in my server load function

export async function load(params) {
	console.log('LOADING');

	// const val = params.url.searchParams.get('val');
	const val = params.url.search;

	const result = {
		searchProps: 'Value ' + val + ' ' + ' CACHE TEST VALUE === ' + i++
	};

	params.setHeaders({
		'cache-control': 'max-age=60'
		//Vary: 'Cookie'
	});

	return result;
}

the headers work, and the page is cached, but if I start on this page, browse elsewhere, and then hit the back button, the loader re-runs.

The reason appears to be that the initial load of my site renders the entire page (which does have the correct headers), but subsequent navigations fetch a __data.js with the right url attached, so browsing back to it fetches that, which isn't (yet) cached.

Reproduction

The minimal repro is here: https://github.com/arackaf/booklist/tree/special/bug-repro/svelte-kit

the directory above that has a huge project around it, but that directory I've linked to contains a minimal SvelteKit app that reproduces this (ostensible) bug.

It's currently deployed here: https://booklist-svelte-kit.vercel.app/

As you navigate, you'll see fresh calls to fetch __data.json, even when you click back to the starting page, which, again, is not (yet) cached.

Logs

No response

System Info
System:
    OS: macOS 12.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 149.78 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.14.2 - /usr/local/Cellar/nvm/0.38.0/versions/node/v16.14.2/bin/node
    Yarn: 1.22.17 - /usr/local/Cellar/nvm/0.38.0/versions/node/v16.11.1/bin/yarn
    npm: 8.18.0 - ~/Documents/node_modules/.bin/npm
  Browsers:
    Chrome: 107.0.5304.110
    Firefox: 107.0
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.89 
    @sveltejs/kit: next => 1.0.0-next.557 
    svelte: ^3.44.0 => 3.53.1 
    vite: ^3.1.0 => 3.2.4
Severity

serious, but I can work around it

Additional Information

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked minimal SvelteKit reproduction and compare the initial page request with the subsequent __data.js request during back navigation. Trace how cache-control headers from the server load function apply to each request; done means returning to the starting page uses the cached response without rerunning the loader.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
backend, performance
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.