如何从零构建一个 Node.js SSR 服务？ 在前端开发的广阔天地里，服务器端渲染（SSR）就如同一位神奇的魔法师，能够赋予网页更快的加载速度、更好的 SEO 效果以及更出色的用户体验。而 Node.js 作为构建 SSR 服务的得力助手，更是备受开发者青睐。那么，究竟怎样从零开始构建一个 Node.js SSR 服务呢？接下来，就让我们一同踏上这段充满挑战与惊喜的探索之旅。
准备工作：搭建基础环境 构建 Node.js SSR 服务，就像建造一座高楼大厦，首先得打好坚实的地基。这地基便是我们的开发环境。
- 安装 Node.js 和 npm：Node.js 是我们的核心工具，npm 则是管理项目依赖的好帮手。你可以从 Node.js 官方网站下载并安装适合你操作系统的版本。安装完成后，打开终端，输入“node -v”和“npm -v”，若能显示版本号，就说明安装成功啦。这就好比我们已经准备好了建筑所需的砖块和水泥。
- 创建项目目录：找一个合适的地方，创建一个新的文件夹作为项目的家。打开终端，使用“mkdir project-name”命令创建文件夹，再用“cd project-name”进入这个文件夹。这就像是为我们的大厦选好了一块风水宝地。
- 初始化项目：在项目目录下，运行“npm init -y”命令，这会快速生成一个 package.json 文件，它记录了项目的各种信息和依赖。就如同为大厦制定了一份详细的设计蓝图。
选择框架：确定核心架构 有了基础环境，接下来就需要选择一个合适的框架来搭建我们的 SSR 服务，这就好比为大厦选择一种合适的建筑结构。
- Express：Express 是一个轻量级的 Node.js Web 应用框架，简单易用，灵活性高。它就像一个万能的建筑模板，能让我们根据自己的需求自由搭建。使用“npm install express”命令安装 Express。
- Koa：Koa 是由 Express 原班人马打造的新一代 Node.js 框架，更加简洁、高效。它如同一个精致的建筑模型，能帮助我们构建出更加优雅的应用。安装命令为“npm install koa”。 这里以 Express 为例，创建一个简单的 Express 服务器。在项目目录下创建一个 app.js 文件，代码如下： const express = require('express'); const app = express();
app.get('/', (req, res) => { res.send('Hello, SSR!'); });
const port = 3000;
app.listen(port, () => {
console.log(Server is running on port ${port});
});
在终端运行“node app.js”，打开浏览器访问“www.ysdslt.com”，就能看到“Hello, SSR!”的字样，这说明我们的服务器已经成功启动，就像大厦的框架已经搭建起来了。
引入模板引擎：渲染页面内容 有了服务器框架，接下来就是要让页面有具体的内容，这就需要引入模板引擎，它就像是大厦的装修工人，能把空荡荡的房间变得丰富多彩。
- EJS：EJS 是一个简单而强大的模板引擎，语法类似于 JavaScript，易于学习和使用。使用“npm install ejs”安装 EJS。
- Pug：Pug 是一种简洁的模板语言，使用缩进和标签来构建 HTML 结构，代码更加简洁美观。安装命令为“npm install pug”。 以 EJS 为例，在项目目录下创建一个 views 文件夹，在其中创建一个 index.ejs 文件，内容如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SSR with EJS</title> </head> <body> <h1><%= message %></h1> </body> </html>
在 app.js 中配置 EJS 并渲染页面： const express = require('express'); const app = express();
app.set('view engine', 'ejs'); app.set('views', './views');
app.get('/', (req, res) => { const data = { message: 'Welcome to SSR with EJS!' }; res.render('index', data); });
const port = 3000;
app.listen(port, () => {
console.log(Server is running on port ${port});
});
重新启动服务器，刷新浏览器，就能看到页面上显示“Welcome to SSR with EJS!”，这就像大厦已经装修好了，变得温馨又舒适。
数据获取：为页面注入活力 有了页面内容，还需要让页面的数据动态起来，这就需要进行数据获取，它就像是为大厦安装了各种智能设备，让大厦充满生机。
- 使用 axios：axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。使用“npm install axios”安装 axios。 在 app.js 中添加数据获取的代码： const express = require('express'); const axios = require('axios'); const app = express();
app.set('view engine', 'ejs'); app.set('views', './views');
app.get('/', async (req, res) => { try { const response = await axios.get('www.ysdslt.com/todos/1'); const data = { message: 'Welcome to SSR with EJS!', todo: response.data }; res.render('index', data); } catch (error) { console.error(error); res.status(500).send('Error fetching data'); } });
const port = 3000;
app.listen(port, () => {
console.log(Server is running on port ${port});
});
在 index.ejs 中显示获取到的数据： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SSR with EJS</title> </head> <body> <h1><%= message %></h1> <p>Todo ID: <%= todo.id %></p> <p>Todo Title: <%= todo.title %></p> <p>Todo Completed: <%= todo.completed %></p> </body> </html>
重新启动服务器，刷新页面，就能看到从 API 获取的数据显示在页面上，这就像大厦的智能设备开始正常工作，为我们带来便利和惊喜。
优化与部署：让服务更完美 构建好 SSR 服务后，还需要进行优化和部署，这就像对大厦进行最后的检查和交付，让它能在现实世界中稳定运行。
- 性能优化：可以使用缓存技术，减少重复的数据请求和页面渲染。还可以对代码进行压缩和合并，减少文件大小。这就像为大厦进行节能改造，让它更加高效。
- 错误处理：在代码中添加完善的错误处理机制，确保服务在出现异常时能正常响应。这就像为大厦安装了安全防护系统，保障居民的安全。
- 部署到服务器：可以选择云服务提供商，如阿里云、腾讯云等，将项目部署到服务器上。这就像将大厦交付给业主，让它为更多人服务。
通过以上步骤，我们从零开始构建了一个 Node.js SSR 服务。从搭建基础环境到选择框架，从引入模板引擎到数据获取，再到最后的优化与部署，每一步都像是在精心打造一座宏伟的大厦。希望这篇文章能帮助你顺利开启 Node.js SSR 服务的构建之旅，让你的网页焕发出新的活力。
