🔹 SSG(静态站点生成)
在构建时将页面预渲染为静态 HTML,以实现快速性能。
🔹ISR (增量静态再生)
按照设定的间隔或触发器在后台重新生成静态页面。
🔹 SSR(服务器端渲染)
每次请求时使用服务器上最新的动态数据呈现页面。
🔹 CSR(客户端渲染)
加载空白外壳并在加载后在浏览器中获取/呈现内容。
💥渲染模式概述

🚀 快速设置指南
✅ SSG -- 应用路由器中的默认设置
js
// app/page.tsx
export const revalidate = 3600; // Optional: Regenerate every 1 hour
export default async function Page() {
const res = await fetch('https://api.example.com/posts');
const posts = await res.json();
return <div>{posts.length} posts</div>;
}
🔁 ISR -- 添加重新验证间隔
js
export const revalidate = 60;
// Rebuild page every 60 seconds
🔄 SSR -- 始终获取最新数据
js
export const dynamic = 'force-dynamic'; // or use cache: 'no-store'
const data = await fetch('https://api.example.com/stats', {
cache: 'no-store'
});
🌐 CSR -- 仅客户端渲染
js
'use client';
import { useEffect, useState } from 'react';
export default function ClientComponent() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('/api/data').then(res => res.json()).then(setData);
}, []);
return <pre>{JSON.stringify(data)}</pre>;
}

🧭什么情况下该使用什么模式?
swift
📝 静态内容?→ SSG
🔁 每隔几分钟刷新一次?→ ISR
👤 身份验证数据还是实时数据?→ SSR
🧩 完全交互式 UI?→ CSR
📌最后的提示
vbnet
✅ SSG 是 App Router 中的默认设置(除非您禁用缓存)
⚠️仅在绝对必要时使用"使用客户端"
🔀 混合搭配策略:服务器渲染的页面+客户端组件=⚡强大的用户体验
🎯 在你的 Next.js 应用中是否使用了正确的渲染策略?