前言

Next.js给了你三把“钥匙”去开门拿数据。选错了要么页面慢得像蜗牛，要么使用者数据混乱，要么服务器天天崩。别怕，其实规则很简单：数据变不变？要不要实时，要不要SEO？按理说， 回答了这三个问题，答案就出来了。

我们用“开餐厅”来打个比方：

• 静态生成菜单印在纸上，顾客看的是纸质菜单。印刷一次管好几天永不变化。
• 服务端渲染电子黑板。每次客人来服务员现写菜单，保证最新。
• 客户端渲染客人扫码点餐，手机上的菜单是动态加载的。怎么说呢，

三种方式对应三种数据需求。

一、getStaticProps预制菜。又快又省

适用场景数据基本不变，或者你可以接受一定延迟更新。比如博客文章、产品介绍页、帮助文档。

怎么做在建立时获取数据，生成静态HTML。之后每次请求直接返回这个HTML，速度极快，还能放CDN。

// pages/posts/.jsexport async function getStaticPaths { const posts = await fetch.n);const paths = posts.map);return { paths,fallback: false };}export async function getStaticProps { const post = await fetch.n);不过，return { props: { post }。revalidate:,// 增量静态再生：60秒后重新生成，不是必须 };}

优点快、省服务器配置资源、SEO完美。缺点建立时数据必须是可得的；如果有大量页面建立时间会变长。

生活比喻预制菜包。你提前做好，客人来了热一下就能吃。适合麦当劳，话说回来，

二、getServerSideProps现点现做。永远新鲜

适用场景数据随使用者不同而变化，或者数据实时性要求极高。比如使用者个人主页、购物车、实时搜索页。

怎么做每次请求都跑到服务器上执行getServerSideProps获取数据后渲染成HTML返回。

// pages/profile.jsexport async function getServerSideProps { const { req } = context;const token = req.cookies.token;const user = await fetch.n);return { props: { user } };}

优点数据永远最新。可以读取请求上下文，适合个性化内容。缺点每个请求都调用服务器。性能比静态生成差，不能放CDN。

生活比喻餐厅里的大厨现炒。 客人点一份炒一份，味道新鲜，但慢一点，厨师也累。

三、客户端获取：扫码点餐。不占服务资源

适用场景数据实时性要求高，但SEO不关键，或者你不希望服务器压力大。比如使用者仪表盘、图表数据、实时消息列表。

怎么做在组件里用useEffect + fetch或者用SWR、React Query等库。不过，

import { useState。useEffect } from 'react';export default function Dashboard { const = useState;useEffect => { fetch .n) .n;},)，if return 

加载中...
return 

{/* 渲染数据 */}
}

优点服务器负担小。可以实时更新，适合交互密集的后台。其实，缺点首次加载有白屏。SEO不友好，按理说，

生活比喻扫码点餐。客人自己看手机菜单下单后厨房再做。菜单可以随时改但客人得先扫个码等待JS加载。怎么说呢，

四、混合模式：ISR

Next.js还提供了一个“中间态”：revalidate 参数。说起来，你依然用getStaticProps。但指定一个秒数超过这个时间后下次请求会尝试重新生成页面同时返回旧版本。这样既有静态的速度又能定期更新。

return { props: { data },revalidate: };// 每小时更新一次

适合数据偶尔变化但不希望每次请求都重新生成的场景比如电商的商品库存。

五、怎么选？决策树

1. 数据是否需要实时？

   • 是 → 是否需要SEO？是 → getServerSideProps；否 → 客户端获取，
   • 否 → 进入2

2. 数据是否依赖使用者身份？话说回来，

   • 是 → getServerSideProps
   • 否 → getStaticProps

3. 数据量巨大且变化频繁但不需要SEO？ → 客户端获取。

六、实战：一个混合使用的首页

假设首页包含顶部的最新公告、中间的产品列表、底部的使用者推荐。

• 再看公告，getServerSideProps。怎么说呢，
• 说到产品列表。getStaticProps + revalidate: 。
• 使用者推荐的观点是，客户端获取。说起来，

export default function Home { const = useState;useEffect => { fetch.n).n;},)，return;}export async function getServerSideProps { const announcement = await fetchAnnouncement;// 实时 const products = await fetchProducts;// 缓存一小时 return { props: { announcement,products }。revalidate:,// 对products有效对announcement无效因为SSR总是实时 };}`