面试题：Next.js 中 getServerSideProps 的常见应用场景及实现原理

Question

请阐述 Next.js 里 getServerSideProps 主要应用在哪些场景，比如在内容管理系统、电子商务平台等场景下的作用。并简要说明它是如何实现服务器端数据获取的。

Answer 1

应用场景

1. 内容管理系统（CMS）：
   • 用于在页面渲染时从 CMS 服务器获取最新的文章、页面等内容数据。比如博客系统，通过 getServerSideProps 可以在每次请求页面时，从数据库或 CMS 接口获取最新的文章列表、文章详情等数据，保证用户看到的是最新的内容，而不是缓存中旧的数据。
   • 方便进行内容的本地化展示。例如，根据用户请求的语言或地区，从 CMS 获取相应语言或地区特定的内容进行渲染。
2. 电子商务平台：
   • 获取实时的商品数据，如商品详情、库存数量等。在用户访问商品页面时，通过 getServerSideProps 从后端数据库获取最新的商品库存信息，确保用户看到准确的库存状态，避免下单后才发现无货的情况。
   • 进行价格调整等动态数据的获取。如果商品价格根据市场情况、促销活动等动态变化，通过 getServerSideProps 可以在页面请求时获取最新价格展示给用户。

服务器端数据获取实现

1. 在页面组件中定义 getServerSideProps 函数：
   • 在 Next.js 页面文件（如 pages/index.js）中，导出一个名为 getServerSideProps 的异步函数。

   export async function getServerSideProps(context) {
     // 这里开始服务器端数据获取逻辑
   }
   

2. 发起数据请求：
   • 可以使用 fetch 等方式向后端 API 发起请求获取数据。例如，获取博客文章列表：

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

3. 返回数据给页面组件：
   • getServerSideProps 函数返回一个对象，其中 props 字段包含要传递给页面组件的数据。页面组件通过接收这些 props 来渲染数据。例如，在页面组件中：

   function HomePage({ articles }) {
     return (
       <div>
         {articles.map(article => (
           <div key={article.id}>{article.title}</div>
         ))}
       </div>
     );
   }
   export default HomePage;
   

   • Next.js 在每次请求该页面时，会在服务器端执行 getServerSideProps 函数，获取数据并将其作为 props 传递给页面组件，从而实现服务器端数据获取和页面渲染。