Node.js 中如何实现服务端渲染

原创 www.link114.cn 2025-05-02 08:52:22

Node.js 中如何实现服务端渲染

在Web开发中,服务端渲染(Server-Side Rendering, SSR)是一种常见的应用程序渲染方式。与客户端渲染(Client-Side Rendering, CSR)相比,SSR 将页面的渲染工作放在服务器端完成,将渲染好的 HTML 返回给客户端浏览器。这种方式有以下优点:

首屏渲染速度快: 由于页面内容是由服务器直接生成并返回,而不需要在客户端经历 JavaScript 脚本的下载、解析和执行,所以首次访问页面时用户能更快地看到页面内容。
利于 SEO: 搜索引擎爬虫能够更好地抓取和理解服务器返回的 HTML 内容,有助于页面在搜索引擎中的排名。
更好的用户体验: 首次访问页面时能更快地看到内容,给用户一种页面响应迅速的感觉。

在 Node.js 中实现服务端渲染的主要步骤如下:

使用 Express 框架创建一个 Web 服务器,并定义路由。

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.render('index', { message: 'Hello, world!' });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

在 Express 中,我们需要设置一个模板引擎来生成动态的 HTML 页面。常用的模板引擎有 Handlebars、Pug、EJS 等。以 Handlebars 为例:

const exphbs = require('express-handlebars');

app.engine('handlebars', exphbs());
app.set('view engine', 'handlebars');

在 views 目录下创建对应的视图文件,例如 index.handlebars:

<!DOCTYPE html>
<html>
<head>
  <title>My Express App</title>
</head>
<body>
  <h1>{{message}}</h1>
</body>
</html>

在路由处理函数中,我们可以将需要渲染的数据传递给视图文件。

app.get('/', (req, res) => {
  const data = {
    message: 'Hello, world!',
    items: ['Item 1', 'Item 2', 'Item 3']
  };
  res.render('index', data);
});

在视图文件中,我们可以使用模板引擎的语法来访问这些数据。

<!DOCTYPE html>
<html>
<head>
  <title>My Express App</title>
</head>
<body>
  <h1>{{message}}</h1>
  <ul>
    {{#each items}}
    <li>{{this}}</li>
    {{/each}}
  </ul>
</body>
</html>

对于动态路由,我们可以在路由定义中使用参数来获取动态的数据,在视图文件中使用这些数据进行渲染。

app.get('/post/:id', (req, res) => {
  const post = {
    id: req.params.id,
    title: 'My Blog Post',
    content: 'This is the content of my blog post.'
  };
  res.render('post', post);
});

在 post.handlebars 视图文件中,我们可以使用 {{id}}、{{title}}、{{content}} 等占位符来显示动态数据。

在某些情况下,我们可能需要在服务端渲染的基础上,进一步集成前端框架如 React、Vue.js 等,以提供更丰富的交互体验。这需要在服务端完成初次渲染,在客户端接管渲染过程,实现hydration(注水)。

在 Node.js 中实现服务端渲染需要设置 Express 服务器、配置模板引擎、创建视图文件、传递数据到视图,并处理动态路由等步骤。通过这种方式,我们可以充分发挥服务端渲染的优势,为用户提供更快的首屏渲染和更好的SEO支持。