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

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

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

相关推荐

  • android 视频编码深入理解MediaCodec API

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

    2023-01-13 10:58:18
    0 44 44
  • coremail论客邮箱Coremail论客邮箱

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

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

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

    2023-03-19 08:46:39
    0 66 42
  • canvas下载安装:Unleash the Power of Canvas to Create Amazing Visuals

    Canvas是一种HTML5技术,可以在网页上创建和绘制2D图形。它是一个JavaScript API,可以使用JavaScript代码来绘制图形,并且可以添加各种效果,如阴影,渐变,动画等。…

    2023-03-08 00:48:14
    0 73 18
  • class定位:The Benefits of Using Class Selectors for Element Locati

    示例示例class定位是一种CSS布局技术,用于指定HTML元素的位置,可以使元素放置在页面的任何位置。代码示例:…

    2023-03-06 07:16:44
    0 83 86
  • security code怎么填保护您的数据和隐私

    示例示例code是一种防止自动提交表单的安全措施,通常会在表单中显示一个图片,用户需要输入图片中显示的字符。以下是一个简单的 code代码示例:…

    2023-03-20 09:31:54
    0 75 74
  • css 背景色 透明:Let Your True Colors Shine Through!

    示例示例CSS 背景色透明可以使用 rgba 函数来实现,其中 a 代表 alpha 通道,取值范围为 0-1,0 代表完全透明,代表完全不透明。示例代码:…

    2023-02-13 01:56:46
    0 37 95
  • carlife离线地图下载实现更便捷的出行体验

    CarLife离线地图下载是一种让用户可以在离线状态下使用CarLife地图的方式。它通过将地图数据存储在本地,从而使用户可以在没有网络连接的情况下使用CarLife地图。…

    2023-02-05 10:21:52
    0 87 33

发表评论

登录 后才能评论

评论列表(60条)