前言
服务端渲染(Server-Side Rendering,SSR)是一种常见于网页应用的技术,它指的是在服务器上将网页的内容生成,然后发送完整的HTML页面到客户端的浏览器的过程。这与传统的客户端渲染(Client-Side Rendering,CSR)相对,客户端渲染是在用户的浏览器上动态生成页面内容。
示例
EJS(Embedded JavaScript templating)是一个流行的模板引擎,它可以嵌入JavaScript代码到HTML页面中。它通过特定的模板标签让你能够将服务器端的数据插入到HTML页面中。这个过程通常用于服务端渲染(SSR)中,以动态地创建HTML页面,这些页面包含了来自服务器端的数据和逻辑。
下面是一个基于Node.js和EJS实现的简单服务端渲染的代码示例:
首先,你需要安装 ejs
和 express
:
bash
npm install express ejs
然后,你可以创建一个基础的Express服务器并使用EJS作为模板引擎:
javascript
const express = require('express');
const app = express();
// 设置EJS为模板引擎
app.set('view engine', 'ejs');
// 定义一个路由来渲染EJS模板
app.get('/', (req, res) => {
// 模拟一些要传递到模板的数据
const data = {
title: 'Hello World',
content: 'This is a server-side rendered page using EJS.',
items: ['Apple', 'Banana', 'Orange']
};
// 渲染`views/index.ejs`模板,并传入数据
res.render('index', data);
});
// 启动服务器
const PORT = 3000;
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
在你的views
目录中,你需要有一个index.ejs
文件,它可以是像这样的:
html
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
</head>
<body>
<h1><%= content %></h1>
<ul>
<% items.forEach(function(item) { %>
<li><%= item %></li>
<% }); %>
</ul>
</body>
</html>
在这个EJS模板中,<%= %>
标签用来输出变量的值,而<% %>
标签用来执行任意的JavaScript代码,比如循环或者条件判断。此模板会获得从服务器传递过来的data
对象,然后它用这个数据来动态插入标题、内容和列表项到页面中。
当用户访问根URL(/
)时,这个页面将会被服务端渲染并响应给用户的浏览器,显示动态生成的带有数据的HTML内容。这就是在Node.js中使用EJS进行服务端渲染的一个基础示例。
优点
服务端渲染的优点包括:
- 更快的首屏加载:用户能够更快地看到完整渲染的页面,因为服务器已经处理了大部分的内容生成。
- 搜索引擎优化(SEO):由于内容已经在服务端完成渲染,搜索引擎可以更容易地抓取和索引网页内容,这对SEO是有利的。
- 更好的性能:对于那些处理能力较弱的客户端设备来说,服务器端渲染可能会提供更好的性能体验。
- 减轻客户端的负担:因为页面是在服务器上生成,客户端需要做的工作更少,可以减少设备的能耗和计算需求。
缺点
服务端渲染的缺点包括:
- 服务器加载:所有的渲染负担都在服务器上,可能会导致服务器性能压力增大。
- 响应时间:在服务器负载较高的情况下,页面的生产和传输可能会需要更多的时间,这会影响到用户体验。
- 缓存策略:对于高度动态的内容,实现有效的缓存策略可能比较困难,因为每个用户请求可能都需要生成新的页面。
总结
现代的网页开发通常会结合服务端渲染和客户端渲染的优点,使用如Next.js、Nuxt.js等框架支持的通用(同构)渲染,以提供最佳的用户体验和性能。这种方式可以让应用的首屏直接由服务端渲染并提供给客户端,而后续的页面交互则由客户端接管,从而结合两种渲染方式的优势。