在这个现代化的 Web 开发时代，单页面应用（SPA）已经成为了主流。SPA 的核心优势是可以将整个 Web 应用程序逻辑全部交给前端应用程序来完成，从而使后端业务逻辑变得简单化。但是，由于 SPA 大量依赖于 JavaScript 来进行渲染和操作，这样的应用程序在一些 SEO 和性能方面存在一些缺陷。这时候就需要使用预渲染技术来解决这些问题。
在本文中，我们将介绍如何使用 npm 包 aurelia-ssr-engine 借助预渲染技术来解决 SPA 的 SEO 和性能问题。
什么是预渲染技术？
预渲染是指在运行时将页面中的内容提前预先渲染并生成静态 HTML 页面。这样可以达到如下几个目的：
- 提升 SEO：因为搜索引擎爬取网页时需要访问的是静态 HTML 文件，而不是 JavaScript 生成的内容；
- 提升性能：用户请求页面时，无需等待服务端渲染，直接返回静态 HTML；
- 兼容性：一些浏览器或搜索引擎可能不支持 JavaScript，预渲染可以进行优雅降级
使用预渲染技术可以利用现有的 SPA 应用，同时还能获得更佳的 SEO 和性能效果。
aurelia-ssr-engine 是什么？
aurelia-ssr-engine 是一个适用于 Aurelia 引擎的预渲染工具包，其支持在服务端预渲染客户端内容。它会通过收集客户端 Aurelia 应用实例及其上下文，然后使用模板替换模块、模板工厂与数据绑定等进行渲染。最后生成的 HTML 页面就可以通过服务端直接返回，从而达到预渲染的效果。
下面我们将详细介绍如何安装和使用 aurelia-ssr-engine 。
安装
要安装 aurelia-ssr-engine，只需要运行以下命令行即可：
npm install aurelia-ssr-engine --save
使用和配置
aurelia-ssr-engine 需要以下三个参数来运行：
- appModuleId：作为基础的应用程序实例的主要模块标识符；
- aurelia:
Aurelia的实例，可以自动检测和装载主要应用程序模块。 - renderToString: 用于在服务端运行
Aurelia应用程序的函数，接受一个requestUrl参数，然后将内容渲染并返回。
下面，我们来看一个例子。我们将使用 express 库作为后端环境。首先，我们需要在服务端完成以下几步：
- 在服务端可以使用
aurelia-ssr-engine返回响应的express实例中，引入需要使用的库和文件。
const path = require('path');
const express = require('express');
const { Aurelia } = require('aurelia-framework');
const aurSSR = require('aurelia-ssr-engine');- 创建一个新的
express应用程序 并启用处理静态资源的中间件
const app = express();
app.use(express.static('public'));- 配置
Aurelia的实例
const aurelia = new Aurelia()
.register(
// 在这里注册你需要使用的所有的组件和库
);- 所有的代码都已经准备好了。现在，我们需要向服务器添加路由并启动服务：
-- -------------------- ---- -------
------------ ----- ----- ---- -- -
--- -
----- - ---- - - ----- --------
------------ -------
--------
--------------- ------------ -- -
------ -----------------------
------------------------------
----------
--
-
---
---------------
- ----- ------- -
-------------------
---------------------------- -- --------------------------
-
---
---------------- -- -- -
---------------------- -- ---- ---- ------
---至此，我们已经搭建好了服务端项目，并且可以使用预渲染技术渲染出我们需要的 HTML 页面。
简单示例
我们可以使用以下代码，来实现一个超级简单的使用 aurelia-ssr-engine 的例子：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
----- - ------- - - -----------------------------
----- ------ - ---------------
----- --- - ----------
------------------------------------------- -------
------------------------------------------- ----------------------------------------
------------------------------------------- -----------------------------------------
----- ------- - --- ---------
----------
--------
-- --------------
--
------------ ----- ----- ---- -- -
--- -
----- - ---- - - ----- --------
------------ -------
--------
--------------- ------------ -- -
------ -----------------------
------------------------------
----------
--
-
---
---------------
- ----- ------- -
-------------------
---------------------------- -- --------------------------
-
---
--------------------------- -- ----- -- -- -
---------------------- -- ---- ----------
---在这个简单的示例中，我们会发现当我们访问 localhost:3000 时，页面会默认显示 404 页面。这是因为我们没有添加路由。我们需要在 router.js 中添加一下代码：
export const RouterConfiguration = [
{ route: '', name: 'Home', moduleId: './pages/home', nav: true, title: 'Aurelia' },
{ route: 'about', name: 'About', moduleId: './pages/about', nav: true, title: 'About Aurelia' },
];如果你前面有阅读过 Aurelia 的相关文章，你应该已经熟悉了。现在，我们已经在服务端实现了基本的预渲染技术。
总结
aurelia-ssr-engine 是一个非常好的预渲染工具包，适用于 Aurelia 引擎。利用它，我们可以为我们的 SPA 应用程序带来更好的 SEO 和性能。在本文中，我们详细介绍了如何使用和配置它，并还提供了一个示例项目，供大家参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572f981e8991b448e9209