npm 包 `prerender-node` 使用教程

阅读时长 4 分钟读完

什么是 prerender-node?

prerender-node 是一个用于预渲染 JavaScript 应用程序的中间件。它能够解决搜索引擎爬虫无法正确渲染 JavaScript 应用程序的问题,从而提高应用程序的可发现性和 SEO。

安装

要使用 prerender-node,您需要在 Node.js 项目中安装它:

使用

中间件

要将 prerender-node 作为中间件使用,您需要以下代码:

此代码将对所有请求使用 prerender-node 进行预渲染。

配置

您可以使用选项来配置 prerender-node。下面是一些常用的选项:

  • prerenderServiceUrl:指定要使用的 Prerender 服务的 URL。
  • beforeRender:注册一个函数,在页面被渲染之前运行。
  • afterRender:注册一个函数,在页面被渲染之后运行。

例如,以下代码将指定使用本地 Prerender 服务并注册一个 beforeRender 函数:

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

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

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

使用示例

以下是一个使用 prerender-node 的完整示例。我们将创建一个包含一些 JavaScript 渲染的页面的简单 Express 应用程序,并使用 prerender-node 对这些页面进行预渲染。

首先,安装所需的依赖项:

然后,在项目根目录下创建一个 views 文件夹,并在其中创建一个名为 index.ejs 的文件。此文件将用于呈现我们的主页。

index.ejs 文件内容如下:

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

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

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

接下来,创建一个名为 server.js 的文件,并将以下代码添加到文件中:

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

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

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

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

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

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

现在,我们可以通过运行以下命令启动服务器:

最后,打开浏览器并访问 http://localhost:3000/。您应该能够看到一条消息,其中包含“Hello, World!”。

如果您查看 Prerender 日志,您应该可以看到它已经对页面进行了预渲染。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/55082

纠错
反馈