Angular SPA 中的页面预渲染-JavaScript中文网-JavaScript教程资源分享门户

前言：页面预渲染（SSR）技术是目前前端界的一项热门技术，它不仅可以提高网站的性能，而且可以增强网站在SEO上的表现。在利用Angular SPA开发网站时如何进行页面预渲染成了一个必须得到解决的问题。在此，我们将向大家详细介绍如何通过Angular框架来实现SPA中的页面预渲染。

一、什么是Angular SPA

Angular 是一个基于 TypeScript 的开源前端 Web 应用程序框架，由 Google 维护和开发。Angular 是一个面向单页面应用（Single Page Application（SPA））的 Web 应用程序框架。在单页面应用中，应用程序将所有必要的 HTML、JavaScript 和 CSS 都作为一个单独的页面加载并交互。而在用户导航时，Angular 负责动态地重新呈现页面，而不是从服务器获取新页面。

单页面应用的好处是带来很好的用户体验，但缺点是跟SEO有点功过。由于单页面应用不是每次请求都去服务器取得页面，而是之后如果需要的话才更新数据，所以，搜索引擎不能够获得应用程序的完整内容。这就大大降低了SEO的效率，此时，就需要我们了解一下 Angular SPA 的预渲染技术。

二、页面预渲染的原理

在 Angular SPA 中，开发者可以使用 Angular Universal 来实现页面预渲染。Angular Universal 可以把服务器端生成的 HTML 文档发送给浏览器，使搜索引擎可以找到你的内容。而对于普通用户，就好像是单页面应用一样的用户体验。

Angular Universal 的主要功能是使应用程序在服务器上预渲染成 HTML，在浏览器中使用 JavaScript 运行该应用程序。为了预渲染应用程序，我们需要将其应用程序改造成在服务器端和客户端都可以运行的形式。

这里说一下Angular的预渲染是如何发挥SEO的作用的。在SPA中，当用户进行某些特定的操作时候，比如搜索关键字、浏览列表之类会请求并显示新数据的事件时候，对于搜索引擎来说，它是看不到这些数据的，只能看到刚刚加载页面的内容。这时，预渲染技术就要派上用场了。当搜索引擎用户访问站点时，我们可以通过在服务器端预渲染这些特定于数据的时间，在这个过程中生成包含所有数据的静态HTML页面，从而让搜索引擎能看见所有内容，从而建立更好的SEO。

三、Angular Universal 的工作原理

一个简单的 Angular Universal 页面如下所示：

-- -------------------- ---- -------
------
  ----------- -------------
  ----- ------------------ ---------- ---- ---------------
  ----- ---------- ------------------- ------------------ --
-------
------
  ---------------------
  ------- ---------------------- ------------------------------
-------

在首次加载该页面时，请求会到达 web 服务器上的 Express 应用程序，该应用程序会使用 Angular Universal 服务来预渲染该页面。Angular Universal 服务创建一个隔离的应用程序环境，使用 Angular 渲染器来呈现该应用程序。调用 renderModuleFactory 命令将 AppComponent 渲染成 HTML 页面并返回浏览器。

Angular Universal 的使用

下面我们具体介绍如何使用 Angular Universal 来进行页面预渲染。

第一步：安装Angular Universal

ng add @nguniversal/express-engine

安装结束后你会发现package.json文件中多了这几个packages, 说明已经正确安装。

"dependencies": {
    "@nguniversal/common": "^13.0.1",
    "@nguniversal/express-engine": "^13.0.1",
    "@nguniversal/module-map-ngfactory-loader": "^13.0.1",
}

第二步：重构项目文件

由于我们需要使用 Angular Universal 在服务器端渲染应用程序，我们需要在项目中引入一些新的文件，以及对现有代码进行一些修改。

我们来看看基本的 Angular 应用程序文件结构：

app/
|-app.component.ts
|-app.module.ts
|-app.server.module.ts
|-app.routing.module.ts
|-app.browser.module.ts

我们添加的两个新文件如下所示：

server.ts
webpack.server.config.ts

修改一下 package.json 文件文件 scripts 命令：

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    ...
    "build:server": "ng build --prod --server",
    "webpack:server": "webpack --config webpack.server.config.ts --progress --colors",
    "serve:server": "node dist/server.js"
  },

第三步：编写服务端渲染文件

