MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

Svelte服务端渲染SSR入门指南

2024-06-177.8k 阅读

什么是Svelte服务端渲染（SSR）

在传统的前端开发模式中，网页的大部分渲染工作是在客户端（浏览器）完成的。当用户请求一个页面时，服务器返回一个基本的HTML骨架，然后浏览器通过加载JavaScript脚本，进一步渲染页面，使其变得交互性更强。然而，这种模式存在一些缺点，特别是在首屏加载速度和搜索引擎优化（SEO）方面。

服务端渲染（SSR）则改变了这一流程。在SSR中，服务器在接收到请求时，会直接生成完整的HTML页面，包括所有的页面内容和样式。这样，当浏览器接收到这个HTML时，它几乎可以立即显示页面，无需等待大量的JavaScript脚本加载和执行。这显著提高了首屏加载速度，同时也有利于搜索引擎抓取页面内容，因为搜索引擎通常不会执行JavaScript，而SSR生成的HTML包含了完整的页面信息。

Svelte是一种新兴的前端框架，它以其独特的编译时优化和简洁的语法而受到关注。Svelte的SSR功能允许开发者在服务器端生成Svelte应用的HTML，结合了Svelte的高效性和SSR的优势。

环境搭建

  1. Node.js和npm：首先确保你已经安装了Node.js和npm。你可以从Node.js官方网站下载并安装最新的长期支持（LTS）版本。安装完成后，在终端中输入node -v和npm -v来验证安装是否成功。
  2. 创建Svelte项目：使用Svelte官方提供的脚手架工具create - svelte来创建一个新的Svelte项目。在终端中运行以下命令：
npm create svelte@latest my - svelte - app
cd my - svelte - app
npm install

这将创建一个名为my - svelte - app的新Svelte项目，并安装所有必要的依赖。 3. 安装SSR相关依赖：为了实现SSR，我们需要安装@sveltejs/kit，它是Svelte的官方框架，内置了对SSR的支持。在项目目录中运行以下命令：

npm install @sveltejs/kit

项目结构调整

  1. 了解默认结构：创建的Svelte项目通常有一个基本的结构，如下所示：
my - svelte - app
├── public
│   └── favicon.ico
├── src
│   ├── app.css
│   ├── app.js
│   ├── components
│   │   └── HelloWorld.svelte
│   └── main.js
├── package.json
├── README.md
└── rollup.config.js
  1. 转换为SvelteKit项目：使用@sveltejs/kit后，项目结构会有所变化。我们需要将代码按照SvelteKit的约定进行组织。
    • src目录：在src目录下，创建一个routes目录。SvelteKit会根据routes目录下的文件结构来生成路由。例如，src/routes/index.svelte将对应应用的根路由。
    • layout：可以创建一个layout.svelte文件，用于定义应用的全局布局。所有页面都会继承这个布局。例如：
<script>
    import { onMount } from'svelte';
    let title = 'My Svelte App';
    onMount(() => {
        document.title = title;
    });
</script>

<slot></slot>

这里，layout.svelte设置了页面的标题，并通过<slot>标签来插入具体页面的内容。

编写第一个SSR页面

  1. 创建页面组件：在src/routes目录下创建一个index.svelte文件。这将是我们应用的首页。
<script>
    let message = 'Hello, Svelte SSR!';
</script>

<h1>{message}</h1>

这个简单的组件在页面上显示一条消息。 2. 配置服务器：SvelteKit会自动为我们处理服务器端渲染的大部分配置。但是，我们可以通过src/hooks.js文件来进行一些自定义配置。例如，我们可以在这里设置一些全局的中间件：

export function handle({ event, resolve }) {
    // 在这里可以添加中间件逻辑，例如日志记录
    console.log('Handling request:', event.url);
    return resolve(event);
}
  1. 运行项目：在项目目录中运行以下命令来启动开发服务器：
npm run dev

打开浏览器，访问http://localhost:3000，你应该能看到页面上显示Hello, Svelte SSR!。此时，页面已经是通过SSR生成的。

数据获取与SSR

  1. 在服务器端获取数据：很多时候，我们的页面需要从API获取数据并显示。在SvelteKit中，我们可以在load函数中进行数据获取。在index.svelte文件所在目录（src/routes），创建一个+page.js文件：
export async function load() {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const data = await response.json();
    return {
        props: {
            todo: data
        }
    };
}

这里，我们从https://jsonplaceholder.typicode.com获取一个待办事项的数据。load函数返回的props对象中的数据可以在对应的index.svelte组件中使用。 2. 在组件中使用数据：修改index.svelte文件来显示获取到的数据：

<script>
    export let todo;
</script>

<h1>{todo.title}</h1>
<p>{todo.completed? 'Completed' : 'Not Completed'}</p>

现在，页面会显示从API获取的待办事项的标题和完成状态。由于数据是在服务器端获取的，所以页面在首次加载时就会显示正确的数据，无需等待额外的客户端请求。

处理路由参数

  1. 动态路由：假设我们想要创建一个页面，显示不同待办事项的详细信息。我们可以使用动态路由。在src/routes目录下创建一个[id].svelte文件，这里[id]表示动态参数。
<script>
    export let params;
    const { id } = params;
    let todo;
    const loadTodo = async () => {
        const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${id}`);
        todo = await response.json();
    };
    loadTodo();
</script>

{#if todo}
    <h1>{todo.title}</h1>
    <p>{todo.completed? 'Completed' : 'Not Completed'}</p>
{:else}
    <p>Loading...</p>
{/if}
  1. 对应的+page.js文件：为了在服务器端获取数据，我们还需要创建一个[id]+page.js文件：
export async function load({ params }) {
    const { id } = params;
    const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${id}`);
    const data = await response.json();
    return {
        props: {
            todo: data
        }
    };
}

