Next.js 中 getInitialProps 和 getStaticProps 的作用是什么？

1. getStaticProps（构建时数据获取）:
   • getStaticProps 在 Next.js 构建时运行一次，用于生成静态 HTML 页面（SSG）。适用于数据基本不变的应用。
   • 特点：提升首次加载速度和 SEO（因为页面被缓存），不支持服务器运行时访问 HTTP 上下文。返回数据作为 props 注入页面组件。
   • 典型使用：获取产品列表或博客内容，如下所示：

     export async function getStaticProps() {  
       const res = await fetch('https://api.example.com/data');  
       const data = await res.json();  
       return { props: { data } };   
     }  
     

2. getInitialProps（运行时数据获取，已逐渐弃用）:
   • getInitialProps 在页面首次加载时可能运行于服务器（SSR）或客户端导航。常用于早期 Next.js 版本处理动态数据，如身份验证相关。
   • 特点：每次请求时重新运行，可访问路由信息和 HTTP 请求上下文，但会禁用自动静态优化影响性能。代码通常置于页面顶部定义函数或使用页面组件附加方法。如：

     Page.getInitialProps = async ({ req }) => {  
       // req存在为服务端  
       const userAgent = req ? req.headers['user-agent'] : navigator.userAgent;  
       return { userAgent };  
     }  
     

3. 关键差异总结:
   • 作用时机：
     • getStaticProps：构建时运行，适合静态网站生成。
     • getInitialProps：页面加载时运行（可能服务端或客户端），适合需要动态内容的环境。
   • 性能和 SEO：getStaticProps更利于优化缓存和加载速度，getInitialProps易导致页面延迟（每个请求计算资源）。
4. 当前最佳实践推荐:
   Next.js鼓励使用较新的APIgetStaticProps（用于SSG）、getServerSideProps（用于SSR）而非易产生性能瓶颈的getInitialProps，后已在后续发行版被逐步替代。