我们创建一个名为 server.ts 的新文件，并添加以下代码：

-- -------------------- ---- -------
------ ---------------
------ - --------------- - ---- ------------------------------
------ - -- ------- ---- ----------
------ - ---- - ---- -------

------ - --------------- - ---- --------------------

----- --- - ----------

----- ----------- - ------------------- ----------------

------------------ -----------------
    ---------- ---------------
----

------------- -------- --------
---------------- -------------

-------------------------------------

-------------- --------------------------- -
    ------- ----
----

------------ ----- ---- -- -
    ------------------- - --- ---
---

---------------- -- -- -
    ------------------- ------- -- ---- -------
---

该文件会启动你的 Web 服务器，让你的 Angular 应用程序在服务器端自动预渲染。

第四步：配置 webpack.server.config.ts

我们创建一个名为webpack.server.config.ts的新文件，并添加以下代码，在webpack里面配置的proxy是为了避免服务器端渲染路由出现问题

-- -------------------- ---- -------
------ - ---- - ---- -------
------ - ---------- - ---- -----
------ - -------------------- - ---- -------------------

----- -------- - ------------------- -----------------

----- ---------- - ------------------- ----------

------ ----- ------------------- - -
    ----- --------------
    ------ ---------
    ------- -------
    -------- - ----------- ------- ------ --
    ------- -
        --------- ------------
        ----- ----------
    --
    ------- -
        ------ -
            -
                ----- --------
                ------- ------------------
            --
            -
                ----- ----------
                ------- -------------
            --
            -
                ----- ------------------------------------------------
                ------- -------------
            --
            -
                ----- ------------------------------------------
                ------- -------------
            -
        --
    --
    -------- -
        --- ----------------------
            --------- -----------------------
            ------------ --------------------------------------------
            ---- ----
        --
    --
    ----- -
        -- ---------- --- ------- -----
        ---------- -----
    -
--

第五步：切换你的 Angular 应用程序

当新的 Web 服务器和 Webpack 配置完毕，那么就可以保存和重新打包 Angular 应用程序了。在打包之前，要先做准备工作，如下：

为 src / app / app.server.module.ts 创建一个新 moduleMapProvider 方法：

-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ---------------------------
------ - --------------------- - ---- -------------------------------------------
------ - ------------ - ---- ------------------
------ - --------- - ---- ---------------
------ - ---------------- - ---- -----------------------

------ -------- ------------------- -
  ------ ---------------------------
-

-----------
  -------- -
    ----------
    -------------
    -----------------
    ---------------------
  --
  ---------- -
    - -------- ------------------------ --------- ---- --
    - -------- ------------------------ ----------- -- -- ------------------- ---
  ---------- --------------
--
------ ----- --------------- - -

这里建立了一个新的模块，名为AppServerModule，其中的providers子活儿做了很多的工作，这里我们只需要知道，它会确保你的应用程序在正常情况下起作用并允许我们对每个URL进行服务器-side预渲染.

对于我们的 AppModule，需要导出一个新的 AppModule 类：

-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------

------ - ------------ - ---- ------------------

-----------
  -------- -
    --------------
  --
  ------------- ---------------
  ---------- ---------------
--
------ ----- --------- - -

它是Angular的标准应用模块，bootstrap元素的定义告诉Angular要渲染AppComponent组件。这里，我们几乎做到了所有的新东西。现在可以使用Angular CLI的build命令来打包应用程序。

ng build --prod --bundleDependencies all

运行此命令后，会生成一个新目录dist，在该目录中，我们可以找到：server.js。执行 npm run build:server 命令来打包我们的应用程序。

运行 npm run webpack:server命令生成Webpack要使用的新配置。

然后，我们只需在终端中使用命令行启动服务器：

npm run serve:server

这样，我们就实现了Server端的预渲染。

第六步：验证预渲染

打开localhost:3000，我们可以在页面源代码中看到预渲染的内容。这里展示了一个简单的基于Angular的动态应用。

四、总结

对于那些构建对SEO很关键的应用程序的工程师来说，Angular Universal 提供了一种简单的方法，通过服务器端预渲染，给搜索引擎提供丰富的内容。虽然有了Angular Universal，我们就不用为这种技术耗费许多时间和精力，预渲染技术也变得相对简单了许多。

五、参考

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64a64f7d48841e98942e89ba