Ssr怎么用:SSR在 SvelteKit中解释

我最近开始通过 SvelteKit 使用 Svelte,我对这个框架有几个问题,我无法在源 / 文档中找到任何直接的答案:

SvelteKit 有SSR,并在文档中说:

所有服务器端代码(包括端点)都可以访问获取,以防您需要从外部 API 请求数据。

什么代码是服务器端渲染除了端点,它是如何决定的?来自 svelte 页面的脚本的所有代码在客户端上运行,或者其中一些在服务器上运行?

为了在本地使用SSR,您需要一个适配器,或者 svelte 自己启动服务器?

SSR如何在生产环境中工作,例如Netlify。netlify 适配器是否用于 SSR(在netlify 函数中运行端点)?如果未提供 netlify 适配器,端点将如何运行?

如果我想在sveltekit 项目中使用自定义 netlify 函数,需要什么配置(除了 netlify.toml 和 netlify 适配器),以便netlify 从函数目录中识别函数

SSR 和预渲染之间的区别是什么?SSR仅用于端点和其他 js 代码,预渲染用于生成Html以将其发送到客户端,然后将其水合,并将编译的 js 代码发送到

谢谢

14

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

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

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

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

1

当您第一次访问网站时,页面是 SSR,包括您的 svelte 页面的script标记中的所有代码。但是,当您导航到其他页面时,代码将在客户端上运行,并且页面将动态呈现,因为 Sveltekit 使单个页面 Web 应用程序看起来像它具有与历史 API 不同的页面。

您可以决定哪些代码在服务器上运行,哪些在客户端上运行。如果您没有做任何特别的事情,Sveltekit 和您的部署环境将为您决定。如果您希望某些代码仅在浏览器中运行 (也许它需要使用window对象或需要身份验证),则可以使用 browser 变量。

import { browser } from '$app/env';
if (browser) {
  // Code that runs only in browser
} 

您还可以将代码放在onMount函数中,该函数将在组件首次挂载时运行,这仅在浏览器中发生。

import { onMount } from 'svelte';
onMount(() => {
  // Do stuff
})

如果你想要 SSR,你可以把函数放在route/+page.js中的加载函数中。一个典型的用例是从数据库中抓取内容并填充和格式化内容的博客条目。如果你从一个 URL 到达页面,或者刷新页面,加载函数中的代码将在服务器上执行。如果你从你的 web 应用程序的其他地方导航到页面

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');
}

我不太确定如何使用 Netlify 函数,正如 Ben 提到的,你可以看到https://github.com/sveltejs/kit/issues/1249的讨论。虽然我认为你可能能够实现与+page.server.js相同的功能,以及“操作”来调用它们。

本站系公益性非盈利分享网址,本文来自用户投稿,不代表边看边学立场,如若转载,请注明出处

(989)
Can负载率:自适应检索CAN通道的sysVar总线负载
上一篇
Cuda8.0安装教程:CUDA+ OpenGl教程
下一篇

相关推荐

  • 声屏障安装:Qt同步屏障(barrier barrier fruit)

    关于声屏障安装的问题,在barrier barrier fruit中经常遇到,是否有一个 Qt 等效于同步屏障?第一个 N-1 调用者到wait块和第 N 个调用者到wait导致它们全部释放的类型。…

    2024-01-10 08:33:35
    0 40 49
  • 怎么查看端口被哪个程序占用:RabbitMQ崩溃说端口被占用

    关于怎么查看端口被哪个程序占用的问题,在network port occupied can't start server中经常遇到,我试图第一次打开 RabbitMQ,所以我可以使用芹菜。我试图以管理员身份运行 'rabbitmq-server' 文件,但是每次按 run 时弹出这个错误。我看到另一个 stackOverflow 帖子有同样的问题,但是唯一的评论建议我杀死端口发生的事情。…

    2023-10-27 02:04:27
    0 91 75
  • 群晖sso服务器:JIRAoauth与人群SSO服务器

    关于群晖sso服务器的问题,在jira sso中经常遇到,我正在帮助客户端将 OAuth 用于链接到人群用户 DB 的 JIRA。每当用户尝试针对 JIRA 授权端点进行 oauth 时,它们都会重定向到其仪表板。…

    2024-01-12 08:00:41
    0 79 58
  • Url转发:删除URL转发-Freenom

    关于Url转发的问题,在feeenom中经常遇到,不小心我在 freenom 中制作了 url forward。现在我无法禁用它。它说“留空禁用”,但是当我将其留空时,有错误,我必须指定 URL 或 nameserver。任何帮助?试图在 google 上查找,但我没有找到它。…

    2023-12-25 05:26:18
    0 18 23
  • 刑事诉讼法属于程序法:整数除法属性(properties of integers)

    关于刑事诉讼法属于程序法的问题,在properties of integers中经常遇到,下面的整数算术属性成立吗?…

    2023-10-25 12:32:22
    0 16 20
  • 立法程序五个步骤:Twitter引导程序中的五个相等列

    关于立法程序五个步骤的问题,在5 times 5 equals中经常遇到,我想在我正在构建的页面上有 5 个相等的列,我似乎无法理解这里如何使用 5 列网格:http://web.archive.org/web/20120416024539/http://domain7.com/mobile/tools/bootstrap/responsive…

    2024-02-20 09:16:05
    0 53 42
  • 3 tube:从给定的 3d点阵列绘制管(3d tube drawing)

    关于3 tube的问题,在3d tube drawing中经常遇到,我想使用 three.js 在给定的点数组之间绘制一些直管。我尝试使用 threejs 中的paint示例在两点之间绘制管。到目前为止,我已经完成了this。但正如你所看到的,在我应用矩阵后,管子会扭曲。…

    2024-01-01 05:34:11
    0 23 73
  • 国寿视通小程序:小波作为带通还是高通 (high band pass filter)

    关于国寿视通小程序的问题,在high band pass filter中经常遇到,我对小波感到困惑。我知道小波变换只是以中心频率为中心的带通滤波器。但是,在 PyWaveletshttps://pywavelets.readthedocs.io/en/latest/index.html中,小波变换被实现为滤波器组,可以将信号分为低分量和高分量。所以我的问题是:在http://wavelets.pybytes.com/wavelet/bior6.8/上列出的小波如何在这个游戏中发挥作用?…

    2024-02-11 11:24:38
    0 17 73

发表评论

登录 后才能评论

评论列表(58条)