SvelteKit 中的 SSR 解释

Question

我最近开始通过 SvelteKit 使用 Svelte，我对这个框架有一些疑问，但我无法在源代码/文档中找到任何直接答案：

1. SvelteKit 有SSR，在文档中它说：

如果您需要从外部 API 请求数据，所有服务器端代码（包括端点）都可以访问 fetch。

• 除了端点之外，服务器端还呈现哪些代码以及它如何决定这一点？svelte 页面脚本中的所有代码都在客户端上运行，还是其中一些代码在服务器上运行？
• 为了在本地使用 SSR，您需要一个适配器，还是 svelte 自己启动服务器？
• 例如，SSR如何在像Netlify这样的生产环境中工作。netlify 适配器是否用于 SSR（在netlify 函数中运行端点）？如果未提供 netlify 适配器，端点将如何/在哪里运行？

2. 如果我想在sveltekit 项目中使用自定义 netlify 函数，需要哪些配置（除了 netlify.toml 和 netlify 适配器）才能让 netlify 识别函数目录中的函数？
3. SSR 和预渲染之间有什么区别？SSR仅用于端点和其他js代码，预渲染用于生成Html并将其发送到客户端，然后将其与编译后的js代码一起发送到浏览器？

谢谢！

Answer 1

默认情况下，当您第一次访问站点时，页面也会在服务器端呈现。当您导航到后续页面时，它们将在客户端呈现。

适配器仅在生产中使用。如果您竞选npm run dev本地开发，您仍然可以获得 SSR。在生产中，SSR 的运行方式取决于您选择的适配器。生产时需要适配器。adapter-node在 Node 服务器上运行 SSR、adapter-netlify在 Netlify 函数中运行 SSR 等。

有关自定义 Netlify 函数的讨论，请参阅此处：https ://github.com/sveltejs/kit/issues/1249

SSR 也用于页面，但预渲染意味着渲染发生在构建时，而不是访问者访问页面时。有关更多信息，请参阅此建议文档：https ://github.com/sveltejs/kit/pull/1525

Answer 2

Pages are SSR when you first visit the site, including all the code in the script tag of your svelte page. However, as you navigate to other pages, the code will be run on the client and the page will be dynamically rendered as Sveltekit makes a single page web app look like it has different pages with the history API.

You can decide which code runs on the server and which runs on the client. If you don't do anything special, Sveltekit and your deployment environment will decide that for you. If you want some code to run only in browser (perhaps it needs to use the window object or need authentication), you can use the browser variable.

import { browser } from '$app/environment';

if (browser) {
  // Code that runs only in browser
} 

You can also put the code in the onMount function, which will be run when the component first mounts, which only happens in browser.

import { onMount } from 'svelte';

onMount(() => {
  // Do stuff
})

If you want SSR, you can put the function in the load function in route/+page.js. One typical use case is for a blog entry that grabs the content from the database and populates and formats the content. If you get to the page from a URL, or refresh page, the code in the load function will be executed on the server. If you navigate to the page from elsewhere in your web app, the code will be run on the client, but it will look like SSR as the UI will refresh only after the load function returns (you won't see loading screen or a blank page). See the official docs for more for more.

import { error } from '@sveltejs/kit';
 
/** @type {import('./$types').PageLoad} */
export function load({ params }) {
  if (params.slug === 'hello-world') {
    return {
      title: 'Hello world!',
      content: 'Welcome to our blog. Lorem ipsum dolor sit amet...'
    };
  }
 
  throw error(404, 'Not found');
}

I am not very sure about how to use Netlify function, as Ben mentions, you can see the discussion on https://github.com/sveltejs/kit/issues/1249. Although I think that you might be able to implement the same functionality with +page.server.js, and the "Actions" to invoke them.