Next.js getServerSideProps串行请求WooCommerce关联产品方案

核心思路 #

无需在非页面组件中调用getServerSideProps，所有数据拉取逻辑统一在页面路由对应的getServerSideProps内完成：拿到主产品数据后并行拉取所有关联ID对应的完整产品信息，最终将主产品、关联产品的完整数据通过props传入页面组件直接渲染即可。

具体实现步骤 #

• 从主产品接口返回结果中取出related_ids关联产品ID数组
• 基于ID数组通过Promise.all并行发起所有关联产品的接口请求，避免串行请求导致的等待时间过长
• 将拉取到的关联产品完整数据和主产品数据一同挂载到props上返回
• 页面组件直接接收完整的关联产品数据传入卡片组件渲染，无需在客户端额外发请求

修正后完整代码 #

export default function ProductPage({ product, relatedProducts }) {
    // 其余业务逻辑
    
    return (
        <div className="slick-list">
            <div className="slick-track">
                {relatedProducts.map((item) => {
                    return(
                        <ProductCard key={item.id} productData={item}/>
                    )
                })}
            </div>
        </div>
    )
}

export async function getServerSideProps(context){
    // 拉取主产品数据
    const {data:product} = await getProductData(context.query.id)
    let relatedProducts = []

    // 存在关联产品ID时并行拉取所有关联产品完整数据
    if(product?.related_ids?.length){
        const relatedResList = await Promise.all(
            product.related_ids.map(id => getProductData(id))
        )
        // 提取每个接口返回的data字段，过滤掉请求失败的空值
        relatedProducts = relatedResList.map(res => res.data).filter(Boolean)
    }

    return{
        props: {
            product: product ?? {},
            relatedProducts
        }
    }
}

注意事项 #

• 禁止在客户端渲染阶段逐个遍历关联ID发起请求，会产生请求瀑布流，拖慢首屏加载速度，同时容易暴露内部接口地址
• 并行请求时建议加简单的容错逻辑，避免单个关联产品接口请求失败导致整个页面500
• 如果关联产品数量较多，可以和后端协商在主产品接口直接扩展关联产品信息字段，减少接口请求次数

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