✅ Next.js 渲染速查表

🔹 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 应用中是否使用了正确的渲染策略?
相关推荐
AI视觉网奇7 分钟前
音频获取长度
java·前端·python
小喷友1 小时前
第 6 章:API 路由(后端能力)
前端·react.js·next.js
像素之间1 小时前
elementui中rules的validator 用法
前端·javascript·elementui
小高0071 小时前
🚀把 async/await 拆成 4 块乐高!面试官当场鼓掌👏
前端·javascript·面试
CF14年老兵1 小时前
SQL 是什么?初学者完全指南
前端·后端·sql
2401_837088501 小时前
AJAX快速入门 - 四个核心步骤
前端·javascript·ajax
一月是个猫1 小时前
前端工程化之Lint工具链
前端
小潘同学1 小时前
less 和 sass的区别
前端
无羡仙1 小时前
当点击链接不再刷新页面
前端·javascript·html
王小发1011 小时前
快速知道 canvas 来进行微信网页视频无限循环播放的思路
前端