SvelteKit:构建高性能SSR应用的新框架

news/2024/7/25 21:17:45/文章来源:https://blog.csdn.net/A1215383843/article/details/139217655

SvelteKit 是基于 Svelte 的下一代框架,用于构建服务器端渲染(SSR)和静态站点生成(SSG)的应用。Svelte 是一个轻量级的前端框架,以其极高的性能和简洁的代码著称。SvelteKit 扩展了 Svelte 的能力,提供了完整的开发流程,包括路由、数据获取、API 调用和服务器端渲染等功能。

Svelte 组件:

SvelteKit 应用的基础是 Svelte 组件,它们是可复用的 UI 块。一个简单的 Svelte 组件如下所示:

文件结构:

一个 Svelte 组件文件通常包含三个主要部分,用三个不同的区块来区分:

  • <script> 标签:用于定义组件的状态、逻辑和导入其他模块。
  • <style> 标签:用于定义组件的样式,这部分样式是私有的,不会影响到其他组件。
  • HTML 或 Svelte 语法:用于定义组件的模板,即组件实际渲染的内容。

例如,一个简单的 Svelte 组件 Hello.svelte 可能看起来像这样:

<script>// 定义组件的内部状态let name = 'World';// 可以导出变量作为组件的属性export let greeting = 'Hello';
</script><!-- HTML/Svelte 模板 -->
<h1>{greeting}, {name}!</h1><style>/* 组件的私有样式 */h1 {color: blue;}
</style>
声明响应式变量:

<script> 标签中,你可以声明变量,Svelte 会自动跟踪这些变量的更改,并在它们发生变化时更新视图。例如,上面的 name 和 greeting 变量都是响应式的。

导出属性(Props):

使用 export 关键字,你可以将变量暴露为组件的属性,这样在父组件中使用该组件时,可以传入值。在上面的例子中,greeting 就是一个可导出的属性。

计算属性和方法:

Svelte 允许在 <script> 标签中定义计算属性和方法,这些可以基于其他响应式变量进行计算。例如:

<script>let count = 0;let doubledCount = computed(() => count * 2);function increment() {count += 1;}
</script><button on:click={increment}>{count} or {doubledCount}</button>
条件渲染和循环:

Svelte 支持条件渲染(if 和 else)以及循环(each)来动态地决定哪些内容应该被渲染。例如:

