How to refresh app post deploy

[chris-carrington]

Thank you for building SvelteKit!

I have my prod site open in a tab, push to main, vercel see's the push and deploys to production and vercel tells me all done in 15-20 seconds, amazing!

I click on the opened prod site tab, click a link (client side routing) to the view with new content & it is not there, a page refresh shows the new content.

Goal: If app the user is viewing is not the latest have links refresh the page!

I found this that may help, idk how to know if current app version is not latest tho, thank you!

[eltigerchino]

Is it possible that your app.html or some other part of your app is preloading stale code / data?

https://kit.svelte.dev/docs/link-options#data-sveltekit-preload-data

https://kit.svelte.dev/docs/modules#$app-navigation-preloadcode

Otherwise, you could disable client-side routing by forcing a reload on all links if your app will be deployed frequently

https://kit.svelte.dev/docs/link-options#data-sveltekit-reload

[geoffrich]

You should be able to set version.pollInterval in your svelte.config.js. With this setting, SvelteKit will check for a new version of your app using the interval you set. For example, with the below config, it will check every 5 seconds (5000 ms).

const config = {
	kit: {
		adapter: adapter(),
		version: {
			pollInterval: 5000
		}
	}
};

If you've set pollInterval to a non-zero value, you can use the updated store to determine if a new version is available.

<script>
	import { updated } from '$app/stores';
</script>

<p>Updated: {$updated}</p>

If you want to force a reload whenever the app code has been updated, you can use data-sveltekit-reload like so in your root +layout.svelte:

<script>
	import Header from './Header.svelte';
	import './styles.css';
	import { updated } from '$app/stores';
</script>

<div class="app" data-sveltekit-reload={$updated ? "" : "off"}>
	<slot />
</div>

When $updated is true, any navigation will do a full page reload. Otherwise when $updated is false, navigations will happen client side.

[whishkid]

Does this also work with adapter-static?

[eltigerchino]

yes. the version is a static file s the client side js can make a request to check it

[whishkid]

Thx!

[krishnaTORQUE]

You should be able to set version.pollInterval in your svelte.config.js. With this setting, SvelteKit will check for a new version of your app using the interval you set. For example, with the below config, it will check every 5 seconds (5000 ms).

const config = {
	kit: {
		adapter: adapter(),
		version: {
			pollInterval: 5000
		}
	}
};

If you've set pollInterval to a non-zero value, you can use the updated store to determine if a new version is available.

<script>
	import { updated } from '$app/stores';
</script>

<p>Updated: {$updated}</p>

If you want to force a reload whenever the app code has been updated, you can use data-sveltekit-reload like so in your root +layout.svelte:

<script>
	import Header from './Header.svelte';
	import './styles.css';
	import { updated } from '$app/stores';
</script>

<div class="app" data-sveltekit-reload={$updated ? "" : "off"}>
	<slot />
</div>

When $updated is true, any navigation will do a full page reload. Otherwise when $updated is false, navigations will happen client side.

updated has been deprecard. Is there any other alternative with the same behavior? (Clicking the link will do full page navigation or client side navigation). Thanks

[david-plugge]

https://svelte.dev/tutorial/kit/updated-state

[krishnaTORQUE]

@david-plugge Thanks a lot.