✅ 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 应用中是否使用了正确的渲染策略?
相关推荐
siroi2 分钟前
【nginx】NJS 的简单实践
前端
饮水机战神3 分钟前
震惊!多核性能反降11%?node接口压力测试出乎意料!
前端·node.js
一只叁木Meow4 分钟前
JavaScript数学库深度对比
前端
顾辰逸you6 分钟前
uniapp--咸虾米壁纸项目(一)
前端·微信小程序
方方洛21 分钟前
电子书阅读器:epub电子书文件的解析
前端·产品·电子书
idaibin21 分钟前
Rustzen Admin 前端简单权限系统设计与实现
前端·react.js
GISer_Jinger27 分钟前
Trae Solo模式生成一个旅行足迹App
前端·javascript
zhangbao90s28 分钟前
Intl API:浏览器原生国际化API入门指南
前端·javascript·html
艾小码31 分钟前
构建现代前端工程:Webpack/Vite/Rollup配置解析与最佳实践
前端·webpack·node.js
跟橙姐学代码36 分钟前
Python 集合:人生中最简单的真理,只有一次
前端·python·ipython