面试题：Next.js 静态站点生成优化下 getStaticProps 与 getStaticPaths 的性能考量

1. 处理大量路径生成

策略：
- 分块生成路径：如果路径是基于某个范围生成，例如根据 ID 生成路径，可将 ID 范围分成多个块，每次生成一部分路径。这样可以减少单次生成路径的数量，避免内存溢出等问题。
- 动态生成路径：对于一些不常变化的路径，可采用动态生成路径的方式。在页面首次访问时生成路径，而不是在构建时全部生成。
代码示例：假设路径基于数字 ID 生成，分块生成路径：

// pages/post/[id].js
export async function getStaticPaths() {
    const totalPosts = 10000;
    const chunkSize = 100;
    const paths = [];
    for (let i = 0; i < totalPosts; i += chunkSize) {
        const end = Math.min(i + chunkSize, totalPosts);
        for (let j = i; j < end; j++) {
            paths.push({ params: { id: j.toString() } });
        }
    }
    return { paths, fallback: false };
}

2. 控制 getStaticProps 的数据获取频率

策略：
- 缓存数据：在服务器端缓存 getStaticProps 获取的数据。可以使用内存缓存（如 Node.js 的 Map）或外部缓存系统（如 Redis）。如果数据在一定时间内没有变化，直接从缓存中读取，减少数据库等数据源的读取次数。
- 增量更新：对于数据更新，采用增量更新的方式。只获取变化的数据，而不是每次都重新获取全部数据。
代码示例：使用内存缓存：

// pages/post/[id].js
let cache = new Map();
export async function getStaticProps({ params }) {
    const postId = params.id;
    if (cache.has(postId)) {
        return { props: { post: cache.get(postId) } };
    }
    const post = await fetchPostFromDatabase(postId);
    cache.set(postId, post);
    return { props: { post } };
}
async function fetchPostFromDatabase(id) {
    // 模拟从数据库获取数据
    return { id, title: 'Post Title' };
}

3. 其他优化

策略：
- 并行数据获取：如果在 getStaticProps 中需要获取多个独立数据源的数据，可以使用 Promise.all 进行并行获取，减少总等待时间。
- 优化数据源查询：对数据库查询进行优化，例如添加合适的索引，优化查询语句，以提高数据获取速度。
代码示例：并行数据获取：

// pages/post/[id].js
export async function getStaticProps({ params }) {
    const postId = params.id;
    const [post, comments] = await Promise.all([
        fetchPostFromDatabase(postId),
        fetchCommentsFromDatabase(postId)
    ]);
    return { props: { post, comments } };
}
async function fetchPostFromDatabase(id) {
    // 模拟从数据库获取数据
    return { id, title: 'Post Title' };
}
async function fetchCommentsFromDatabase(id) {
    // 模拟从数据库获取数据
    return ['Comment 1', 'Comment 2'];
}

星途面试题库

面试题：Next.js 静态站点生成优化下 getStaticProps 与 getStaticPaths 的性能考量

知识考点

面试题答案

1. 处理大量路径生成

2. 控制 getStaticProps 的数据获取频率

3. 其他优化