react 如何静态化
React 静态化方法
静态化（Static Generation）是指将 React 应用在构建时生成静态 HTML 文件，以提高加载速度和 SEO 友好性。以下是几种常见的静态化方法：
使用 Next.js 的静态生成功能
Next.js 提供了 getStaticProps 和 getStaticPaths 方法，用于在构建时生成静态页面。适用于内容不频繁变化的页面。
export async function getStaticProps() {
const data = await fetchData(); // 获取数据
return {
props: { data }, // 传递给页面组件
};
}Gatsby 的静态站点生成
Gatsby 是一个基于 React 的静态站点生成器，通过 GraphQL 获取数据并在构建时生成静态文件。
export const query = graphql`
query {
allMarkdownRemark {
edges {
node {
frontmatter {
title
}
}
}
}
}
`;使用 React Static
React Static 是一个轻量级的静态站点生成器，专门为 React 设计。支持动态数据获取和预渲染。
export default {
getRoutes: async () => {
const posts = await fetchPosts();
return [
{
path: '/blog',
getData: () => ({ posts }),
children: posts.map(post => ({
path: `/post/${post.id}`,
template: 'src/containers/Post',
getData: () => ({ post }),
})),
},
];
},
};手动生成静态 HTML
对于简单的 React 应用，可以通过 react-snapshot 或 react-snap 在构建后生成静态 HTML。
npm install react-snap --save-dev在 package.json 中添加：
"scripts": {
"postbuild": "react-snap"
}预渲染动态内容
对于动态内容，可以使用 getStaticPaths 预渲染所有可能的路径。
export async function getStaticPaths() {
const paths = await getAllPostIds(); // 获取所有可能的路径
return { paths, fallback: false };
}注意事项
- 静态化适合内容不频繁变化的页面，动态内容需结合服务端渲染（SSR）或客户端渲染（CSR）。
- 静态化后需重新构建以更新内容，不适合实时数据。
- 使用 CDN 托管静态文件，进一步提升性能。
