Next.js getStaticPaths与getStaticProps使用场景相关问题咨询
问题1:不执行
next export命令是否还需要使用getStaticPaths? 不需要强制使用。getStaticPaths是动态路由搭配静态站点生成(SSG)、增量静态再生(ISR)时才需要用到的API,和是否执行next export没有绑定关系:
- 如果你动态路由用的是
getServerSideProps做服务端渲染,完全不需要写getStaticPaths - 就算你不用
next export做全量静态导出,只要你要给动态路由做预生成静态页或者ISR,才需要加getStaticPaths
问题2:路径为
/user/1的详情页,能否通过getStaticProps配合revalidate实现服务端缓存?还是除了SWR或getServerSideProps外无其他方案? 完全可以用getStaticProps+revalidate实现,这就是Next.js增量静态再生(ISR)的典型适用场景,性能远高于getServerSideProps,也不需要额外引入SWR做客户端缓存,正好匹配你60秒更新的需求。
你只需要修改原有代码的两处配置即可:
getStaticPaths中添加fallback配置,支持未预生成的用户ID访问时自动生成页面getStaticProps返回值中添加revalidate: 60配置,设置服务端缓存有效期为60秒
修改后的代码示例:
export async function getStaticPaths() { // 可预生成热门用户的路径,也可直接返回空数组,所有用户页都在首次访问时生成 return { paths: [], // blocking模式下首次访问会等待页面生成后返回,体验和SSR一致,不会出现加载态 fallback: 'blocking' } } export async function getStaticProps({ params }) { const res = await fetch(`https://.../user/${params.id}`) const user = await res.json() return { props: { user }, revalidate: 60 // 页面在服务端缓存60秒,到期后下次访问自动更新缓存 } }
问题3:在
/user/1详情页重新拉取全量数据是否属于冗余操作? 分场景判断:
- 服务端revalidate到期后拉取全量数据:不属于冗余,这是你设定的60秒更新规则的正常逻辑,用于刷新服务端缓存的页面数据
- 客户端渲染阶段额外拉取全量数据:属于冗余,
getStaticProps已经将对应数据注入到页面props中,直接用props渲染即可,不需要额外发起请求,你当前的60秒更新频率需求完全不需要客户端做额外的数据拉取。
内容的提问来源于stack exchange,提问作者aliosmankepir
相关产品推荐
相关产品推荐

