gatsby-ssr.js有什么作用？

一、简介

Gatsby 编译完成后，会为每个页面生成对应的 HTML 文件。而 gatsby-ssr.js 文件中提供了一些API，用于编译完成之前修改这些 HTML 的内容。

---

二、API 说明

1、onRenderBody

• 功能：生成HTML之前，修改一些body信息。

  const React = require("react")
  const Layout = require("./src/components/layout")
  
  // Adds a class name to the body element
  exports.onRenderBody = ({ setBodyAttributes }, pluginOptions) => {
    setBodyAttributes({
      className: "my-body-class",
    })
  }

---

2、wrapPageElement

• 功能：用于plugin，给元素增加一个父容器。

  const React = require("react")
  const Layout = require("./src/components/layout")
  
  // Wraps every page in a component
  exports.wrapPageElement = ({ element, props }) => {
    return <Layout {...props}>{element}</Layout>
  }

---

三、重要规则

1、一致性

gatsby-ssr.js 和 gatsby-browser.js 这两个文件中都提供了这两个API：wrapPageElement 和 wrapRootElement 。所以要保持两个文件中这两个API的代码一致性。

---

四、参考文档

• gatsby-ssr.js有什么作用？