当前位置：首页 > React

react如何静态化

2026-03-10 21:09:16React

React 静态化的方法

React 应用静态化（Static Site Generation, SSG）可以通过多种方式实现，以下是常见的几种方法：

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

Next.js 提供了内置的静态生成支持，可以通过 getStaticProps 和 getStaticPaths 实现页面预渲染。

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

对于动态路由页面，可以使用 getStaticPaths 生成所有可能的路径：

export async function getStaticPaths() {
  const paths = await generatePaths(); // 生成路径列表
  return { paths, fallback: false };
}

使用 Gatsby 构建静态站点

Gatsby 是一个专门用于构建静态站点的 React 框架，通过插件系统可以轻松集成数据源并生成静态页面。

// 在 gatsby-node.js 中动态创建页面
exports.createPages = async ({ actions }) => {
  const { createPage } = actions;
  const result = await fetchData();
  result.forEach((item) => {
    createPage({
      path: `/item/${item.id}`,
      component: require.resolve("./src/templates/item.js"),
      context: { item },
    });
  });
};

使用 React 的渲染 API 生成静态 HTML

React 提供了 ReactDOMServer API，可以直接将组件渲染为静态 HTML 字符串。

import ReactDOMServer from "react-dom/server";
import App from "./App";

const html = ReactDOMServer.renderToString(<App />);
// 将 html 保存为静态文件

使用静态站点生成工具

工具如 react-static 或 vite-plugin-ssr 可以简化静态化流程，自动处理路由和数据加载。

// react-static 配置示例
export default {
  getRoutes: async () => {
    const data = await fetchData();
    return [
      { path: "/", component: "src/pages/Home" },
      { path: "/about", component: "src/pages/About" },
    ];
  },
};

预渲染动态内容

对于动态内容，可以在构建时通过模拟数据或调用 API 预渲染页面，生成静态 HTML。

// 示例：在构建时获取数据并生成页面
const buildPages = async () => {
  const data = await fetchAPI();
  data.forEach((item) => {
    const html = renderToStaticMarkup(<ItemPage item={item} />);
    fs.writeFileSync(`dist/${item.id}.html`, html);
  });
};