SvelteKit by Example: Pages & Links

Page components are plain Svelte components rendered at a URL determined by the file system. By default, SvelteKit renders HTML on the server, then hydrates it in the browser to make it interactive.

In this example, we'll set up some static pages and link them.

Use an a tag to link to another page. Its file path determines the URL. With JavaScript, SvelteKit handles navigation in the browser.

src/routes/+page.svelte

<h1>My todos</h1>

<a href="/about">About</a>

src/routes/about/+page.svelte

<h1>About</h1>

New projects put data-sveltekit-preload-data="hover" on the body in src/app.html. This preloads page data when the user hovers over a link, making navigation faster.

<body data-sveltekit-preload-data="hover">
  <div style="display: contents">%sveltekit.body%</div>
</body>

To opt out, set data-sveltekit-preload-data="false" on the link. In SvelteKit 3, use false instead of off.

src/routes/+page.svelte

<h1>My todos</h1>

<a
  href="/about"
  data-sveltekit-preload-data="false"
>
  About
</a>

Static sites can generate pages ahead of time, like this documentation site. Install @sveltejs/adapter-static and configure it in Vite. It writes HTML and assets for a static host.

vite.config.js

import { defineConfig } from 'vite';
import { sveltekit } from '@sveltejs/kit/vite';
import adapter from '@sveltejs/adapter-static';

export default defineConfig({
  plugins: [
    sveltekit({ adapter: adapter() }),
  ],
});

Set prerender in the root layout to generate pages at build time. Every page must be reachable through links, or listed in the prerender entries for dynamic routes.

The first visit loads generated HTML. With JavaScript, hydration and subsequent navigation still happen in the browser. No production Node.js or Worker runtime is needed unless you use request-time server features, like form actions or database reads on each visit.

src/routes/+layout.js

export const prerender = true;

resources://