Invalidation and reloading in Svelte - Step-by-Step Execution

Concept Flow - Invalidation and reloading

User triggers event

↓

Invalidate data cache

↓

SvelteKit reloads data

↓

Load function runs

↓

New data fetched

↓

Component re-renders with fresh data

When data is invalidated, SvelteKit reloads by running the load function again and updates the component with fresh data.

Execution Sample

Svelte

export async function load({ fetch }) {
  const res = await fetch('/api/data');
  const data = await res.json();
  return { data };
}

// On invalidate, load runs again to refresh data

This load function fetches data from an API. When invalidated, it runs again to reload fresh data.

Execution Table

Step	Trigger	Action	Load Function Called	Data Fetched	Component Update
1	Page loads	Initial load	Yes	Data v1	Component renders with Data v1
2	User triggers invalidate	Invalidate cache	Yes	Data v2	Component re-renders with Data v2
3	User triggers invalidate again	Invalidate cache	Yes	Data v3	Component re-renders with Data v3
4	No further invalidation	No action	No	No new data	Component stays with Data v3

💡 No more invalidations, so load function does not run again and component stays with last data.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
data	undefined	Data v1	Data v2	Data v3	Data v3
loadCalled	false	true	true	true	true

Key Moments - 2 Insights

Why does the load function run again after invalidation?

Because invalidation tells SvelteKit the cached data is stale, so it reruns the load function to fetch fresh data, as shown in execution_table steps 2 and 3.

Does the component update if load is not called?

No, the component only updates when new data is fetched after load runs. Step 4 in execution_table shows no load call and no update.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'data' after step 2?

A Data v3

B Data v1

C Data v2

D undefined

💡 Hint

Check the 'Data Fetched' column at step 2 in execution_table.

At which step does the load function NOT run?

A Step 1

B Step 4

C Step 2

D Step 3

💡 Hint

Look at the 'Load Function Called' column in execution_table.

If the user never triggers invalidation, what happens to the component data?

A It stays with initial data

B It updates continuously

C It becomes undefined

D It reloads automatically every second

💡 Hint

Refer to variable_tracker for 'data' after initial load and no invalidation.

Concept Snapshot

SvelteKit invalidation reloads data by rerunning the load function.
Trigger invalidation to mark cached data stale.
Load fetches fresh data and updates component.
Without invalidation, data stays the same.
Use invalidate() to refresh data on demand.

Full Transcript

In SvelteKit, when you want fresh data, you invalidate the cached data. This triggers the load function to run again, fetching new data from the server or API. The component then updates to show this fresh data. If you don't invalidate, the component keeps showing the old data. This process helps keep your app data up-to-date without full page reloads.