单页应用

你可以通过指定回退页面将 SvelteKit 应用转变为完全客户端渲染的单页应用 (SPA)。此页面将用于任何无法通过其他方式（例如返回预渲染页面）提供的 URL。

¥You can turn a SvelteKit app into a fully client-rendered single-page app (SPA) by specifying a fallback page. This page will be served for any URLs that can’t be served by other means such as returning a prerendered page.

SPA 模式会强制进行多次网络往返（首先是空白 HTML 文档，然后是 JavaScript，最后是页面所需的任何数据），从而对性能造成很大的负面影响。除非你从本地网络为应用提供服务（例如，封装了本地服务的 SPA 的移动应用），否则这会延迟启动，尤其是在考虑到移动设备的延迟的情况下。它还会损害 SEO，因为它经常会导致网站因性能问题排名下降（SPA 更容易失败 Core Web Vitals），排除不渲染 JS 的搜索引擎，并导致你的网站无法从渲染 JS 的搜索引擎获得更新频率。最后，如果 JavaScript 失败或被禁用（这种情况会发生 more often than you probably think），它会使你的应用无法被用户访问。

在使用 SPA 模式（尤其是你的主页）时，你可以通过尽可能多地 prerendering 页面来避免这些缺点。如果你可以预渲染所有页面，则可以直接使用 static site generation 而不是 SPA。否则，你应该强烈建议使用支持服务器端渲染的适配器。SvelteKit 已正式支持各种提供商的适配器，并提供慷慨的免费套餐。

用法(Usage)

¥Usage

首先，为你不想预渲染的页面禁用服务器端渲染 (SSR)。这些页面将通过回退页面提供。例如要默认通过 fallback 服务所有页面，你可以更新根布局，如下所示。你应该尽可能使用 重新选择预渲染单个页面和目录。

¥First, disable SSR for the pages you don’t want to prerender. These pages will be served via the fallback page. E.g. to serve all pages via the fallback by default, you can update the root layout as shown below. You should opt back into prerendering individual pages and directories where possible.

export const const ssr: falsessr = false;

如果你没有任何服务器端逻辑（即 +page.server.js、+layout.server.js 或 +server.js 文件），则可以使用 adapter-static 创建 SPA。使用 npm i -D @sveltejs/adapter-static 安装 adapter-static，并使用 fallback 选项将其添加到你的 svelte.config.js 中：

¥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. Install adapter-static with npm i -D @sveltejs/adapter-static and add it to your svelte.config.js with the fallback option:

import import adapteradapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const 
const config: {
    kit: {
        adapter: any;
    };
}
@type{import('@sveltejs/kit').Config}config = {
	
kit: {
    adapter: any;
}kit: {
		adapter: anyadapter: import adapteradapter({
			fallback: stringfallback: '200.html' // may differ from host to host
		})
	}
};

export default 
const config: {
    kit: {
        adapter: any;
    };
}
@type{import('@sveltejs/kit').Config}config;

fallback 页面是 SvelteKit 从你的页面模板（例如 app.html）创建的 HTML 页面，可加载你的应用并导航到正确的路由。例如，Surge 是一个静态 Web 主机，它允许你添加一个 200.html 文件，该文件将处理任何不对应于静态资源或预渲染页面的请求。

¥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.

在某些主机上，情况可能完全不同 - 请查阅你平台的文档。我们建议尽可能避免使用 index.html，因为它可能与预渲染冲突。

¥On some hosts it may be something else entirely — consult your platform’s documentation. We recommend avoiding index.html if possible as it may conflict with prerendering.

请注意，无论 paths.relative 的值是什么，回退页面始终包含绝对资源路径（即以 / 而不是 . 开头），因为它用于响应任意路径的请求。

预渲染单个页面(Prerendering individual pages)

¥Prerendering individual pages

如果你希望某些页面被预渲染，你可以为应用的这些部分重新启用 ssr 和 prerender：

¥If you want certain pages to be prerendered, you can re-enable ssr alongside prerender for just those parts of your app:

export const const prerender: trueprerender = true;
export const const ssr: truessr = true;

你不需要 Node 服务器或能够运行 JavaScript 的服务器来部署此页面。它只会在构建项目时对页面进行服务器渲染，以便输出可从任何静态 Web 主机提供的 .html 页面。

¥You won’t need a Node server or server capable of running JavaScript to deploy this page. It will only server render your page while building your project for the purposes of outputting an .html page that can be served from any static web host.

Apache

要在 Apache 上运行 SPA，你应该添加一个 static/.htaccess 文件以将请求路由到后备页面：

¥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>