Basic Svelte
Introduction
Bindings
Advanced Svelte
Advanced reactivity
Motion
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion
In the chapter on loading data, we saw how you can export load
functions from +page.js
, +page.server.js
, +layout.js
and +layout.server.js
files. We can also export various page options from these modules:
ssr
— whether or not pages should be server-renderedcsr
— whether to load the SvelteKit clientprerender
— whether to prerender pages at build time, instead of per-requesttrailingSlash
— whether to strip, add, or ignore trailing slashes in URLs
In the following exercises, we’ll learn about each of these in turn.
Page options can apply to individual pages (if exported from +page.js
or +page.server.js
), or groups of pages (if exported from +layout.js
or +layout.server.js
). To define an option for the whole app, export it from the root layout. Child layouts and pages override values set in parent layouts, so — for example — you can enable prerendering for your entire app then disable it for pages that need to be dynamically rendered.
You can mix and match these options in different areas of your app — you could prerender your marketing pages, dynamically server-render your data-driven pages, and treat your admin pages as a client-rendered SPA. This makes SvelteKit very versatile.
<h2>Page options</h2>