在单页应用程序中，搜索引擎优化（SEO）是一项重要的任务。尽管现代搜索引擎具有处理 JavaScript 渲染的能力，但使用服务器渲染仍然是提高 SEO 的一种有效方法。
@motokaptia/ember-cli-prerender 是一个在服务器上预渲染 Ember.js 应用程序的 npm 包。本文将介绍如何使用 @motokaptia/ember-cli-prerender 来生成预渲染内容，并使其在应用中使用。
安装和配置
使用 @motokaptia/ember-cli-prerender，需要首先安装它：
npm install --save-dev @motokaptia/ember-cli-prerender
安装完成后，打开 ember-cli-build.js 文件，并添加以下代码：
-- -------------------- ---- -------
--- --- - --- ------------------ -
-- ---
---------------------- -
----------- -------------------
----- -
--------- -- ----- --- --
----------
-
--
-- ---
---上述代码将 ember-cli-prerender 添加到 Ember.js 应用程序中，并配置了要预渲染的 URL 列表。除此之外，也可以配置输出路径。
生成预渲染内容
运行以下命令生成预渲染内容：
ember build --environment=production
运行完成后，预渲染内容将位于指定路径（例如：dist/prerendered/about.html）下。
应用预渲染内容
@motokaptia/ember-cli-prerender 生成的预渲染内容是静态 HTML 页面。我们需要将这些页面加载到应用程序中。
修改 router.js 文件，使其加载预渲染内容：
-- -------------------- ---- -------
------ ------ ---- ------------------------
------ - ------ -- ------- - ---- -----------------
----- ------------------- - ---------------
----------------- ----------
------ -
--------------------------
-- ------------------------------- -
--------------------
-
--
-------------- -
----- ------ - -----
------------------------- -----------
----- ----------- - ------------------------------------
------------------------------------ -- -
----------------- -
--------- ----------------
---
---
-
---
---------------------------------- -
-- ----
---上述代码添加了一个名为 prerenderService 的服务，该服务提供了所需的功能。然后，我们可以将静态页面映射到应用程序中的路由中。这里的 staticPages 变量是预渲染内容的字典，其键是 URL，值是预渲染内容的 HTML。
最后，我们需要在 application.hbs 文件中添加以下代码：
{{#if prerenderService.enabled}}
{{outlet}}
{{else}}
{{content-for 'body'}}
{{/if}}上述代码基于 prerenderService 服务的使能状态，决定是否呈现动态内容。若服务未使能，则渲染动态内容；否则，渲染静态内容。
示例代码
以下是完整的示例代码：
ember-cli-build.js
-- -------------------- ---- -------
--- --- - --- ------------------ -
-- ---
---------------------- -
----------- -------------------
----- -
---------
----------
-
--
-- ---
---router.js
-- -------------------- ---- -------
------ ------ ---- ------------------------
------ - ------ -- ------- - ---- -----------------
----- ------------------- - ---------------
----------------- ----------
------ -
--------------------------
-- ------------------------------- -
--------------------
-
--
-------------- -
----- ------ - -----
------------------------- -----------
----- ----------- - ------------------------------------
------------------------------------ -- -
----------------- -
--------- ----------------
---
---
-
---
---------------------------------- -
-- ----
---application.hbs
{{#if prerenderService.enabled}}
{{outlet}}
{{else}}
{{content-for 'body'}}
{{/if}}总结
使用 @motokaptia/ember-cli-prerender 预渲染 Ember.js 应用程序非常容易，只需要几个简单的配置设置和几行 JavaScript 代码。预渲染内容有助于优化应用程序的 SEO，同时提高速度，使页面的加载时间更短。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcc967216659e2447a3