面试题：Next.js 中 getStaticProps 与 getServerSideProps 的适用场景差异

getStaticProps 适用场景及原因

适用场景：适用于页面数据不经常变化，并且可以在构建时生成的场景。例如博客文章页面、产品详情页等。
原因：
- 性能优势：在构建时生成 HTML 页面，用户访问时直接获取静态页面，大大提高了页面加载速度。这对于内容相对固定的页面非常友好，因为减少了运行时的数据请求。
- SEO 友好：搜索引擎爬虫更容易抓取静态页面内容，有利于提高页面在搜索引擎中的排名。

示例：一个个人博客的文章页面，文章内容更新频率较低。假设博客文章数据存储在 CMS（如 Contentful）中。

import React from 'react';
import { getAllPosts } from '../lib/api';

const Post = ({ post }) => {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
};

export async function getStaticProps(context) {
  const post = await getAllPosts(context.params.id);
  return {
    props: {
      post
    },
    revalidate: 60 * 60 * 24 // 一天后重新验证，适用于数据有一定更新频率但不高的场景
  };
}

export async function getStaticPaths() {
  const posts = await getAllPosts();
  const paths = posts.map(post => ({
    params: { id: post.id.toString() }
  }));
  return { paths, fallback: false };
}

export default Post;

getServerSideProps 适用场景及原因

适用场景：适用于需要实时数据的页面，例如用户个人信息页面、实时统计数据页面等。
原因：
- 实时性：每次请求页面时，都会在服务器端执行 getServerSideProps 函数获取最新数据，确保用户看到的是最新信息。
- 个性化：可以根据用户请求的上下文（如 cookie、headers 等）返回个性化的数据。

示例：一个用户个人信息页面，展示用户的最新订单数量等实时数据。假设订单数据存储在数据库中。

import React from'react';
import { getOrderCount } from '../lib/api';

const UserProfile = ({ orderCount }) => {
  return (
    <div>
      <h1>User Profile</h1>
      <p>Your order count: {orderCount}</p>
    </div>
  );
};

export async function getServerSideProps(context) {
  const userId = context.req.cookies.userId; // 获取用户 ID，假设已通过 cookie 设置
  const orderCount = await getOrderCount(userId);
  return {
    props: {
      orderCount
    }
  };
}

export default UserProfile;

星途面试题库

面试题：Next.js 中 getStaticProps 与 getServerSideProps 的适用场景差异

知识考点

面试题答案

getStaticProps 适用场景及原因

getServerSideProps 适用场景及原因