{#if showing}<p>Visible content</p>
{:else}<p>Hidden content</p>
{/if}{#each items as item}<div>{item.name}</div>
{/each}
事件处理:

Svelte 使用 on: 前缀来监听和处理DOM事件。例如,监听点击事件:

<button on:click={handleClick}>Click me</button>
自定义指令:

Svelte 提供了自定义指令(如 bind: 和 use:),它们可以扩展组件的行为。例如,bind: 可以用来双向绑定组件属性和DOM元素的值。

生命周期钩子:

虽然Svelte不像某些框架那样有明确的生命周期钩子,但它有 onMount、beforeUpdate 和 onDestroy 函数,可以在组件特定的时刻执行代码。

<script>import { onMount } from 'svelte';let mounted = false;onMount(() => {console.log('Component has been mounted');mounted = true;});function cleanup() {console.log('Component is being destroyed');}// 在组件销毁前调用onDestroy(cleanup);
</script>

路由:

1. 路由结构:

SvelteKit 的路由结构与文件系统的目录结构紧密关联。在 src/routes 目录下,每个目录和文件对应一个路由。例如:

  • src/routes/index.svelte 对应应用的主页面。
  • src/routes/blog/[slug].svelte 对应博客文章页面,其中 [slug] 是动态参数。
2. 静态路由:

静态路由是固定的URL,对应一个Svelte组件。例如,src/routes/about.svelte 将匹配 /about 路径。

3. 动态路由:

动态路由允许你捕获URL中的部分,并将其作为参数传递给组件。动态参数用方括号表示,例如 [id]。在上面的博客示例中,[slug] 将捕获URL中的字符串,如 /blog/my-first-post,并将 my-first-post 作为 slug 参数传递给组件。

load 函数:

每个路由组件可以有一个 load 函数,用于在服务器端或客户端获取数据。这个函数返回一个Promise,其结果将作为组件的 props。例如:

<script context="module">export async function load({ params }) {const response = await fetch(`/api/posts/${params.slug}`);const post = await response.json();return { props: { post } };}
</script><script>export let post;
</script><h1>{post.title}</h1>
<p>{post.content}</p>
4. API 路由:

SvelteKit 也支持创建API端点。在 src/routes 目录下创建一个 .js 或 .ts 文件,而不是 .svelte 文件,SvelteKit 将处理HTTP请求。例如,src/routes/api/posts.js 可以处理 /api/posts 路径的请求。

export async function get({ params }) {const response = await fetch(`https://api.example.com/posts/${params.id}`);return {body: await response.json(),};
}
5. 中间件:

SvelteKit 允许在 src/routes 下创建中间件文件,如 _middleware.js,来处理所有路由请求。中间件可以用来执行通用逻辑,如认证、日志记录或缓存控制。

export async function handle({ request, resolve }) {// 中间件逻辑const token = request.headers.get('Authorization');if (validateToken(token)) {return resolve(request);} else {throw new Error('Unauthorized');}
}
6. 路由导航:

在 SvelteKit 应用中,你可以使用 goto 函数进行客户端导航,或者在 <a> 标签上使用 use:link 动作来创建链接。

<script>import { goto } from '$app/navigation';
</script><button on:click={() => goto('/about')}>Go to About Page
</button><a href="/about" use:link>Go to About Page</a>
7. 路由参数和查询字符串:

在 goto 函数中,你可以传递路由参数和查询字符串:

<script>import { goto } from '$app/navigation';
</script><button on:click={() => goto('/blog/some-post', { id: 123 })}>View Post
</button>

数据获取:

SvelteKit 提供了简单而灵活的数据获取机制,允许你在组件的生命周期中获取和处理数据。这主要通过 load 函数实现,它可以用于服务器端渲染(SSR)、客户端初始化以及导航时的数据获取。以下是 load 函数的工作原理和使用方法:

1. load 函数:

在 SvelteKit 的路由组件中,你可以定义一个 load 函数,它在页面加载时运行,通常用于获取数据。load 函数返回一个Promise,其结果将作为组件的 props 传递给组件。

<script context="module">// Server-side codeexport async function load({ page, session }) {// 获取数据,例如从APIconst response = await fetch('https://api.example.com/data');const data = await response.json();// 返回propsreturn { props: { data } };}
</script><script>// Client-side codeexport let data;
</script><ul>{#each data as item}<li>{item.name}</li>{/each}
</ul>
2. load 函数的参数:
  • page 对象包含有关当前路由的信息,如 page.params(用于动态路由的参数)和 page.query(查询字符串参数)。
  • session 对象可用于存储和访问用户的会话信息,如果启用了身份验证。
3. 分离的客户端和服务器端逻辑:

load 函数可以返回一个对象,其中包含 clientserver 属性,以便为客户端和服务器端提供不同的数据获取逻辑。

<script context="module">export async function load({ page, session }) {let data;if (import.meta.env.SSR) {// 服务器端逻辑// ...} else {// 客户端逻辑// ...}return { props: { data } };}
</script>
4. 缓存和重定向:

load 函数还可以返回 statusheadersredirect 属性,用于控制HTTP响应。例如,你可以设置状态码、添加HTTP头或重定向到另一个URL。

export async function load({ page }) {const response = await fetch('https://api.example.com/data');if (response.status === 401) {return {status: 401,redirect: '/login',};}const data = await response.json();return { props: { data } };
}
5. 客户端数据更新:

除了在组件首次加载时获取数据,load 函数也可以在导航或组件更新时重新运行,以便动态更新数据。这可以通过 load 函数的 page 参数中的 changed 属性实现。

export async function load({ page }) {if (page.changed.query) {// 查询字符串参数已更改,重新获取数据}// ...
}

服务器端渲染(SSR):

SvelteKit 默认支持 SSR,这意味着在首次加载时,页面是完整的 HTML,提高了SEO和首屏加载速度。在服务器端,load 函数会执行,然后返回的数据会被渲染成 HTML。

静态站点生成(SSG):

SvelteKit 也支持 SSG,可以预渲染静态HTML页面。在生产环境中,使用 svelte-kit build 命令,SvelteKit 会生成一个静态站点,可以部署到任何静态托管服务。

API 路由:

除了页面路由,SvelteKit 还支持 API 路由。在 src/routes 目录下创建 .js 或 .ts 文件,它们将处理 API 请求。例如,src/routes/api/data.js 可以处理 /api/data 路径的请求。

export async function get(request) {const response = await fetch('https://api.example.com/data');return {body: await response.json(),};
}

身份验证和中间件:

SvelteKit 允许在 src/lib 目录下编写可复用的中间件,这些中间件可以在请求生命周期的不同阶段运行。例如,你可以创建一个身份验证中间件:

// src/lib/auth.js
export function authenticate(req, res, next) {const token = req.headers.authorization || '';if (validateToken(token)) {next();} else {res.status(401).end();}
}

然后在 src/routes/_middleware.js 中使用它:

import { authenticate } from '../lib/auth.js';export function handle({ request, resolve }) {authenticate(request);return resolve(request);
}

部署和配置:

SvelteKit 提供了一种灵活的部署方式,可以部署到 Vercel、Netlify、AWS Amplify 等平台。通过 adapter 配置,你可以选择适合的部署目标。

// svelte.config.js
import adapter from '@sveltejs/adapter-node';export default {kit: {adapter: adapter(),},
};

页面过渡(Page Transitions)

SvelteKit 提供了简洁的页面过渡效果支持,让你可以在用户导航时添加平滑的视觉过渡。这通过在 <svelte:head> 标签内使用 <transition><route> 组件实现。

<svelte:head><script>import { crossfade } from 'svelte/transition';export let data;export let component;let transition;$: transition = component ? crossfade : null;</script>{#if transition}<transitionbind:this={transition}duration={300}outDuration={200}in={component !== data.component}out={component === data.component}><slot /></transition>{:else}<slot />{/if}
</svelte:head>

这段代码定义了一个页面过渡效果,使用了 crossfade 过渡动画,当页面组件改变时,它会在两个页面之间平滑地淡入淡出。

客户端路由和导航

SvelteKit 使用 goto 函数来进行客户端导航。在组件内部,你可以直接使用 $navigate 存储来改变当前路径,或者使用<a>标签结合 use:link 动作来创建导航链接。

<script>import { navigate } from '$app/navigation';function handleClick() {navigate('/another-page');}
</script><button on:click={handleClick}>Go to Another Page</button><!-- 或者使用a标签 -->
<a href="/another-page" use:link>Another Page</a>

适配器(Adapters)

SvelteKit 提供了适配器的概念,使得应用可以轻松部署到不同的平台。适配器是一组配置和脚本,用于将你的应用打包成特定平台所需的格式。例如,使用 @sveltejs/adapter-node 部署到Node.js服务器,或使用 @sveltejs/adapter-static 生成纯静态网站。

服务工作者(Service Workers)和离线支持

SvelteKit 支持通过 @sveltejs/adapter-workbox 适配器轻松地添加PWA(Progressive Web App)功能,包括离线支持和服务工作者。这允许你的应用在无网络连接的情况下也能提供基本功能。

静态资产处理

SvelteKit 自动处理静态资产,如图片、CSS 和 JavaScript 文件。你只需将这些文件放在 static 目录下,SvelteKit 就会在构建时正确地复制和引用它们。例如,放置在 static/images/logo.png 的图片可以通过 /images/logo.png 访问。

环境变量和配置

SvelteKit 支持环境变量,允许你根据不同的环境(如开发、生产)配置应用。你可以通过 .env 文件或在 svelte.config.js 中直接定义环境变量,然后在应用中通过 import.meta.env 访问它们。

// svelte.config.js
export default {kit: {vite: {define: {'process.env.API_KEY': process.env.API_KEY,},},},
};
svelte
<script>console.log(import.meta.env.VITE_API_KEY);
</script>

类型安全与TypeScript支持

SvelteKit 全面支持 TypeScript,可以为你的应用提供类型安全。只需将 .svelte 文件改为 .svelte.ts,并在项目中配置 TypeScript,就可以享受类型提示和错误检查的好处。

SvelteKit 不仅为开发者提供了构建高性能SSR应用的工具,还兼顾了开发体验、灵活性和易用性,是现代Web开发的强大选择。

2500G计算机入门到高级架构师开发资料超级大礼包免费送!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_1052160.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

服务器软件架构演进

服务器软件架构演进 背景介绍阶段一&#xff1a;单机部署阶段二&#xff1a;应用与数据分离部署阶段三&#xff1a;启用缓存优化阶段四&#xff1a;启用应用服务器集群阶段五&#xff1a;数据库读写分离阶段六&#xff1a;启用反向代理及CDN加速阶段七&#xff1a;启用分布式文…

探索亚马逊云科技技术课程:大模型平台与提示工程的应用与优化

上方图片源自亚马逊云科技【生成式 AI 精英速成计划】技术开发技能课程 前言 学习了亚马逊云科技–技术开发技能课程 本课程分为三个部分&#xff0c;了解如何使用大模型平台、如何训练与部署大模型及生成式AI产品应用与开发&#xff0c;了解各类服务的优势、功能、典型使用案…

【简单介绍下容器是什么?】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…

专为汽车内容打造的智能剪辑解决方案

汽车内容创作已成为越来越多车主和汽车爱好者热衷的活动。然而&#xff0c;如何高效、便捷地将行车途中的精彩瞬间转化为高质量的视频作品&#xff0c;一直是困扰着广大用户的一大难题。美摄科技凭借其深厚的视频处理技术和智能分析能力&#xff0c;推出了专为汽车内容记录而生…

斯洛文尼亚普利雅玛城堡:吉尼斯世界纪录认证的世界最大溶洞城堡

除了著名的波斯托伊纳溶洞&#xff08;Postojna Cave&#xff09;&#xff0c;普利雅玛城堡&#xff08;Predjama Castle&#xff09;也是波斯托伊纳洞穴公园&#xff08;Postojna Cave Park&#xff09;不容错过的景点之一。这座城堡坐落在斯洛文尼亚&#xff08;Slovenia&…

Java入门基础学习笔记47——ArrayList

什么是集合呢&#xff1f; 集合是一种容器&#xff0c;用来装数据的&#xff0c;类似数组。 有数组&#xff0c;为什么还要学习集合呢&#xff1f; 数组定义完成并启动后&#xff0c;长度就固定了。 而集合是大小可变&#xff0c;开发中用的最多的。 集合的特点&#xff1a;大…

基于docxtpl的模板生成Word

docxtpl是一个用于生成Microsoft Word文档的模板引擎库。它结合了docx模块和Jinja2模板引擎&#xff0c;使用户能够使用Microsoft Word模板文件并在其中填充动态数据。这个库提供了一种方便的方式来生成个性化的Word文档&#xff0c;并支持条件语句、循环语句和变量等控制结构&…

从零开始构建 Vision Transformer(ViT) 模型

Transformer 模型最早由 Vaswani 等人在 2017 年论文 Attention Is All You Need 中提出&#xff0c;并已广泛应用于自然语言处理。 2021年&#xff0c;Dosovitsky 等人在论文An Image is Worth 16x16 Words: Transformers for Image Recognition at Scale中提出将 Transforme…

PyQt5-新手避坑指南(持续更新)

文章目录 一&#xff0e;前言二&#xff0e;开发环境三&#xff0e;坑1.程序没有详细报错就退出了2.qrc资源文件的使用3.QLabel文字自动换行4.图片自适应大小5.checkbox自定义样式后✓不见了6.多线程 四&#xff0e;记录 一&#xff0e;前言 本篇博客整理了一些初学者容易犯的…

211大学计算机专业不考408,新增的交叉专业却考408!南京农业大学计算机考研考情分析!

南京农业大学信息科技学院可追溯至1981年成立的计算中心和1985年筹建的农业图书情报专业。1987年设立了农业图书情报系&#xff0c;1993 年农业图书情报系更名为信息管理系&#xff0c;本科专业名称也于1999年更名为信息管理与信息系统专业。1994年计算中心开始招收计算机应用专…

YOLOv10来了

B站&#xff1a;啥都会一点的研究生公众号&#xff1a;啥都会一点的研究生 前言 YOLOv10 由清华大学研究人员在 Ultralytics版基础上进行进一步开发&#xff0c;引入了一种新的实时目标检测方法&#xff0c;解决了以前版本 YOLO 在后处理和模型架构方面的不足。通过消除非最大…

英码科技算能系列边缘计算盒子再添新成员!搭载TPU处理器BM1688CV186AH,功耗更低、接口更丰富

在数据呈现指数级增长的今天&#xff0c;越来越多的领域和细分场景对实时、高效的数据处理和分析的需求日益增长&#xff0c;对智能算力的需求也不断增强。为应对新的市场趋势&#xff0c;英码科技凭借自身的硬件研发优势&#xff0c;携手算能相继推出了基于BM1684的边缘计算盒…

探索循环逻辑:for逻辑分支与容器遍历的深度剖析

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、引言&#xff1a;for逻辑与循环体的奥秘 二、for逻辑与循环体的结合使用 1. 函数与循环…

数字水印 | 离散余弦变换 DCT 基本原理及 Python 代码实现

目录 1 基本原理2 代码实现3 图像压缩 1 基本原理 参考博客&#xff1a;https://www.cnblogs.com/zxporz/p/16072580.html D C T \mathsf{DCT} DCT 全称为 D i s c r e t e C o s i n e T r a n s f o r m \mathsf{Discrete\ Cosine\ Transform} Discrete Cosine Transfo…

Git远程控制

文章目录 1. 创建仓库1.1 Readme1.2 Issue1.3 Pull request 2. 远程仓库克隆3. 推送远程仓库4. 拉取远程仓库5. 配置Git.gitignore配置别名 使用GitHub可以&#xff0c;采用Gitee也行 1. 创建仓库 1.1 Readme Readme文件相当于这个仓库的说明书&#xff0c;gitee会初始化2两份…

字符串的周期:每一期都有那么几位

【题目描述】 如果一个字符串可以由某个长度为k的字符串重复多次得到,则称该串以k为周期。例 如,abcabcabcabc以3为周期(注意,它也以6和12为周期)。 输入一个长度不超过80的字符串(不含空格),输出其最小周期。 输入第一行表示有T组数据,后续是T行字符串。输出的每组…

打印机里失败的任务删不掉的解决办法 斑马打印机更新电脑驱动和升级打印机固件 提示ribbon out 并黄状态亮+黄供应闪

强删打印任务 WinR services.msc 停止服务 Print spooler C:\Windows\System32\spool\PRINTERS 清空文件夹下所有文件 详细 要删除打印机里失败的任务&#xff0c;可以按照以下步骤操作&#xff1a; 停止打印服务&#xff1a;您需要停止Windows系统中的“Print Spooler”服…

期货学习笔记-斐波那契学习1

斐波那契数列介绍 斐波那契数列是1、1、2、3、5、8、13、21、34、55、89…据说这是数学家莱昂纳多 斐波那契研究兔子繁殖时发现的一个神奇数列&#xff0c;似乎大自然在按照这个数列进行演化&#xff0c;一个斐波那契数字是由该数列相邻的前两个数字相加得到的 在斐波那契交易…

亚马逊云主管马特·加尔曼面临压力,致力于在人工智能领域赶超竞争对手

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

如果任务过多,队列积压怎么处理?

如果任务过多,队列积压怎么处理? 1、内存队列满了应该怎么办2、问题要治本——发短信导致吞吐量降低的问题不能忽略!!3、多路复用IO模型的核心组件简介1、内存队列满了应该怎么办 如图: 大家可以看到,虽然现在发短信和广告投递,彼此之间的执行效率不受彼此影响,但是请…