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相同的功能,以及“操作”来调用它们。

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

(652)
怎么删除页脚:删除 mailchimp中的页脚
上一篇
Sip服务器:c# sip服务器创建(sip pbx server)
下一篇

相关推荐

  • 小米8usb调试在哪:Verizon称Ellipsis8不支持 USB调试

    关于小米8usb调试在哪的问题,在ellipsis qtaqz3中经常遇到,有没有人得到 Win 7,Verizon Ellipsis 8 与 USB 调试一起工作。-在 Verizon 与 2 个不同的人进行了 2 级支持。尽管他们尝试了,但都没有帮助。1st 指向 Google / Android,并在那里给了我一个支持号码。-Google 说 Verizon 的错误是由于修改 / 定制的操作系统。他们甚至试图指向硬件制造商-Verizon“商店”的家伙做了一些研究,最后说,…

    2022-11-23 08:52:28
    0 59 31
  • Axure中文网:有没有谷歌中文网页字体是免费的

    关于Axure中文网的问题,在webfont free中经常遇到,我需要免费的中文谷歌字体为我的网站。…

    2022-11-23 08:51:48
    0 28 76
  • 超大文件传送:如何使用Dropzone组件拒绝超大文件

    关于超大文件传送的问题,在dropzone reactjs中经常遇到,我使用React-Dropzone的Dropzone组件与 Nextjs 和 TypeScript。…

    2022-11-23 08:43:22
    0 36 83
  • docker游戏服务器:如何使用Docker搭建高性能的游戏服务器

    Docker游戏服务器是一种将游戏服务器部署到容器中的方式,它可以帮助游戏开发者快速、轻松地部署游戏服务器,并且可以更轻松地扩展游戏服务器的容量。…

    2023-04-27 09:55:33
    0 55 53
  • android 视频编码深入理解MediaCodec API

    Android 视频编码是指将原始视频数据经过压缩编码后,生成新的视频数据,以便减少视频文件的体积,提高传输速度,以及更好地在 Android 设备上播放。…

    2023-01-13 10:58:18
    0 34 38
  • javascript数组:排序和搜索

    javascript数组是一种特殊的对象,它可以存储多个值,这些值可以是任何类型的数据。JavaScript数组的元素可以通过索引来访问,数组的索引从0开始,每个元素都有一个索引值。…

    2023-08-28 11:30:24
    0 58 33
  • coremail论客邮箱Coremail论客邮箱

    Coremail论客邮箱是一款专业的企业邮箱服务,可以满足企业对安全、可靠性和高效性的要求。它拥有强大的安全性能,可以提供多种安全保护,包括防止邮件被窃取、拦截恶意邮件、防止跨站脚本攻击等。此外,它还支持多种企业级功能,如组织架构管理、收发邮件管理、文件共享管理、联系人管理等,可以帮助企业提高工作效率,提升企业形象。…

    2023-02-25 04:36:55
    0 49 83
  • linux 编译静态库:```ar cr libtest.a *.o```4. 完成!

    我们要创建一个源文件,比如:mylib.c,内容如下:#include…

    2023-03-19 08:46:39
    0 38 19

发表评论

登录 后才能评论

评论列表(44条)