Astro + Svelte 对阵 SvelteKit：优劣详解

Astro 这套 Web 框架虽然相对年轻，但在开发领域已经获得了巨大关注。随着市场人气的激增，不少开发者正在考试从 SvelteKit 和 Nuxt 等传统框架处迁移至 Astro 阵营。

在本文中，我们将深入探讨 Astro + Svelte 与 SvelteKit 之间的优劣，比较二者的性能表现、开发者体验和相关功能。

在文章末尾，我们将整理出一份比较表格，帮助大家在后续 Svelte 项目中更有针对性地挑选框架。

Astro 是什么？

Astro 允许大家使用自己喜爱的 UI 组件和库构建起快速且现代的网站。这是一套 UI 中立型框架，能够兼容 React、Svelte、Vue、Solid 等现代 JS 框架。大家甚至可以将多个 JS 框架整合到同一套代码库当中。

有了 Astro，我们可以从各种来源处获取内容，并将其部署到不同的平台之上。它快速、无 JS 的前端架构非常适合构建多页应用，同时对 SEO 和性能做出优化。

默认情况下，Astro 就是一套无 JS 框架，能够将应用程序逻辑转换成 HTML 并在服务器端执行渲染。当然，它的“组件岛”功能也支持创建并导入在客户端执行的 JS 交互式组件。

Astro 还同时支持 Markdown 与 MDX，使其成为创建富内容网站和博客的理想选项。

SvelteKit 是什么？

SvelteKit 是一套 Web 开发框架，大家可以使用 Svelte 创建起灵活快速的 Web 应用程序。它将预渲染页面与动态服务器端沉浸相结合，以更灵活的方式实现最佳性能。

此外，SvelteKit 还能将应用程序转换为渐进式 Web 应用（PWA），并支持将开发成果导出为静态站点。

SvelteKit 的定位类似于 Next.js 加 React、Nuxt 加 Vue，能够提供路由、数据获取、可访问性、SEO 优化等基础功能。

Astro + Svelte 上手指南

要将 Svelte 引入 Astro 应用程序，第一步就是创建新的 Astro 应用：

npm create astro@latest

接下来，命令会要求提供应用名称和首选启动模板等细节信息。大家可以选择“Empty”项目模板并根据要求设定其他配置。在完成之后，使用以下命令启动你的应用：

npm run dev

要将 Svelte 添加进 Astro 应用，请执行以下命令：

npx astro add svelte# 或者yarn astro add svelte

此命令将安装必要的软件包，并申请修改基础文件权限。接受更改后，Svelte 就会无缝集成至您的 Astro 应用程序当中。

将 Svelte 适配器添加至 Astro 应用程序之后，我们可以在默认 src/components 目录中的.svelte 文件内创建 Svelte 组件，并将其导入自己的应用程序当中。

在 Astro 中安装 Tailwind CSS

Astro 用单行安装程序简化了第三方软件包的安装过程，操作与之前添加 Svelte 的方式一样。运行以下命令，即可安装 Tailwind CSS：

npx astro add svelte# ORyarn astro add svelte

执行此命令之后，我们会收到授权修改特定文件并安装所需软件包的提示。完成步骤之后，只需重新启动应用程序，Tailwind 即可开始无缝运行。

如果大家需要实践指引，也可以查看 Astro 发布的 Tailwind 手动安装说明：https://docs.astro.build/en/guides/integrations-guide/tailwind/#manual-install

使用 Svelte + Astro 创建组件

下面，我们尝试一下 Astro + Svelte 这个组合。在默认的 src/components 文件夹中创建一个新的 UserCard.svelte 文件，并将以下代码粘贴进去：

