page router模式下next提前注入数据方法比较以及场景

next.js提供的三种方法:getInitialProps、getServerSideProps、getStaticProps/getStaticPaths

  1. getServerSideProps(SSR,服务端每次请求执行)
    • 执行时机:每次请求都会在服务端运行
    • 适用场景:需要实时数据(比如用户相关、搜索、订单详情等)
    • 特点:不会在客户端运行,数据对搜索引擎友好
  2. getStaticProps(SSG,构建时运行)
    • 执行时机:构建时执行一次,生成静态 HTML
    • 适用场景:数据更新不频繁的页面(如博客、产品列表)
    • 特点:性能极佳,支持 revalidate 增量更新
  3. getInitialProps(通用型,SSR + 客户端均可)
    • 执行时机:
      • 第一次请求:服务端执行
      • 页面跳转时:客户端执行
    • 适用场景:_app.tsx 中需要数据注入(例如国际化、主题皮肤等)
    • 特点:已被官方推荐逐步替代(无法使用 SSG)
  4. getStaticPaths(用于动态路由下的静态生成)
    • 配合:getStaticProps 使用,生成动态路径
    • 适用场景:动态路由(如博客详情页)静态生成多个页面
对比项 getStaticProps getServerSideProps getInitialProps 客户端请求 (useEffect+fetch)
✅ 适用范围 所有静态可预渲染的页面 实时个性化页面(用户相关) _app.tsx, 页面组件 所有页面(客户端渲染)
⏱️ 执行时机 构建时执行(Build 时) 每次请求时服务端执行 首次 SSR 和客户端跳转时执行 用户访问页面后才执行
🧠 客户端运行 是(页面跳转时)
🔍 SEO 支持 ✅(静态 SEO 佳) ✅(动态 SSR) ✅(SSR 时) ❌(需 JS 执行后才有内容)
🔐 加载敏感数据 ❌(代码暴露) ✅(服务器运行) ❌(容易暴露)
⚙️ 用法复杂度 高(弃用趋势)
🚀 缓存/CDN 支持 ✅(CDN 可缓存) ❌(每次服务端请求)
🧩 中间件/拦截器支持 ✅(可通过 Rewrites/Headers) ✅(中间件支持) 部分支持
🌐 支持 next export

常用使用场景

使用场景 推荐方法 原因
静态内容(博客、文档、商品列表) getStaticProps 性能高、支持 CDN 缓存
需要实时数据(订单详情、用户中心) getServerSideProps 每次请求都会取新数据
页面首次加载和客户端跳转都要获取数据 getInitialProps(或用 AppRouter 模式 + layout.js) 通用性强但复杂,
加载语言包或皮肤配置(首次服务端获取) getServerSideProps 或 _app.tsx + getInitialProps 提前注入数据用于初始化
页面数据频繁变更但不要求实时性(如价格表) getStaticProps + revalidate 静态生成 + 增量更新

实践建议

  • 优先使用 getStaticProps:对性能和 SEO 友好,支持缓存,适合绝大多数非实时页面。
  • 实时数据或敏感信息(如登录态)用 getServerSideProps。
  • 全局预处理数据(如主题、国际化)建议 _app.tsx + getInitialProps 或 Middleware 配合 cookies 设置全局上下文。
相关推荐
玲小珑11 小时前
Next.js 教程系列(十一)数据缓存策略与 Next.js 运行时
前端·next.js
玲小珑2 天前
Next.js 教程系列(十)getStaticPaths 与动态路由的静态生成
前端·next.js
AiMuo4 天前
我用五层架构重建了整个 Next.js 项目,从污染地狱爬上了性能天堂
next.js
玲小珑4 天前
Next.js 教程系列(七)服务端渲染 (SSR) 深度探究:`getServerSideProps`
前端·next.js
玲小珑5 天前
Next.js 教程系列(九)增量静态再生 (ISR):动态更新的静态内容
前端·next.js
玲小珑15 天前
Next.js 教程系列:从入门到架构实战
前端·next.js
HoikanChan15 天前
The State of React and the Community in 2025 - 深度解析 2025 年的 React 社区现状
react.js·next.js
吴楷鹏16 天前
【Next.js】路由跳转显示进度条
前端·react.js·next.js
Lebron19 天前
如何将 Next.js 项目部署到阿里云服务器
前端·next.js
大鱼七成饱20 天前
彻底搞懂 react 的 use client
前端·javascript·next.js