在前端开发中，有时我们需要在服务器端渲染页面，以提高页面的加载速度和 SEO 优化。Express.js 是一个流行的 Node.js Web 应用程序框架，可以帮助我们实现服务器端渲染。
准备工作
在使用 Express.js 进行服务器端渲染之前，我们需要先安装 Node.js 和 Express.js。可以在Node.js 官网下载安装程序，也可以使用包管理器如 npm 或 yarn 安装 Express.js。在本文中，我们使用首页（home）页面作为例子进行讲解。
创建 Express 应用程序
在安装完 Express.js 之后，我们需要创建一个 Express 应用程序。在命令行中输入以下命令：
express --view=ejs myapp cd myapp && npm install
这将创建一个名为 myapp 的新目录，并在其中生成一个 Express 应用程序模板。--view=ejs 选项将使用 ejs 模板引擎来渲染视图层。
配置服务器端渲染
为了实现服务器端渲染，我们需要准备一些配置。首先，在 app.js 文件中设置模板引擎：
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');然后，我们需要创建一个路由来渲染首页。在 routes/index.js 文件中，添加以下代码：
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});这段代码使用 res.render() 方法来渲染模板文件 views/index.ejs，并将 title 参数传递给模板。现在我们需要修改 views/index.ejs 文件，将 HTML 代码替换为以下内容：
-- -------------------- ---- -------
--------- -----
------
------
---------- ----- ----------
-------
------
------- ----- -------
---------- -- --- ----- ------
-------
-------这里的 <%= title %> 表示将 title 参数的值插入到 HTML 中。现在我们启动应用程序，然后在浏览器中输入 http://localhost:3000，即可看到渲染好的页面了。
使用 Ajax 请求数据
我们经常需要使用 Ajax 请求数据，并将其插入到页面中。为了实现这个功能，我们需要在服务器端获取数据，并将其传递给模板引擎。
在 routes/index.js 文件中，我们添加以下代码：
/* GET data. */
router.get('/data', function(req, res, next) {
const data = { name: 'Alice', age: 28 };
res.json(data);
});这段代码创建了一个路由 /data，当用户访问该路由时，服务器将返回一个 JSON 格式的数据。现在我们需要在客户端使用 Ajax 请求数据。
在 views/index.ejs 文件中添加以下代码：
-- -------------------- ---- -------
------- -----------------------------------------------------------
--------
------------ -
-------------- -------------- -
------------------------- - - --------- - ------------ - - -------- - --------
---
---
---------
---- ----------------这段代码使用 jQuery 发起 Ajax 请求，并在服务器返回数据后将数据插入到 div#data 元素中。
结论
通过本文，我们学习了如何使用 Express.js 进行服务器端渲染，包括设置模板引擎、创建路由、请求数据等操作。服务器端渲染可以提高页面的响应速度和 SEO 优化，是前端开发中不可缺少的技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676f6aa7e9a7045d0d72a105