<script>    import { onMount } from 'svelte';    let user = null;    onMount(async () => {        try {            const response = await fetch('https://randomuser.me/api/');            const data = await response.json();            user = data.results[0];        } catch (error) {            console.error('Error fetching user:', error);        }    });</script><div class="flex items-center justify-center h-screen">    {#if user}        <div class="bg-white rounded-lg shadow-md p-6 w-80">            <img src={user.picture.large} alt="User" class="w-25 h-25 rounded-full mx-auto mb-4" />            <h2 class="text-xl font-semibold mb-2">                {user.name.first}                {user.name.last}            </h2>            <p class="text-gray-600">{user.email}</p>            <p class="text-gray-600 mt-1">                {user.location.street.number}                {user.location.street.name}            </p>            <p class="text-gray-600">                {user.location.city}, {user.location.country}            </p>        </div>    {:else}        <p>Loading...</p>    {/if}</div>

以上代码会从 Random User AIP 处检索数据。安装组件之后，它会展示 Tailwind 风格的配置卡。进入默认的 pages/index.astro 文件并用以下代码替换掉原有内容：

---import Layout from "../layouts/Layout.astro";import UserCard from "../components/UserCard.svelte";---<Layout title="Welcome to Astro.">  <UserCard client:load /></Layout>

在这里，我们更新了应用的 index 页面，以导入和渲染之前创建好的 UserCard Svelte 组件。此外，我们还向 UserCard 组件中添加了 client:load 属性，借此展示如何使用 Astro 组件岛。下面，我们会具体解析示例中的各 Astro“岛”。

我们的 Svelte 组件会在挂载之后获取数据，这就要求在客户端上执行 JS。这明显跟 Astro 以 HTML 渲染为中心、不依赖 JS 的默认设置有所区别。

为了弥合这一差异并向 Astro 表明该组件的交互式属性，我们需要在 UserCard 组件中引入 client:load 属性。如此一来，页面加载时会立即加载并水合组件 JS，确保组件行为符合预期。

一切就绪之后，在网络浏览器中运行我们的应用程序，这时应该会看到类似下图的输出示例：

SvelteKit 上手指南

要创建新的 SvelteKit 应用程序，请运行以下命令：

npm create svelte@latest new-appcd my-appnpm install

在成功创建应用程序之后，使用以下命令将其启动：

npm run dev

在 SvelteKit 中安装 Tailwind CSS

在 SvelteKit 中安装 Tailwind CSS 的过程，与在其他传统框架中安装非常相似。整个过程涉及一系列命令，下面我们分步来看。

首先，在项目目录中运行以下命令以安装 Tailwind CSS 及其依赖项。此步骤还会生成必要的 tailwind.config.js 和 postcss.config.js 文件。

npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p

接下来，打开 svelte.config.js 文件并将内容替换为以下代码，旨在从 @sveltejs/kit/vite 处导入 vitePreprocess。这样，我们就能将 <style>块作为 PostCSS 进行处理：

import adapter from '@sveltejs/adapter-auto';import { vitePreprocess } from '@sveltejs/kit/vite';const config = {  kit: {    adapter: adapter()  },  preprocess: vitePreprocess()};export default config;

更新 content 部分以确保 tailwind.config.js 文件匹配以下示例，其中包含所有模板文件的路径：

content: ['./src/**/*.{html,js,svelte,ts}'],

创建一个新的 ./src/app.css 文件，并向每个 Tailwind 层嵌入 @tailwind 指令：

@tailwind base;@tailwind components;@tailwind utilities;

最后，在./src/routes/+layout.svelte 处创建一个新的布局文件，并在其中导入刚刚创建的 app.css 文件：

<script>    import '../app.css';</script><slot />

这就是在 SvelteKit 中安装 Tailwind CSS 的完整过程。与 Astro 中的相应步骤相比较，就能看出二者在工作流程方面的差异。

使用 SvelteKit 创建 Svelte 组件

在整合 Svelte 组件方面，SvelteKit 有着独特的简化优势——因为在本质上，它就是一套基于 Svelte 的框架。

例如，我们可以在 SvelteKit 应用程序当中轻松复制和重用 UserCard 组件。我们可以直接将该组件导入至任何页面，例如.page.svelte，且无需任何额外配置。

通过在 SvelteKit 中轻松重建 UserCard 示例的过程，也能看出 SvelteKit 与 Svelte 之间具有天然的兼容性优势。

孰优孰劣：Astro + Svelte 对阵 SvelteKit

到这里，我们已经探索了 Astro + Svelte 和 SvelteKit 的初始设置步骤。接下来，让我们开展深入比较，根据这些框架的独特属性分析它们的优势和局限性。

构建和性能

单纯用基础配置文件并不足以全面体现这些框架的性能水平，因为其行为在更复杂的应用场景下往往会出现巨大差异。

为了突破这个限制，这里创建一款博客应用，可展示来自 JSONPlaceholder API 的博文内容。这款应用程序在 Astro + Svelte 和 SvelteKit 上均采用服务器端渲染（SSR）。

可以看到，Astro + Svelte 组合在 Lighthouse 中的得分如下：

而 SvelteKit 的 Lighthouse 得分如下：

分析上述结果，两种框架明显都带来了令人满意的性能表现。进一步观察，可以看到 Astro + Svelte 组合的性能指标如下：

• 首次内容绘制（FCP）：1.4 秒

• 最大内容绘制（LCP）：1.4 秒

• 总阻塞时间：0 毫秒

• 累积布局偏移：0

而 SvelteKit 的性能指标则整理如下：

• 首次内容绘制（FCP）：0.9 秒

• 最大内容绘制（LCP）：0.9 秒

• 总阻塞时间：40 毫秒

• 累积布局偏移：0

这些数字表明，SvelteKit 在首次内容绘制和最大内容绘制时间方面略优于 Astro + Svelte，但后者的优势是总阻塞时间为 0，可提供更加流畅的交互体验。

此外，Astro + Svelte 组合在移动和桌面平台上的表现更趋一致，而 SvelteKit 则差异较大。

路由机制

Astro 是一套多页应用框架，而 SvelteKit 则属于单页应用框架，因此二者的适用范围也有所区别。尽管如此，我们还是具体比较二者的路由与页面渲染机制，供大家参考。

Astro 和 SvelteKit 都使用基于文件的路由机制。但在使用 Astro + Svelte 组合时，整个过程涉及创建不同的 Svelte 组件，这些组件随后会被导入至 Astro 页面当中。

此外，如果你的 Svelte 组件使用客户端 JS，Astro 会通过其客户端指令强制规定水合行为的规范。这种细粒度操作可以更好地控制 Astro 内的水合过程。

这两套框架也都提供服务器端渲染（SSR）功能。但在涉及静态生成路由（SSG）时，Astro 会使用 getStaticPaths() 方法，从而获得显著的简单性优势。

例如，以下动态路由将根据从 JSONPlaceholder API 检索到的每篇博文生成静态 HTML 页面：

---// src/pages/blog/[id].astroexport async function getStaticPaths() {  const data = await fetch("https://jsonplaceholder.typicode.com/posts").then(    (response) => response.json()  );  return data.map((post) => {    return {      params: { id: post.id },      props: { post },    };  });}const { id } = Astro.params;const { post } = Astro.props;---<h1>{post.title}</h1><p>{post.body}</p>

另一方面，SvelteKit 则需要将 SSG 适配器同补充配置结合起来，才能实现类似的功能。

再有，SvelteKit 路由页面只能处理.svelte 文件，而 Astro 路由无需额外配置即可支持.md、.mdx 和 .html 文件。

数据获取

两套框架都提供在路由页面之内获取数据的不同方法。Astro 可以直接访问页面文件之内的路由信息以实现数据获取。相比之下，SvelteKit 则引入一种分离度更高的方法：

.└── sample-page    ├── +page.js OR +page.server.js    └── +page.svelte

如上所述，我们可以在 SvelteKit 中访问路由信息、执行数据获取，并在 +page.js 或者 +page.server.js 文件中导出所需数据。之后，即可访问相应 +page.svelte 文件中导出的数据。

虽然 Astro 也能实现类似的分离度，但 SvelteKit 在设计上对这种关注点分离做出了明确强调。

而在将 Astro 与 Svelte 相结合时，从 Svelte 组件处获取数据、再将组件导入 Astro 页面，可能会导致部分水合。

开发者体验

Astro 的开发者体验更具优势，原因是其简化了第三方库的集成过程。大家可以用 astro add 命令通过单行安装程序轻松完成库集成。

之前，我们在向应用程序中添加 Svelte 和 Tailwind 时已经体验过这样的简单过程。其不仅支持各类软件包，还允许大家创建自定义集成。相比之下，SvelteKit 则缺乏类似的功能。

Astro 还引入了 TypeScript 支持和无缝 Markdown 渲染，进一步增强了开发体验。而在使用 SvelteKit 时，这些功能通常都需要额外进行配置。

但 Astro 也绝非完全无瑕，一大缺点是如果 Astro + Svelte 中存在不正确的客户端指令规范，则可能导致部分水合和意外的应用行为。

比较表: Astro + Svelte 对阵 SvelteKit

以下比较表突出展示了 Astro + Svelte 和 SvelteKit 之间的相似点和差异。

如果你正在为下一个项目是选择 SvelteKit、还是 Astro + Svelte 组合感到困扰，希望本文的评估和比较能带来一点启发。

总结

在本文中，我们探索了 Astro + Svelte 和 SvelteKit 两套方案，深入研究了它们的各自启动过程和独有特性。

如大家所见，到底选择 Astro + Svelte 还是 SvelteKit，仍然要由您的实际需求和个人喜好而定。

如果你的项目强调以内容为中心（例如博客或类似用例），那么 Astro + Svelte 无疑是相对理想的选择。另一方面，如果您希望打造一款高度依赖客户端 JS 进行复杂交互的高性能应用程序，那么 SvelteKit 的优势将得以凸显。具体如何，还请大家酌情考量。

原文链接：

https://blog.logrocket.com/exploring-astro-svelte-vs-sveltekit/

相关阅读

Astro 低代码平台关键能力技术浅析

使用 Astro 如何构建 Astrobot Voice

创建Svelte Web组件

用 Svelte 实现响应式、反应式的动画数据可视化