Next.js中如何通过getStaticProps获取多API数据？场景咨询

优先在getStaticProps里通过两次GraphQL请求（或优化为单次组合查询）同时获取当前文章和标签相关的其他文章，这是最适配静态生成场景的方案——既能保证页面加载速度，又能在构建阶段就把所有需要的数据准备妥当。

具体实现步骤 #

1. 修改getStaticProps，先获取当前文章的标签，再用标签作为条件查询相关文章（排除当前文章本身）：

export async function getStaticProps({ params }) {
    // 第一步：获取当前文章的详情及标签
    const { posts: currentPosts } = await hygraph.request(
        `
      query BlogPostPage($slug: String!){
        posts(where:{slug: $slug}){
            id
            slug
            title
            tags
        }
      }
    `,
        { slug: params.slug }
    );

    const currentPost = currentPosts[0];
    if (!currentPost) {
        return { notFound: true };
    }

    // 第二步：根据当前文章标签查询相关文章，排除自身并限制数量
    const { posts: relatedPosts } = await hygraph.request(
        `
      query RelatedPosts($tags: [String!], $excludeSlug: String!){
        posts(
          where:{
            slug_not: $excludeSlug,
            tags_some: {in: $tags}
          }
          orderBy: publishedAt_DESC
          first: 5
        ){
            id
            slug
            title
        }
      }
    `,
        {
            tags: currentPost.tags,
            excludeSlug: params.slug,
        }
    );

    return {
        props: {
            posts: currentPosts,
            relatedPosts,
        },
    };
}

2. 在页面组件中将relatedPosts传递给SuggesCard组件：

const Post = ({ posts, relatedPosts }) => {
    return (
        <>
            <div className='max-w-[1240px] mx-auto mt-3 px-4 lg:flex'>
                <BlogPost posts={posts} />
                <div className='lg:ml-3 mb-5'>
                    <div className='lg:sticky lg:top-[74px]'>
                        <SuggesCard relatedPosts={relatedPosts} />
                    </div>
                </div>
            </div>
        </>
    )
}

方案选择说明 #

• 不要在getStaticPaths里处理：getStaticPaths仅负责生成静态页面的路径列表，不适合处理页面级数据获取逻辑。
• 避免客户端动态请求（如SWR/React Query）：虽然能实现需求，但会增加客户端API请求次数，导致页面加载延迟，且静态生成的页面不会包含相关文章内容，不利于SEO优化。只有当你需要实时获取最新发布的相关文章时，才考虑用客户端请求作为备选方案。

内容的提问来源于stack exchange，提问作者Sujjeee