npm包@prerenderer/renderer-puppeteer使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

在前端开发中，SEO是一个非常重要的环节，因为它不仅影响用户体验，还影响网站的流量和搜索引擎排名。而在进行SEO时，一个比较好用的工具就是服务端渲染（SSR）。

有些框架本身就自带SSR支持，但也有许多框架不支持SSR，因此需要使用一些工具来实现。@prerenderer/renderer-puppeteer就是一种SSR工具，它的作用就是通过Puppeteer（一个支持谷歌的无界面浏览器）来渲染JS应用，并生成HTML。

安装

使用npm命令安装：

npm install --save @prerenderer/renderer-puppeteer

或者使用yarn命令：

yarn add @prerenderer/renderer-puppeteer

使用方法

基本使用

使用@prerenderer/renderer-puppeteer，我们可以轻松地实现客户端渲染应用的SSR（服务端渲染）。下面是一个例子：

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

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

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

配置项

@prerenderer/renderer-puppeteer提供了许多配置项，让我们可以根据需求进行定制，例如：

renderAfterDocumentEvent：当页面有指定的DOM事件被触发时，触发渲染
renderAfterElementExists：当页面上有指定的DOM元素存在时，触发渲染
renderAfterTime：最大渲染时间，单位是毫秒
renderUrl：指定渲染的页面URL
template：渲染后的HTML模板

const myRenderer = new Prerenderer({
  // 当#my-app元素存在时，触发渲染
  renderAfterElementExists: '#my-app',
  // 指定渲染的页面URL
  renderUrl: 'https://example.com/',
  // 模板
  template: '<!doctype html><html><head><title>{{pageTitle}}</title></head><body>{{{prerenderedHtml}}}</body></html>'
});

代码示例

下面是一个使用Vue.js创建的单页应用，我们可以使用@prerenderer/renderer-puppeteer来实现SSR。

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

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

使用@prerenderer/renderer-puppeteer，我们可以对该网站进行SEO优化，使其更容易被搜索引擎抓取。下面是示例代码：

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

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

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

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

结论

虽然@prerenderer/renderer-puppeteer并不是唯一的SSR工具，但它是一个功能强大且易于使用的工具。在使用该工具时，我们需要注意一些性能问题，例如在渲染时间上加约束，以避免无限制地等待渲染结果。使用SSR工具可以大大提升网站的SEO效果，并减少客户端渲染中的一些缺陷。

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