面试题：Next.js getStaticProps 在复杂数据依赖场景下的优化策略

思路：
- 分析接口关系：首先仔细梳理各个API接口之间的先后顺序和数据关联。明确哪些接口的数据是其他接口的输入依赖。
- 减少不必要请求：尽量合并可以并行获取数据的接口，减少总的请求次数。对于有先后顺序的接口，确保在依赖数据准备好后及时触发后续请求。
- 缓存数据：利用缓存机制避免重复请求相同数据，提高数据获取效率。
技术手段：
- 并行请求：使用Promise.all来并行处理无依赖关系的API请求。例如，如果有接口A和接口B无依赖关系，可以这样写：

const [dataA, dataB] = await Promise.all([fetch('apiA'), fetch('apiB')]);
const responseA = await dataA.json();
const responseB = await dataB.json();

链式请求：对于有先后顺序的接口，按照顺序依次请求。如接口C依赖接口A的返回数据，可以：

const responseA = await fetch('apiA');
const dataA = await responseA.json();
const responseC = await fetch(`apiC?param=${dataA.someField}`);
const dataC = await responseC.json();

数据缓存：在项目中引入缓存库（如lru - cache）。在getStaticProps中，每次请求前先检查缓存，如果缓存中有对应数据则直接使用，避免重复请求API。例如：

import LRU from 'lru - cache';

const cache = new LRU({ max: 100 });

export async function getStaticProps() {
    let data;
    if (cache.has('apiData')) {
        data = cache.get('apiData');
    } else {
        const response = await fetch('api');
        data = await response.json();
        cache.set('apiData', data);
    }
    return {
        props: {
            data
        },
        revalidate: 60 // 每60秒重新验证数据（可选，用于增量静态再生）
    };
}

使用中间件或工具库：可以使用axios库，它提供了更便捷的请求管理和拦截器功能。拦截器可以用于处理请求和响应，例如添加通用的请求头、处理错误等，使代码更健壮和易于维护。例如：

import axios from 'axios';

axios.interceptors.request.use(config => {
    // 添加通用请求头
    config.headers.Authorization = 'Bearer yourToken';
    return config;
}, error => {
    return Promise.reject(error);
});

axios.interceptors.response.use(response => {
    return response;
}, error => {
    // 统一处理错误
    console.error('Request failed:', error);
    return Promise.reject(error);
});

这样在getStaticProps中使用axios进行API请求，能更好地管理请求流程。

增量静态再生：在getStaticProps返回对象中设置revalidate字段，Next.js会在指定时间间隔后重新生成页面数据，确保数据的一致性和实时性。例如revalidate: 60表示每60秒重新验证数据并在需要时重新生成页面。

星途面试题库

面试题：Next.js getStaticProps 在复杂数据依赖场景下的优化策略

知识考点

面试题答案