什么是服务端渲染？
服务端渲染（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 文件，并进行如下配置：
-- -------------------- ---- -------
------ - ------------ - ---- -------
------ ------ ---- ------------------------
------ --- ---- ---------------------
------ ------- --------------
-------- -
------
--------
-------- ------------ ---- -- -----
---
--
------- -
---- -----
--
------ -
---- -----
--
---这里我们启用了 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 服务器框架。以下是一个简单的例子：
-- -------------------- ---- -------
----- ------- - -------------------
----- - ------------- ---------------- - - ----------------
----- - --------- - - ---------------------------
----- -------- -------------- -
----- --- - ----------
----- ---- - ----- ------------------
------- - --------------- ----- --
---
-- - ---- ------- ------- ---
--------------------------
------------ ----- ----- ---- -- -
--- -
-- -------- ----- --
--- -------- - ----- -------------------------------- ------------------------------- ----------
-- -- --- ----
----- - --- - - ------------
-- ----
----- ---------- - ----- --------------------
-- -------- ---- ---
----- ---- - ----------------------------------- ------------
--------------------- --------------- ----------- -------------
- ----- --- -
-- ----
-------------------------
---------------------
-----------------------------
-
---
---------------- -- -- -
-------------------------------------
---
-
---------------这个例子中，我们使用 Express 和 Vite 来创建一个简单的服务器。当接收到任何路径的请求时，它会先通过 Vite 的中间件处理请求，然后渲染 Vue 应用并将结果插入到 HTML 模板中。
以上就是在 Vite 中实现 SSR 的基本步骤。通过这些配置，你可以让你的应用支持服务端渲染，从而提升性能和 SEO 效果。