Skip to main content

项目类型

SvelteKit 提供可配置的渲染,允许你以多种不同的方式构建和部署项目。你可以使用 SvelteKit 构建以下所有类型的应用以及更多应用。渲染设置并不相互排斥,你可以选择最佳方式来渲染应用的不同部分。

¥SvelteKit offers configurable rendering, which allows you to build and deploy your project in several different ways. You can build all of the below types of applications and more with SvelteKit. Rendering settings are not mutually exclusive and you may choose the optimal manner with which to render different parts of your application.

如果你没有特定的方式来构建应用,请不要担心!你的应用的构建、部署和渲染方式由你选择的适配器和少量配置控制,这些配置以后可以随时更改。无论你选择哪种项目类型,项目结构routing 都将相同。

¥If you don’t have a particular way you’d like to build your application in mind, don’t worry! The way your application is built, deployed, and rendered is controlled by which adapter you’ve chosen and a small amount of configuration and these can always be changed later. The project structure and routing will be the same regardless of the project type that you choose.

默认渲染(Default rendering)

¥Default rendering

默认情况下,当用户访问网站时,SvelteKit 将使用 服务器端渲染 (SSR) 渲染第一页,使用 客户端渲染 (CSR) 渲染后续页面。使用 SSR 进行初始渲染可改善 SEO 和初始页面加载的感知性能。然后,客户端渲染接管并更新页面,而无需重新渲染通用组件,这通常更快,并且在页面之间导航时不会出现闪烁。使用这种混合渲染方法构建的应用也被称为 过渡应用

¥By default, when a user visits a site, SvelteKit will render the first page with server-side rendering (SSR) and subsequent pages with client-side rendering (CSR). Using SSR for the initial render improves SEO and perceived performance of the initial page load. Client-side rendering then takes over and updates the page without having to rerender common components, which is typically faster and eliminates a flash when navigating between pages. Apps built with this hybrid rendering approach have also been called transitional apps.

静态站点生成(Static site generation)

¥Static site generation

你可以将 SvelteKit 用作 静态站点生成器 (SSG),使用 adapter-static 完全 prerenders 你的网站并进行静态渲染。你还可以使用 预渲染选项 仅预渲染某些页面,然后选择不同的适配器来动态服务器渲染其他页面。

¥You can use SvelteKit as a static site generator (SSG) that fully prerenders your site with static rendering using adapter-static. You may also use the prerender option to prerender only some pages and then choose a different adapter with which to dynamically server-render other pages.

在渲染大量页面时,专门为执行静态站点生成而构建的工具可能会在构建期间更有效地扩展预渲染过程。当处理非常大的静态生成的站点时,你可以使用 如果使用 adapter-vercel,则增量静态再生 (ISR) 避免较长的构建时间。与专门构建的 SSG 相比,SvelteKit 允许在不同的页面上很好地混合和匹配不同的渲染类型。

¥Tools built solely to do static site generation may scale the prerendering process more efficiently during build when rendering a very large number of pages. When working with very large statically generated sites, you can avoid long build times with Incremental Static Regeneration (ISR) if using adapter-vercel. And in contrast to purpose-built SSGs, SvelteKit allows for nicely mixing and matching different rendering types on different pages.

单页应用(Single-page app)

¥Single-page app

单页应用 (SPA) 仅使用 客户端渲染 (CSR)。你可以使用 SvelteKit 进行 构建单页应用 (SPA)。与所有类型的 SvelteKit 应用一样,你可以在 SvelteKit 或 另一种语言或框架 中编写后端。如果你正在构建没有后端或 单独后端 的应用,你可以简单地跳过并忽略文档中讨论 server 文件的部分。

¥Single-page apps (SPAs) exclusively use client-side rendering (CSR). You can build single-page apps (SPAs) with SvelteKit. As with all types of SvelteKit applications, you can write your backend in SvelteKit or another language or framework. If you are building an application with no backend or a separate backend, you can simply skip over and ignore the parts of the docs talking about server files.

多页应用(Multi-page app)

¥Multi-page app

SvelteKit 通常不用于构建 传统多页应用。但是,在 SvelteKit 中,你可以使用 csr = false 删除页面上的所有 JavaScript,这将在服务器上渲染后续链接,或者你可以使用 data-sveltekit-reload 在服务器上渲染特定链接。

¥SvelteKit isn’t typically used to build traditional multi-page apps. However, in SvelteKit you can remove all JavaScript on a page with csr = false, which will render subsequent links on the server, or you can use data-sveltekit-reload to render specific links on the server.

独立后端(Separate backend)

¥Separate backend

如果你的后端是用另一种语言编写的,例如 Go、Java、PHP、Ruby、Rust 或 C#,则有几种方法可以部署你的应用。最推荐的方法是使用 adapter-node 或无服务器适配器将你的 SvelteKit 前端与后端分开部署。有些用户不喜欢有单独的流程来管理,并决定将他们的应用部署为由后端服务器提供服务的 单页应用 (SPA),但请注意,单页应用的 SEO 和性能特性较差。

