How to Prerender Pages in SvelteKit for Faster Loads

In SvelteKit, you enable prerendering by adding export const prerender = true; in your page's +page.js or +page.ts file. This tells SvelteKit to generate static HTML for that page at build time, improving load speed and SEO.

Syntax

To prerender a page in SvelteKit, you export a constant named prerender set to true inside the page's module script file (+page.js or +page.ts).

This looks like:

• export const prerender = true; — enables prerendering for that page.

This tells SvelteKit to generate a static HTML file for the page during the build process.

javascript

export const prerender = true;

Example

This example shows a simple SvelteKit page that prerenders a static greeting message. The +page.js file enables prerendering, and the +page.svelte file displays the message.

javascript

// +page.js
export const prerender = true;

// +page.svelte
<script>
  export let data;
</script>

<h1>{data.greeting}</h1>

// +page.server.js
export function load() {
  return { greeting: 'Hello, prerendered world!' };
}

Output

<h1>Hello, prerendered world!</h1>

Common Pitfalls

Common mistakes when prerendering in SvelteKit include:

• Not exporting prerender in the correct file (+page.js or +page.ts).
• Using dynamic data or server-only features that prevent static generation.
• Forgetting to handle routes that require parameters, which need special handling to prerender.

Example of a wrong and right way:

javascript

// Wrong: missing prerender export
// +page.js
// no export here

// Right:
export const prerender = true;

Quick Reference

Feature	Usage
Enable prerender	export const prerender = true; in +page.js or +page.ts
Disable prerender	export const prerender = false;
Prerender all pages	Set prerender in svelte.config.js
Dynamic routes	Use entries in prerender config to specify paths

Key Takeaways

Add export const prerender = true; in your page's +page.js or +page.ts to enable prerendering.

Prerendering generates static HTML at build time for faster load and better SEO.

Avoid using server-only or dynamic data that can't be generated at build time.

Dynamic routes need special configuration to prerender all needed paths.

You can control prerendering globally or per page in SvelteKit.