这样，当我们访问http://localhost:3000/1（假设1是待办事项的ID）时，页面会显示对应的待办事项详细信息。

样式处理

  1. 全局样式：在SvelteKit项目中，我们可以在src/app.css文件中定义全局样式。例如：
body {
    font - family: Arial, sans - serif;
    margin: 0;
    padding: 0;
}
  1. 组件样式：每个Svelte组件也可以有自己的样式。在index.svelte中添加一些组件级别的样式：
<script>
    let message = 'Hello, Svelte SSR!';
</script>

<style>
    h1 {
        color: blue;
    }
</style>

<h1>{message}</h1>

这里，h1标签的文本颜色被设置为蓝色，并且这个样式只作用于当前组件，不会影响其他组件。

优化SSR性能

  1. 代码拆分：SvelteKit会自动进行代码拆分，将不同路由的代码分别打包。这意味着只有当前页面所需的代码会被加载，减少了初始加载的代码量。例如，如果用户访问首页，只有首页相关的代码会被加载，而其他页面的代码不会被下载。
  2. 缓存：对于频繁请求的数据，可以在服务器端实现缓存机制。例如，我们可以使用node - cache库来缓存从API获取的数据。首先安装node - cache：
npm install node - cache

然后在+page.js文件中使用缓存：

import NodeCache from 'node - cache';
const myCache = new NodeCache();

export async function load() {
    let data = myCache.get('todo - 1');
    if (!data) {
        const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
        data = await response.json();
        myCache.set('todo - 1', data);
    }
    return {
        props: {
            todo: data
        }
    };
}

这样，下次请求相同数据时，会直接从缓存中获取，提高了响应速度。

部署SSR应用

  1. 构建项目：在部署之前，我们需要构建项目。在项目目录中运行以下命令：
npm run build

这会在项目根目录下生成一个.svelte - kit目录，其中包含了构建后的代码。 2. 选择部署平台： - Vercel：Vercel是一个流行的前端部署平台，对SvelteKit有很好的支持。首先，确保你已经安装了Vercel CLI：

npm install -g vercel

然后，在项目目录中运行：

vercel

按照提示进行操作，即可将项目部署到Vercel。 - Netlify：Netlify也是一个不错的选择。将项目推送到GitHub或GitLab，然后在Netlify中连接你的仓库，选择合适的构建命令（npm run build）和输出目录（.svelte - kit/output），即可完成部署。

处理错误

  1. 捕获加载错误：在load函数中，可能会出现数据获取失败等错误。我们可以在load函数中捕获这些错误，并返回合适的错误信息。例如，修改[id]+page.js文件：
export async function load({ params }) {
    const { id } = params;
    try {
        const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${id}`);
        if (!response.ok) {
            throw new Error('Failed to fetch data');
        }
        const data = await response.json();
        return {
            props: {
                todo: data
            }
        };
    } catch (error) {
        return {
            status: 404,
            error: new Error('Todo not found')
        };
    }
}
  1. 在组件中处理错误：在[id].svelte组件中，我们可以根据error来显示合适的错误信息：
<script>
    export let error;
    export let status;
</script>

{#if error}
    <h1>Error {status}</h1>
    <p>{error.message}</p>
{:else}
    <!-- 正常页面内容 -->
{/if}

这样，当数据获取失败时，页面会显示相应的错误信息。

与第三方库集成

  1. 使用图表库：假设我们想要在页面中显示一个图表。我们可以使用chart.js库。首先安装chart.js和svelte - chartjs：
npm install chart.js svelte - chartjs

然后在index.svelte中使用图表：

<script>
    import { Bar } from'svelte - chartjs';
    const data = {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [
            {
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }
        ]
    };
    const options = {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    };
</script>

<Bar {data} {options} />
  1. 注意事项：在使用第三方库时，要注意其与SSR的兼容性。有些库可能需要特殊的配置才能在服务器端正确运行。例如，一些依赖浏览器API的库可能需要在客户端渲染时才加载。

高级SSR功能

  1. 服务端渲染与客户端交互：在SSR中，虽然页面是在服务器端生成的，但我们仍然需要在客户端增强交互性。例如，我们可以在组件中添加点击事件：
<script>
    let count = 0;
    const increment = () => {
        count++;
    };
</script>

<button on:click={increment}>Click me ({count})</button>

这里，按钮的点击事件在客户端执行，增加count的值并更新页面显示。 2. 流式渲染：SvelteKit支持流式渲染，这意味着服务器可以在生成HTML的过程中逐步将数据发送给客户端，而不需要等待整个页面完全生成。这进一步提高了首屏加载速度。要启用流式渲染，可以在src/hooks.js中进行配置：

export function handle({ event, resolve }) {
    event.respondWith(
        resolve(event).then((response) => {
            if (response.headers.get('content - type') === 'text/html') {
                return new Response(response.body.pipeThrough(new TextEncoderStream()), {
                    headers: {
                        'content - type': 'text/html'
                    }
                });
            }
            return response;
        })
    );
}

通过以上步骤，你应该已经对Svelte的服务端渲染有了深入的了解，并能够构建出高效、可维护的SSR应用。在实际开发中，你可以根据项目的需求进一步优化和扩展这些功能。