¥If your backend is written in another language such as Go, Java, PHP, Ruby, Rust, or C#, there are a couple of ways that you can deploy your application. The most recommended way would be to deploy your SvelteKit frontend separately from your backend utilizing adapter-node or a serverless adapter. Some users prefer not to have a separate process to manage and decide to deploy their application as a single-page app (SPA) served by their backend server, but note that single-page apps have worse SEO and performance characteristics.

如果你使用的是外部后端,你可以简单地跳过并忽略文档中讨论 server 文件的部分。你可能还想参考 有关如何调用单独后端的常见问题解答

¥If you are using an external backend, you can simply skip over and ignore the parts of the docs talking about server files. You may also want to reference the FAQ about how to make calls to a separate backend.

无服务器应用(Serverless app)

¥Serverless app

SvelteKit 应用在无服务器平台上运行简单。默认零配置适配器 将自动在许多受支持的平台上运行你的应用,或者你可以使用 adapter-verceladapter-netlifyadapter-cloudflare 提供特定于平台的配置。并且 社区适配器 允许你将应用部署到几乎任何无服务器环境。其中一些适配器(例如 adapter-verceladapter-netlify)提供 edge 选项,以支持 边缘渲染 以改善延迟。

¥SvelteKit apps are simple to run on serverless platforms. The default zero config adapter will automatically run your app on a number of supported platforms or you can use adapter-vercel, adapter-netlify, or adapter-cloudflare to provide platform-specific configuration. And community adapters allow you to deploy your application to almost any serverless environment. Some of these adapters such as adapter-vercel and adapter-netlify offer an edge option, to support edge rendering for improved latency.

你自己的服务器(Your own server)

¥Your own server

你可以使用 adapter-node 部署到你自己的服务器或 VPS。

¥You can deploy to your own server or VPS using adapter-node.

容器(Container)

¥Container

你可以使用 adapter-node 在 Docker 或 LXC 等容器内运行 SvelteKit 应用。

¥You can use adapter-node to run a SvelteKit app within a container such as Docker or LXC.

库(Library)

¥Library

你可以在运行 sv create 时选择库选项,使用 SvelteKit 的 @sveltejs/package 插件创建一个库,供其他 Svelte 应用使用。

¥You can create a library to be used by other Svelte apps with the @sveltejs/package add-on to SvelteKit by choosing the library option when running sv create.

离线应用(Offline app)

¥Offline app

SvelteKit 完全支持 服务工作者,允许你构建多种类型的应用,例如离线应用和 渐进式 Web 应用

¥SvelteKit has full suppport for service workers allowing you to build many types of applications such as offline apps and progressive web apps.

移动应用(Mobile app)

¥Mobile app

你可以使用 TauriCapacitorSvelteKit SPA 变成移动应用。相机、地理位置和推送通知等移动功能可通过两个平台的插件使用。

¥You can turn a SvelteKit SPA into a mobile app with Tauri or Capacitor. Mobile features like the camera, geolocation, and push notifications are available via plugins for both platforms.

这些移动开发平台的工作原理是启动本地 Web 服务器,然后像手机上的静态主机一样为你的应用提供服务。你可能会发现 bundleStrategy: 'single' 是一个有用的选项,可以限制发出的请求数量。例如在撰写本文时,Capacitor 本地服务器使用 HTTP/1,这限制了并发连接的数量。

¥These mobile development platforms work by starting a local web server and then serving your application like a static host on your phone. You may find bundleStrategy: 'single' to be a helpful option to limit the number of requests made. E.g. at the time of writing, the Capacitor local server uses HTTP/1, which limits the number of concurrent connections.

桌面应用(Desktop app)

¥Desktop app

你可以使用 TauriWailsElectronSvelteKit SPA 变成桌面应用。

¥You can turn a SvelteKit SPA into a desktop app with Tauri, Wails, or Electron.

浏览器扩展(Browser extension)

¥Browser extension

你可以使用专门针对浏览器扩展的 adapter-static社区适配器 构建浏览器扩展。

¥You can build browser extensions using either adapter-static or community adapters specifically tailored towards browser extensions.

嵌入式设备(Embedded device)

¥Embedded device

由于其高效的渲染,Svelte 可以在低功耗设备上运行。嵌入式设备(如微控制器和电视)可能会限制并发连接数。为了减少并发请求的数量,你可能会发现 bundleStrategy: 'single' 是此部署配置中的一个有用选项。

¥Because of its efficient rendering, Svelte can be run on low power devices. Embedded devices like microcontrollers and TVs may limit the number of concurrent connections. In order to reduce the number of concurrent requests, you may find bundleStrategy: 'single' to be a helpful option in this deployment configuration.

上一页 下一页