Redirect from actions in Svelte - Step-by-Step Execution

Concept Flow - Redirect from actions

User submits form

↓

Action function runs

↓

Check if redirect needed?

No→Return data

Yes↓

Return redirect response

↓

Browser navigates to new URL

When a form is submitted, the action function runs. If it returns a redirect, the browser navigates to the new URL. Otherwise, it stays and updates the page.

Execution Sample

Svelte

export const actions = {
  default: async ({ request }) => {
    // process form
    return { redirect: '/success' };
  }
};

This action handles a form submission and redirects the user to '/success'.

Execution Table

Step	Event	Action	Return Value	Browser Behavior
1	User submits form	Action function called	Pending	No change yet
2	Inside action	Process form data	Pending	No change yet
3	Inside action	Return { redirect: '/success' }	{ redirect: '/success' }	Browser prepares to redirect
4	After action	Browser receives redirect	N/A	Browser navigates to '/success'
5	Navigation complete	Page loads '/success'	N/A	User sees new page

💡 Redirect returned, so browser navigates away, stopping current page update.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
request	undefined	Form data present	Form data present	N/A
return value	undefined	undefined	{ redirect: '/success' }	N/A

Key Moments - 2 Insights

Why does the browser navigate away when the action returns a redirect?

Because the action returns an object with a redirect property (see execution_table step 3), SvelteKit tells the browser to navigate to that URL instead of updating the current page.

What happens if the action returns data without a redirect?

The page updates with the returned data and does not navigate away. This is shown by the 'No change yet' browser behavior in steps 1 and 2, and would continue without redirect.

Visual Quiz - 3 Questions

Look at the execution table, what is the return value of the action at step 3?

A undefined

B { data: 'form data' }

C { redirect: '/success' }

D null

💡 Hint

Check the 'Return Value' column at step 3 in the execution_table.

At which step does the browser start navigating to the new URL?

A Step 2

B Step 4

C Step 3

D Step 5

💡 Hint

Look at the 'Browser Behavior' column to see when navigation begins.

If the action returned { data: { success: true } } instead of a redirect, what would change in the execution table?

A Return Value at step 3 would show the data object, and browser would not navigate

B Browser would navigate to '/success' anyway

C Action would not run

D Browser would reload the current page

💡 Hint

Refer to key_moments about what happens when no redirect is returned.

Concept Snapshot

SvelteKit actions handle form submissions.
Return { redirect: '/url' } to navigate.
Browser redirects immediately on redirect return.
Return data to update page without navigation.
Use actions for server-side form logic.

Full Transcript

When a user submits a form in SvelteKit, the action function runs on the server. If the action returns an object with a redirect property, the browser will navigate to that URL. This stops the current page update and loads the new page. If the action returns data without redirect, the page updates with that data and stays on the same URL. This flow helps handle form submissions and navigation smoothly.