面试题：Next.js动态路由参数默认值与数据预取的结合

Question

假设你在Next.js应用中，有一个动态路由页面`pages/user/[userId].js`，需要为`userId`设置默认值`defaultUser`。同时，该页面要基于`userId`从后端API预取用户数据。当使用默认值时，预取的数据也应是默认用户的数据。请阐述如何在`getStaticProps`或`getServerSideProps`函数中合理实现这一逻辑，包括处理API请求以及可能遇到的缓存和性能问题。

Answer 1

1. 使用getStaticProps：
   • 在pages/user/[userId].js文件中，首先定义getStaticProps函数。

   export async function getStaticProps(context) {
     const { userId = 'defaultUser' } = context.params;
     const res = await fetch(`https://your-api.com/users/${userId}`);
     const userData = await res.json();
     return {
       props: {
         userData
       },
       revalidate: 60 // 每60秒重新验证一次（可选，用于增量静态再生）
     };
   }
   

   • 缓存和性能问题：
     • 缓存：getStaticProps生成的静态页面会被缓存。如果用户数据变化频繁，使用revalidate选项（如上述代码中的revalidate: 60）可以实现增量静态再生，每隔指定时间重新生成页面。
     • 性能：由于是在构建时获取数据，可能会因为API响应时间长导致构建时间延长。可以考虑优化API性能，或者对API进行缓存。另外，如果数据变化非常频繁，getStaticProps可能不是最佳选择，getServerSideProps可能更合适。
2. 使用getServerSideProps：
   • 在pages/user/[userId].js文件中定义getServerSideProps函数。

   export async function getServerSideProps(context) {
     const { userId = 'defaultUser' } = context.params;
     const res = await fetch(`https://your-api.com/users/${userId}`);
     const userData = await res.json();
     return {
       props: {
         userData
       }
     };
   }
   

   • 缓存和性能问题：
     • 缓存：getServerSideProps每次请求都会重新获取数据，不会有静态缓存。这意味着对于频繁变化的数据可以保证实时性，但如果数据变化不频繁，会增加服务器负载。
     • 性能：每次请求都调用API可能会导致性能问题，特别是在高并发情况下。可以考虑在服务器端对API响应进行缓存，减少重复请求。例如，可以使用内存缓存（如node - cache库）来缓存API响应数据。