面试题：Next.js 中 getStaticProps 的数据获取时机及应用场景

获取数据时机

在构建时（build time）获取数据。Next.js 会在构建阶段调用 getStaticProps 方法来获取数据，然后将获取到的数据与页面组件一起生成静态 HTML 文件。这样，当用户请求页面时，直接返回预先生成好的 HTML，无需等待实时的数据请求，从而实现快速加载。

实际应用场景

博客文章展示：假设你有一个博客网站，文章内容存储在数据库中。可以使用 getStaticProps 在构建时从数据库中获取所有文章的标题、摘要、发布日期等信息。例如，使用 mongoose 连接 MongoDB 数据库，在 getStaticProps 中查询文章集合。这样每个文章列表页面和文章详情页面都能在构建时生成包含数据的静态 HTML，用户访问时能够快速加载展示文章信息，提升用户体验。

import React from 'react';
import { MongoClient } from'mongodb';

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

export async function getStaticProps(context) {
  const client = await MongoClient.connect(process.env.MONGODB_URI);
  const db = client.db();
  const postsCollection = db.collection('posts');
  const post = await postsCollection.findOne({ slug: context.params.slug });
  client.close();

  return {
    props: {
      post: {
        title: post.title,
        excerpt: post.excerpt
      }
    },
    revalidate: 60 * 60 * 24 // 一天后重新验证数据（如果启用了增量静态再生）
  };
}

export async function getStaticPaths() {
  const client = await MongoClient.connect(process.env.MONGODB_URI);
  const db = client.db();
  const postsCollection = db.collection('posts');
  const posts = await postsCollection.find({}, { slug: 1, _id: 0 }).toArray();
  client.close();

  const paths = posts.map(post => ({
    params: { slug: post.slug }
  }));

  return { paths, fallback: false };
}

export default BlogPost;

产品展示页面：对于电商网站的产品展示页面，产品的基本信息如名称、价格、描述、图片等相对稳定。可以在构建时通过 getStaticProps 从后端 API 或者数据库获取这些产品数据，生成静态页面。这样在用户访问产品列表页或者单个产品详情页时，能快速看到产品信息，减少加载等待时间。例如，通过 axios 调用 API 获取产品数据：

import React from'react';
import axios from 'axios';

const ProductPage = ({ product }) => {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <p>Price: ${product.price}</p>
    </div>
  );
};

export async function getStaticProps(context) {
  const res = await axios.get(`https://api.example.com/products/${context.params.productId}`);
  const product = res.data;

  return {
    props: {
      product
    },
    revalidate: 60 * 60 * 24 // 一天后重新验证数据（如果启用了增量静态再生）
  };
}

export async function getStaticPaths() {
  const res = await axios.get('https://api.example.com/products');
  const products = res.data;

  const paths = products.map(product => ({
    params: { productId: product.id.toString() }
  }));

  return { paths, fallback: false };
}

export default ProductPage;

星途面试题库

面试题：Next.js 中 getStaticProps 的数据获取时机及应用场景

知识考点

面试题答案

获取数据时机

实际应用场景