SSR（Server-Side Rendering），即服务器端渲染，是一种将 Web 应用的页面渲染成 HTML 后再返回给客户端的技术。相对于传统的客户端渲染（Client-Side Rendering），SSR 的主要优势在于它可以提升网站的首屏加载速度、搜索引擎优化（SEO）和内容可读性等。
SSR 的一般实现步骤如下：
1. 客户端发送页面请求到服务器端
2. 服务器端使用具有渲染能力的模板引擎生成 HTML 代码（包含数据）
3. 服务器将渲染好的 HTML 代码返回给客户端
4. 客户端通过解析 HTML 和加载所需的 CSS、JavaScript 文件，防止显示渲染后的页面
SSR 的主要优势在于：
1. 首屏加载速度更快：因为 SSR 是服务器端完成页面渲染并返回给客户端的，客户端只需要解析 JavaScript 和 CSS 文件，从而提升了速度。
2. 更好的 SEO：搜索引擎爬虫可以直接抓取到完整的 HTML，而非等待 JavaScript 加载完成后再行抓取，并能够处理异步数据。
3. 提升内容可读性：由于 HTML 的内容是在服务器端生成的，所以浏览者在通过查看网页源代码得到内容时， HTML 代码中已经包含了所需要的所有内容。
以下是使用 SSR 的一般方法：
1. 使用框架：大部分已有的前端框架，如 Nuxt.js、Next.js 等都有封装好 SSR 功能，只需要简单配置即可。
2. 自行搭建：可以手动搭建 SSR，原理上和普通的服务器端渲染一样，只是需要一些特殊的配置。
以下是一个 SSR 的案例：
在这个案例中，我使用了 React 作为前端框架和 Node.js 作为后端。
1. 安装所需要的依赖
```
npm install express react react-dom react-router-dom
```
2. 在服务器端使用 ReactDOMServer.renderToString() 方法将 React 组件渲染成字符串，并将字符串插入 HTML 中的
```jsx
import express from 'express';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { StaticRouter, matchPath } from 'react-router-dom';
import App from './App';
const app = express();
const port = 3000;
app.use(express.static('public'));
app.get('*', (req, res) => {
const context = {};
const html = ReactDOMServer.renderToString(
);
res.send(`
`);
});
app.listen(port, () => console.log(`Server running on port ${port}`));
```
3. 配置 Webpack 打包服务器端的代码
Webpack 配置需加入 target: 'node' 和 externals: [nodeExternals()]，避免服务器端代码打包后运行时无法识别 Node.js 自带的模块。
```jsx
const path = require('path');
const nodeExternals = require('webpack-node-externals');
module.exports = {
entry: './src/server.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'server.bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
target: 'node',
externals: [nodeExternals()]
};
```
4. 构建并运行服务器端代码
将打包好的服务器端代码上传至服务器中，然后使用 node 命令运行即可。
```sh
node server.bundle.js
```
以上就是 SSR 的基本使用方法以及案例展示。SSR 虽然可以提升网站的性能和用户体验，但对服务器的性能要求也有一定的要求。在实际开发中应该综合考虑是否需要使用 SSR 来进行页面的渲染。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.ynyuzhu.com/
![最新版TikTok 抖音国际版解锁版 v33.8.4 去广告 免拔卡[免费网盘]](https://m.ynyuzhu.com/uploads/20240316/368374f292fe1b61eead785c71e11147.jpg)
发表评论 取消回复