面试题：Next.js动态路由与静态路由在数据预取方面的差异

Question

阐述Next.js中动态路由（Dynamic Routes）和静态路由（Static Routes）在数据预取策略上有哪些不同，结合getStaticProps、getServerSideProps等方法进行分析，并且说明在不同应用场景下应如何选择合适的路由和数据预取方式。

Answer 1

动态路由与静态路由的数据预取策略差异

1. 静态路由（Static Routes）
   • 使用getStaticProps：此方法用于在构建时预取数据。对于静态路由，它会在构建过程中执行，将获取到的数据作为页面props传递。这意味着数据在构建时就确定了，适用于数据变化不频繁的场景。例如一个博客文章列表页面，文章数据更新不频繁，使用getStaticProps可以在构建时获取文章列表数据并生成静态HTML页面。
   • 数据预取时机：在构建阶段，Next.js会调用getStaticProps获取数据，并使用这些数据生成静态HTML文件。这些文件会被部署到服务器，每次请求该页面时直接返回静态内容，无需在请求时重新获取数据。
2. 动态路由（Dynamic Routes）
   • 使用getStaticProps（带context参数）：当动态路由使用getStaticProps时，context参数可用于获取动态路由参数。例如pages/post/[id].js，context中会包含params对象，其中有id值。数据依然是在构建时获取，但每个动态路由对应的页面（如不同id的文章页面）会在构建时生成对应的静态页面。不过，如果数据变化频繁，可能需要结合revalidate选项来定期重新生成静态页面。
   • 使用getServerSideProps：对于动态路由，若数据变化频繁且需要实时获取最新数据，getServerSideProps更合适。它在每次请求页面时在服务器端执行，能获取最新数据。比如一个实时股票价格显示页面，每次请求时都需要获取最新股价，就可以使用getServerSideProps。
   • 数据预取时机：使用getStaticProps时，数据在构建时预取；使用getServerSideProps时，数据在每次请求时预取。

不同应用场景下的选择

1. 数据变化不频繁的场景
   • 选择静态路由和getStaticProps：如公司介绍页面、产品文档页面等，数据更新频率低。使用静态路由和getStaticProps可以在构建时生成静态页面，提高性能和SEO友好度。构建时获取的数据直接嵌入HTML，浏览器加载页面速度快，搜索引擎也能更好地抓取内容。
2. 数据变化频繁但对实时性要求不是极高的场景
   • 选择动态路由结合getStaticProps并设置revalidate：例如电商产品列表页面，产品信息偶尔更新。使用动态路由可适应不同产品页面需求，getStaticProps在构建时生成页面，revalidate设置一个合适的时间间隔（如60秒），在此时间后重新生成静态页面，以保证数据相对新。
3. 数据实时性要求极高的场景
   • 选择动态路由和getServerSideProps：像实时聊天消息页面、实时监控数据页面等。动态路由适应不同会话或监控指标页面，getServerSideProps每次请求都获取最新数据，确保用户看到的是实时信息，但这种方式由于每次请求都在服务器端处理，可能对服务器性能有一定要求。