SvelteKit supports configurable rendering modes
SvelteKit provides configurable rendering to handle different parts of your app on the server via SSR, in the browser through client-side rendering, or at build-time with prerendering.
Svelte · SvelteKit · all subjects
rendering
45 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
+page.svelte for page rendering
A +page.svelte component defines a page. By default, pages are rendered on the server (SSR) for the initial request and in the browser (CSR) for subsequent navigation.
Server load functions stream promises to browser
When using a server load function, promises in the returned object will be streamed to the browser as they resolve. This allows starting to render the page before all data is available, useful for slow non-essential data. The page will only render once all promises resolve on platforms without streaming support like AWS Lambda or Firebase.
Universal load functions do not stream promises during SSR
Promises returned from universal load functions in +page.js or +layout.js are not streamed during server-side rendering; instead the promise is recreated when the function reruns in the browser. To stream promises, use server load functions in +page.server.js or +layout.server.js.
prerender option values: true, false, and 'auto'
The prerender option accepts three values: true to prerender the route at build time, false to disable prerendering, or 'auto' to prerender a route but also include it in the manifest for dynamic SSR. This allows prerendering popular content while server-rendering the long tail.
Routes with prerender true are excluded from dynamic SSR manifests
Routes with prerender = true will be excluded from manifests used for dynamic SSR, making your server (or serverless/edge functions) smaller.
Prerenderer discovers pages by crawling from entry points
The prerenderer will start at the root of your app and generate files for any prerenderable pages or +server.js routes it finds. Each page is scanned for <a> elements that point to other pages that are candidates for prerendering. You can specify which pages should be accessed with config.kit.prerender.entries or by exporting an entries function from a dynamic route.
building environment variable during prerendering
While prerendering, the value of building imported from $app/environment will be true.
Prerender applies to +server.js files with inheritance from pages
The prerender option applies to +server.js files. These files are not affected by layouts, but will inherit default values from the pages that fetch data from them. For example, if a +page.js has export const prerender = true and fetches from a +server.js route, that route will be treated as prerenderable if it doesn't contain its own export const prerender = false.
Basic rule for prerenderable pages
For a page to be prerenderable, any two users hitting it directly must get the same content from the server.
Cannot prerender pages with form actions
Pages with actions cannot be prerendered, because a server must be able to handle the action POST requests.
Cannot access url.searchParams during prerendering
Accessing url.searchParams during prerendering is forbidden. If you need to use it, ensure you are only doing so in the browser, for example in onMount.
Prerendering route name conflicts resolution
Because prerendering writes to the filesystem, it is not possible to have two endpoints that would cause a directory and a file to have the same name. For example, src/routes/foo/+server.js and src/routes/foo/bar/+server.js would try to create foo and foo/bar, which is impossible. It is recommended that you always include a file extension like src/routes/foo.json/+server.js and src/routes/foo/bar.json/+server.js. For pages, index.html is written (foo/index.html instead of foo) to avoid this problem.
entries function for prerendering dynamic routes
An entries function can be exported from a +page.js, +page.server.js, or +server.js belonging to a dynamic route to tell SvelteKit which pages should be prerendered. It returns an array of objects with the route parameters. The function can be async, allowing you to retrieve a list of entries from a CMS or database.
ssr option disables server-side rendering
When export const ssr = false is set, SvelteKit renders an empty 'shell' page instead of rendering the page on the server. This is useful if your page is unable to be rendered on the server because you use browser-only globals like document. If both ssr and csr are false, nothing will be rendered.
ssr = false in root layout makes entire app an SPA
If you add export const ssr = false to your root +layout.js, your entire app will only be rendered on the client, which essentially means you turn your app into an SPA. This should not be done if your goal is to build a statically generated site.
csr option disables client-side rendering
When export const csr = false is set, SvelteKit does not hydrate your server-rendered HTML into an interactive client-side-rendered page. This is useful for pages that don't require JavaScript. If both csr and ssr are false, nothing will be rendered.
Effects of disabling csr
Disabling CSR does not ship any JavaScript to the client. This means: the webpage should work with HTML and CSS only; <script> tags inside all Svelte components are removed; <form> elements cannot be progressively enhanced; links are handled by the browser with a full-page navigation; Hot Module Replacement (HMR) will be disabled.
trailingSlash affects prerendering output
The trailingSlash option affects prerendering. If trailingSlash is 'always', a route like /about will result in an about/index.html file, otherwise it will create about.html, mirroring static webserver conventions.
Non-dynamic routes are default prerender entry points
By default, all non-dynamic routes are considered entry points for prerendering. For example, routes like / and /blog are entry points because they don't have parameters, while /blog/[slug] is dynamic and not an entry point unless explicitly specified.
Dynamic environment variables cannot be used during prerendering in v2
In SvelteKit 2, dynamic environment variables from $env/dynamic/public and $env/dynamic/private cannot be read during prerendering. Use $env/static/public and $env/static/private instead. When users land on a prerendered page, SvelteKit will request updated values for $env/dynamic/public from the server (default location: /_app/env.js).
CSR - Client-side rendering definition
Client-side rendering (CSR) is the generation of page contents in the web browser using JavaScript. In SvelteKit, client-side rendering is used by default, but can be turned off with the `csr = false` page option.
Edge rendering definition
Edge rendering refers to rendering an application in a content delivery network (CDN) near the user. Edge rendering allows the request and response for a page to travel a shorter distance, thus improving latency.
Hybrid app rendering mode
SvelteKit uses a hybrid rendering mode by default where it loads the initial HTML from the server (SSR), and then updates the page contents on subsequent navigations via client-side rendering (CSR).
Hydration process in SvelteKit
When fetching data during SSR, by default SvelteKit stores this data and transmits it to the client along with the server-rendered HTML. The components can then be initialized on the client with that data without calling the same API endpoints again. Svelte checks that the DOM is in the expected state and attaches event listeners in a process called hydration. Pages in SvelteKit will be hydrated by default, but JavaScript can be turned off with the `csr = false` page option.
ISR - Incremental Static Regeneration definition
Incremental static regeneration (ISR) allows you to generate static pages on your site as visitors request those pages without redeploying. This may reduce build times compared to SSG sites with a large number of pages. ISR can be done with adapter-vercel.
MPA - Multi-page app definition
Traditional applications that render each page view on the server — such as those written in languages other than JavaScript — are often referred to as multi-page apps (MPA).
SPA - Single-page app definition
A single-page app (SPA) is an application in which all requests to the server load a single HTML file which then does client-side rendering based on the requested URL. All navigation is handled on the client-side via client-side routing with per-page contents being updated and common layout elements remaining largely unchanged. An SPA serves an empty shell on the initial request, which should not be confused with a hybrid app, which serves HTML on the initial request. SPA mode has large negative performance and SEO impacts and is recommended only in very limited circumstances such as when being wrapped in a mobile app. In SvelteKit, SPAs can be built with adapter-static.
SSR - Server-side rendering definition
Server-side rendering (SSR) is the generation of page contents on the server. Returning page contents from the server via SSR or prerendering is highly preferred for performance and SEO. It significantly improves performance by avoiding extra round trips necessary in a SPA, and makes your app accessible to users if JavaScript fails or is disabled. In SvelteKit, pages are server-side rendered by default. SSR can be disabled with the `ssr` page option.
RemotePrerenderFunction signature
RemotePrerenderFunction is a function type for remote prerender functions that accepts arg (undefined extends Input ? Input | void : Input) and returns RemoteResource<Output>.
ResolveOptions transformPageChunk
ResolveOptions has optional transformPageChunk property with signature (input: {html: string; done: boolean}) => MaybePromise<string | undefined>. When done is true, it's the final chunk. Applies custom transforms to HTML. Chunks may not be well-formed HTML but are split at sensible boundaries like %sveltekit.head% or layout/page components.
ResolveOptions filterSerializedResponseHeaders
ResolveOptions has optional filterSerializedResponseHeaders property with signature (name: string, value: string) => boolean. Determines which headers should be included in serialized responses when a load function loads a resource with fetch. By default, no headers are included.
ResolveOptions preload
ResolveOptions has optional preload property with signature (input: {type: 'font' | 'css' | 'js' | 'asset'; path: string}) => boolean. Determines what should be added to the <head> tag to preload it. By default, js and css files will be preloaded.
PrerenderOption type values
PrerenderOption is type boolean | 'auto'.
PrerenderHttpErrorHandler signature
PrerenderHttpErrorHandler has signature (details: {status: number, path: string, referrer: string | null, referenceType: 'linked' | 'fetched', message: string}): void.
PrerenderInvalidUrlHandler signature
PrerenderInvalidUrlHandler has signature (details: {href: string, referrer: string | null, message: string}): void.
PrerenderInvalidUrlHandlerValue type
PrerenderInvalidUrlHandlerValue is type 'fail' | 'warn' | 'ignore' | PrerenderInvalidUrlHandler (function).
PrerenderMissingIdHandler signature
PrerenderMissingIdHandler has signature (details: {path: string, id: string, referrers: string[], message: string}): void.
PrerenderMissingIdHandlerValue type
PrerenderMissingIdHandlerValue is type 'fail' | 'warn' | 'ignore' | PrerenderMissingIdHandler (function).
PrerenderEntryGeneratorMismatchHandler signature
PrerenderEntryGeneratorMismatchHandler has signature (details: {generatedFromId: string, entry: string, matchedId: string, message: string}): void.
PrerenderEntryGeneratorMismatchHandlerValue type
PrerenderEntryGeneratorMismatchHandlerValue is type 'fail' | 'warn' | 'ignore' | PrerenderEntryGeneratorMismatchHandler (function).
PrerenderUnseenRoutesHandler signature
PrerenderUnseenRoutesHandler has signature (details: {routes: string[], message: string}): void.
PrerenderUnseenRoutesHandlerValue type
PrerenderUnseenRoutesHandlerValue is type 'fail' | 'warn' | 'ignore' | PrerenderUnseenRoutesHandler (function).
Prerendered interface structure
Prerendered has properties: pages: Map<string, {file: string}> (path like /foo -> foo.html, /bar/ -> bar/index.html), assets: Map<string, {type: string}> (path -> MIME type), redirects: Map<string, {status: number, location: string}> (redirects encountered during prerendering), paths: string[] (array of prerendered paths without trailing slashes regardless of config).
SvelteKit supports transitional apps with flexible rendering strategies
In a SvelteKit app, you can make granular choices about rendering strategies. You can prerender static pages, use server-side rendering, or serve dynamic data from the browser on a per-page basis. Switching between prerendering and server-side rendering can be done with a single line of code. This approach is called building 'transitional apps'.