服务器端渲染(SSR)通过Node.js与Express.js实现,提升首屏加载速度和SEO;2. 使用EJS模板引擎可动态渲染数据,结合res.render返回HTML页面;3. 可选集成React同构渲染,利用react-dom/server生成HTML字符串;4. 配合express.static中间件提供静态资源支持,确保页面样式与交互正常。

服务器端渲染(SSR)能提升首屏加载速度和SEO效果。使用Node.js配合Express.js,可以轻松实现动态页面在服务端组装HTML后返回给客户端。
设置基础Express服务器
先初始化项目并安装必要依赖:
npm init -ynpm install express
创建入口文件 server.js,搭建最简Express服务:
const express = require('express');const app = express();
const port = 3000;
app.get('*', (req, res) => {
res.send('
Hello SSR with Express
');});
app.listen(port, () => {
console.log(Server running on http://localhost:${port});
});
集成模板引擎进行动态渲染
Express支持多种模板引擎,如Pug、EJS、Handlebars等。以EJS为例,实现数据注入与HTML拼接:
npm install ejs项目结构:
/views- index.ejs
server.js
配置Express使用EJS,并渲染带数据的页面:
app.set('view engine', 'ejs');app.set('views', './views');
app.get('/', (req, res) => {
const data = { title: 'SSR Page', message: 'Rendered on server' };
res.render('index', data);
});
在 views/index.ejs 中接收数据:
结合React实现同构渲染(可选进阶)
若使用React构建前端,可通过 react-dom/server 在服务端生成HTML字符串:
编写一个简单React组件 App.js:
import React from 'react';const App = ({ content }) =>
export default App;
在路由中渲染组件为字符串:
import { renderToString } from 'react-dom/server';import App from './App';
app.get('/react', (req, res) => {
const html = renderToString(
res.send(zuojiankuohaophpcn!DOCTYPE htmlyoujiankuohaophpcnzuojiankuohaophpcnhtmlyoujiankuohaophpcnzuojiankuohaophpcnbodyyoujiankuohaophpcn${html}zuojiankuohaophpcn/bodyyoujiankuohaophpcnzuojiankuohaophpcn/htmlyoujiankuohaophpcn);
});
此时返回的HTML已包含内容,适合搜索引擎抓取。
处理静态资源与中间件
SSR应用通常还需提供CSS、JS等静态文件。使用Express内置中间件:
app.use(express.static('public'));将CSS、客户端JS放入 public 目录,HTML模板中正常引用:
css">这样服务端输出的页面具备样式和交互能力。
基本上就这些。通过Express搭配模板引擎或React,就能实现高效SSR,兼顾性能与可维护性。关键在于数据获取与HTML生成都在服务端完成,再发送完整页面给浏览器。










