stale data when client-side navigating after a new deployment

[eltigerchino]

Describe the bug

first brought up in #8665

SvelteKit does not correctly reload the page when navigating after a new app has been deployed.

It only reloads when an error has occurred, such as when a file cannot be found because its name has changed (rollup changes the filename hash when the page content has changed).

However, this will not occur if the user has already visited the page in that client-side navigation session.
It only occurs for the pages that haven't been visited yet.

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-mxgjjq?view=editor

1. Enter npm run build && node build in the terminal.
2. Open the preview window in a new tab by clicking Open in New Tab in the top-right corner to avoid StackBlitz's automatic reload.
3. Navigate to any other page in the built website.
4. End the current node server instance by entering ctrl + c into the terminal.
5. Modify the HTML content in src/routes/+page.svelte.
6. Enter npm run build && node build into the terminal again.
7. Navigate to the Home page / in the website.

Expected

A native navigation to the home page and the version number at the bottom of the page changes.

Actual

The website still displays the old home page until you manually refresh the page.

Logs

No response

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    @sveltejs/adapter-node: ^1.1.4 => 1.1.4 
    @sveltejs/kit: ^1.2.6 => 1.2.6 
    svelte: ^3.54.0 => 3.55.1 
    vite: ^4.0.0 => 4.0.4

Severity

annoyance

Additional Information

Client-side navigation can be buggy if you deploy a new version of your app while people are using it. If the code for the new page is already loaded, it may have stale content; if it isn't, the app's route manifest may point to a JavaScript file that no longer exists. SvelteKit solves this problem by falling back to traditional full-page navigation if it detects that a new version has been deployed, using the name specified here (which defaults to a timestamp of the build).

https://kit.svelte.dev/docs/configuration#version

[dummdidumm]

I don't think there's anything we should do to fix this. If I remember @Rich-Harris correctly the idea is to give this into the hands of the user - it may not always be desireable to do a full page refresh even if the site is outdated, you may lose all your client side data unexpected.
This isn't clear from the documentation though, which suggests that this just works automatically somehow. So I think the solution is to enhance the documentation here, clarifying that and giving a short example how you could achieve this, like

// +layout.svelte
import { beforeNavigate } from '$app/navigation';
import { updated } from '$app/stores';

beforeNavigate(({ willUnload, to }) => {
  if ($updated && !willUnload && to?.route.url) {
    location.href = to.route.url.href;
  }
});

[chris-carrington]

Thank you @s3812497 & @dummdidumm ! I tried this and it's not working yet, I tried this with @geoffrich suggestions (pollInterval & data-sveltekit-reload) & without and on every navigation post deploy $updated is false, btw I found url off to not route but even before it gets there I haven't seen $updated to be true

+layout.svelte
svelte.config.json
site

Thank you so much!

[geoffrich]

Solved the issue in the above comment here: #8665 (reply in thread)

Definitely think there's room to improve docs here -- "falling back to traditional full-page navigation if it detects that a new version has been deployed" sounds like Kit will do this automatically, and it doesn't seem like that's the case.

Haven't tried out dummdidumm's solution, but I have an alternate approach conditionally applying data-sveltekit-reload in a layout over in this discussion thread. Not sure if one is more optimal than the other.