SSR (服务端渲染)-JavaScript中文网-JavaScript教程资源分享门户

什么是服务端渲染？

服务端渲染（Server-Side Rendering, SSR）是指在服务器端生成网页内容，然后将这些内容发送到客户端浏览器进行展示。这种方式与传统的客户端渲染（Client-Side Rendering, CSR）不同，CSR是在客户端的浏览器中完成页面的渲染工作。

SSR 的优点

SEO 友好：搜索引擎更容易抓取和索引通过服务端渲染的网页。
更快的首屏加载时间：由于初始 HTML 是直接从服务器获取的，用户可以更快地看到内容。
降低首屏的 JavaScript 执行负担：服务端已经完成了大部分的工作，客户端只需要执行少量的 JavaScript 来更新页面。

在 Vite 中使用 SSR

Vite 提供了对 SSR 的原生支持，这使得我们可以轻松地为项目添加 SSR 功能。接下来我们将详细介绍如何在 Vite 中设置和使用 SSR。

安装必要的依赖

首先，确保你的项目已经安装了 Vite 和 Vite 插件 @vitejs/plugin-legacy，后者可以帮助处理旧版浏览器的兼容性问题。同时，为了实现 SSR，我们还需要安装 @vitejs/plugin-vue（如果你使用 Vue 作为框架的话）。

npm install @vitejs/plugin-legacy
# 如果使用 Vue
npm install @vitejs/plugin-vue

配置 Vite

在项目的根目录下找到 vite.config.js 文件，并进行如下配置：

// www.javascriptcn.com code example
import { defineConfig } from 'vite';
import legacy from '@vitejs/plugin-legacy';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
    vue(),
    legacy({
      targets: ['defaults', 'not IE 11'],
    }),
  ],
  server: {
    hmr: true,
  },
  build: {
    ssr: true,
  },
});

这里我们启用了 HMR（热模块替换）功能，这对于开发过程中的即时反馈非常有用。同时设置了 build.ssr = true 来开启 SSR 支持。

创建 SSR 入口文件

为了让 Vite 能够识别并处理 SSR 请求，我们需要创建一个专门用于 SSR 的入口文件。通常这个文件会放在项目的根目录下，比如 src/ssr-entry.js。

import { createSSRApp } from 'vue';
import App from './App.vue';

export function createApp() {
  const app = createSSRApp(App);
  return { app };
}

这段代码定义了一个 createApp 函数，它返回一个包含了应用实例的对象。这里的 App.vue 是我们的根组件。

设置服务器

最后一步是设置一个简单的 HTTP 服务器来处理请求。你可以使用 Express 或其他任何你喜欢的 Node.js 服务器框架。以下是一个简单的例子：

// www.javascriptcn.com code example
const express = require('express');
const { createServer: createViteServer } = require('vite');
const { createApp } = require('./src/ssr-entry');

async function createServer() {
  const app = express();
  const vite = await createViteServer({
    server: { middlewareMode: 'ssr' },
  });

  // 将 Vite 的中间件应用到 Express 应用上
  app.use(vite.middlewares);

  app.get('*', async (req, res) => {
    try {
      // 读取文件系统中的 .html 文件
      let template = await vite.transformIndexHtml(req.url, fs.readFileSync('./index.html', 'utf-8'));

      // 创建 Vue 应用实例
      const { app } = createApp();

      // 渲染应用
      const appContent = await app.mountToString();

      // 将应用内容注入到 HTML 模板中
      const html = template.replace(`<!--app-html-->`, appContent);

      res.status(200).set({ 'Content-Type': 'text/html' }).end(html);
    } catch (e) {
      // 处理错误
      vite.ssrFixStacktrace(e);
      console.log(e.stack);
      res.status(500).end(e.stack);
    }
  });

  app.listen(3000, () => {
    console.log('http://localhost:3000');
  });
}

createServer();

这个例子中，我们使用 Express 和 Vite 来创建一个简单的服务器。当接收到任何路径的请求时，它会先通过 Vite 的中间件处理请求，然后渲染 Vue 应用并将结果插入到 HTML 模板中。

以上就是在 Vite 中实现 SSR 的基本步骤。通过这些配置，你可以让你的应用支持服务端渲染，从而提升性能和 SEO 效果。