✅ Next.js 渲染速查表

CF14年老兵2025-08-02 9:48

🔹 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 应用中是否使用了正确的渲染策略？