Build and deploy
Single-page apps
Edit this page on GitHubYou can turn any SvelteKit app, using any adapter, into a fully client-rendered single-page app (SPA) by disabling SSR at the root layout:
ts
export constssr = false;
ts
export constssr = false;
SPA mode is highly discouraged: it destroys performance by forcing two network round trips before rendering can begin; harms SEO by downranking your page which is likely to fail core web vitals, excluding search engines that don't render JS, and causing your site to receive less frequent updates from those that do; and, finally, it makes your app inaccessible to users if JavaScript fails or is disabled (which happens more often than you probably think).
You can avoid these drawbacks on a given page by prerendering it. You should thus prerender as many pages as possible when using SPA mode — especially your homepage. If you can prerender all pages, you can simply use static site generation rather than a SPA. If you cannot, you should strongly consider using a different adapter.
If you don't have any server-side logic (i.e. +page.server.js
, +layout.server.js
or +server.js
files) you can use adapter-static
to create your SPA by adding a fallback page.
Usagepermalink
Install with npm i -D @sveltejs/adapter-static
, then add the adapter to your svelte.config.js
with the following options:
ts
importCannot find module '@sveltejs/adapter-static' or its corresponding type declarations.2307Cannot find module '@sveltejs/adapter-static' or its corresponding type declarations.adapter from'@sveltejs/adapter-static' ;export default {kit : {adapter :adapter ({fallback : '200.html' // may differ from host to host})}};
The fallback
page is an HTML page created by SvelteKit from your page template (e.g. app.html
) that loads your app and navigates to the correct route. For example Surge, a static web host, lets you add a 200.html
file that will handle any requests that don't correspond to static assets or prerendered pages.
On some hosts it may be index.html
or something else entirely — consult your platform's documentation.
Note that the fallback page will always contain absolute asset paths (i.e. beginning with
/
rather than.
) regardless of the value ofpaths.relative
, since it is used to respond to requests for arbitrary paths.
Prerendering individual pagespermalink
If you want certain pages to be prerendered, you can re-enable ssr
alongside prerender
for just those parts of your app:
ts
export constprerender = true;export constssr = true;
ts
export constprerender = true;export constssr = true;
Apachepermalink
To run an SPA on Apache, you should add a static/.htaccess
file to route requests to the fallback page:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^200\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /200.html [L]
</IfModule>