Create React App 预渲染静态 HTML 文件

在使用 Create React App 进行前端开发时，有时候我们希望将 React 组件渲染成静态 HTML 文件，以提高页面加载速度和搜索引擎优化。这个过程就是预渲染静态 HTML。

使用 react-snap

一个常用的工具是 react-snap，它可以帮助我们将 React 应用程序预渲染成静态 HTML 文件。

首先，我们需要安装 react-snap：

npm install react-snap

然后，在项目的 package.json 文件中添加以下脚本：

"scripts": {
  "predeploy": "react-snap",
  "deploy": "gh-pages -d build"
}

接着，运行以下命令进行预渲染：

npm run build
npm run predeploy

最后，将静态文件部署到服务器或静态网站托管服务上。

预渲染路由

如果我们希望只预渲染特定的路由，可以在 react-snap 的配置文件中进行配置。创建一个名为 snap.js 的文件，内容如下：

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

然后，在 package.json 文件中修改 predeploy 脚本为：

"scripts": {
  "predeploy": "react-snap --config snap.js",
  "deploy": "gh-pages -d build"
}

运行相同的命令进行预渲染和部署。

通过预渲染静态 HTML，我们可以提高页面加载速度，并且更好地支持搜索引擎优化。这对于提升用户体验和网站的可访问性非常重要。