当前位置：首页 > React

react如何静态化

2026-01-24 12:47:07React

React 静态化的方法

静态化（Static Generation）是指将 React 应用在构建时生成静态 HTML 文件，以提高加载速度和 SEO 友好性。以下是几种常见的实现方式：

使用 Next.js 的静态生成功能

Next.js 是一个流行的 React 框架，内置了静态生成功能。通过 getStaticProps 和 getStaticPaths 可以在构建时生成静态页面。

// pages/index.js
export async function getStaticProps() {
  const data = await fetchData(); // 获取数据
  return {
    props: { data }, // 传递给页面组件
  };
}

function HomePage({ data }) {
  return <div>{data}</div>;
}

export default HomePage;

使用 Gatsby

Gatsby 是一个专为静态网站设计的 React 框架，通过插件系统可以轻松实现数据获取和静态页面生成。

// gatsby-node.js
exports.createPages = async ({ actions }) => {
  const { createPage } = actions;
  const result = await fetchData(); // 获取数据
  createPage({
    path: "/page",
    component: require.resolve("./src/templates/page.js"),
    context: { data: result },
  });
};

使用 React DOM Server

通过 react-dom/server 的 renderToStaticMarkup 或 renderToString 方法，可以在 Node.js 环境中将 React 组件渲染为静态 HTML。

import { renderToStaticMarkup } from "react-dom/server";
import App from "./App";

const html = renderToStaticMarkup(<App />);
fs.writeFileSync("index.html", html);

预渲染工具（如 prerender-spa-plugin）

对于已有的单页应用（SPA），可以使用 webpack 插件 prerender-spa-plugin 在构建时生成静态 HTML。

// webpack.config.js
const PrerenderSPAPlugin = require("prerender-spa-plugin");

module.exports = {
  plugins: [
    new PrerenderSPAPlugin({
      staticDir: path.join(__dirname, "dist"),
      routes: ["/", "/about"],
    }),
  ],
};

静态化动态内容

对于动态内容，可以通过增量静态生成（ISR）或客户端渲染（CSR）结合静态化。

// Next.js 的增量静态生成
export async function getStaticProps() {
  const data = await fetchData();
  return {
    props: { data },
    revalidate: 60, // 每60秒重新生成
  };
}