react 如何静态化
React 静态化的方法
React 静态化通常指将动态生成的 React 应用转换为静态 HTML 文件，以提高加载速度和 SEO 友好性。以下是几种常见的实现方法：
使用 Next.js 的静态导出功能
Next.js 提供了静态导出功能，可以将 React 应用预渲染为静态 HTML 文件。在 next.config.js 中配置 output: 'export'，运行 next build 时会生成静态文件。
// next.config.js
module.exports = {
output: 'export',
};构建后的文件位于 out 目录，可直接部署到任何静态托管服务（如 Vercel、GitHub Pages）。
使用 Gatsby 生成静态站点
Gatsby 是一个专注于静态站点的 React 框架。通过插件系统获取数据（如 Markdown、CMS 等），生成优化的静态文件。
安装 Gatsby 并初始化项目：
npm install -g gatsby-cli
gatsby new my-static-site运行 gatsby build 生成静态文件到 public 目录。
使用 React 的 react-snap 预渲染
react-snap 是一个库，可在构建阶段对 React 应用进行预渲染，生成静态 HTML 文件。
安装并配置：
npm install --save-dev react-snap在 package.json 中修改构建脚本：
"scripts": {
"build": "react-scripts build && react-snap"
}自定义 Webpack 配置生成静态 HTML
通过 Webpack 的 html-webpack-plugin 生成静态 HTML 文件。结合 prerender-spa-plugin 可实现路由的静态化。
配置示例：
const PrerenderSPAPlugin = require('prerender-spa-plugin');
module.exports = {
plugins: [
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, 'dist'),
routes: ['/', '/about'],
}),
],
};使用静态站点生成器（SSG）
如 Docusaurus（文档站点）、Eleventy（通用 SSG）等工具，支持 React 组件并输出静态内容。适用于博客、文档等场景。
注意事项
- 动态内容处理：静态化后无法直接处理客户端动态交互，需通过 API 或 hydration 补充。
- 路由兼容性：确保路由与静态文件路径匹配（如使用 HashRouter 或配置服务器重定向）。
- 构建优化：静态化后可通过 CDN 加速，减少服务器负载。
根据项目需求选择合适的工具，动态内容较多的应用可结合服务端渲染（SSR）与静态化（SSG）混合使用。
