Next.js 数据获取策略：SSG、SSR 与客户端渲染的最佳实践

import React, { useEffect, useState } from 'react';
<p>function MyDashboard() {
const [userData, setUserData] = useState(null);
const [loading, setLoading] = useState(true);</p><p>useEffect(() => {
async function fetchUserData() {
try {
const response = await fetch('/api/user/profile'); // 客户端发起请求
const data = await response.json();
setUserData(data);
} catch (error) {
console.error('获取用户数据失败:', error);
} finally {
setLoading(false);
}
}
fetchUserData();
}, []); // 空依赖数组表示只在组件挂载时执行一次</p><p>if (loading) return <p>加载用户数据中...</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1586">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680266786298.png" alt="乾坤圈新媒体矩阵管家">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1586">乾坤圈新媒体矩阵管家</a>
                            <p>新媒体账号、门店矩阵智能管理系统</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="乾坤圈新媒体矩阵管家">
                                <span>219</span>
                            </div>
                        </div>
                        <a href="/ai/1586" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="乾坤圈新媒体矩阵管家">
                        </a>
                    </div>
                ;
if (!userData) return <p>未能加载用户数据。</p>;</p><p>return (
<div>
<h1>欢迎, {userData.name}!</h1>
<p>您的邮箱: {userData.email}</p>
{/<em> 更多用户个性化内容 </em>/}
</div>
);
}</p><p>export default MyDashboard;

import React from 'react';
<p>function BlogPost({ post }) {
return (
<div>
<h1>{post.title}</h1>
<p>作者: {post.author}</p>
<div dangerouslySetInnerHTML={{ __html: post.content }} />
</div>
);
}</p><p>// 在构建时运行，用于获取页面所需的 props
export async function getStaticProps(context) {
// context.params.slug 来自 getStaticPaths
const { slug } = context.params; 
const res = await fetch(https://www.php.cn/link/ebc004ec5144030d8c365456db040dc1/${slug});
const post = await res.json();</p><p>if (!post) {
return {
notFound: true, // 如果文章不存在，返回404页面
};
}</p><p>return {
props: {
post,
},
revalidate: 60, // 可选：每60秒重新验证一次数据（ISR）
};
}</p><p>// 在构建时运行，用于定义所有可能的动态路径
export async function getStaticPaths() {
const res = await fetch('<a href="https://www.php.cn/link/ebc004ec5144030d8c365456db040dc1" rel="nofollow" target="_blank" >https://www.php.cn/link/ebc004ec5144030d8c365456db040dc1</a>');
const posts = await res.json();</p><p>const paths = posts.map((post) => ({
params: { slug: post.slug },
}));</p><p>return {
paths,
fallback: 'blocking', // 'blocking' 会在请求时生成新页面，'false' 会返回404，'true' 会在客户端回退
};
}</p><p>export default BlogPost;