如何解决RSC组件调用Route Handler返回空响应的问题？

问题分析 #

从服务器日志能定位两个核心问题：

• products in page.js {}：你直接对fetch返回的Response对象执行JSON.stringify，但该对象的可枚举属性极少，所以输出空对象
• Error: Only plain objects...：将Response类实例传递给了客户端组件ProductSection，而Next.js规定Server Components只能向Client Components传递普通对象、基础类型，不能传递类实例

解决方案 #

修改RSC代码，先解析fetch响应为JSON数据，再传递给组件：

import ProductSection from '@/app/_components/ProductSection';
import React from 'react'
import base_url from '@/app/_util/StrapiConfig';

const Products = async ({ params }) => {
  const merchantSlug = params?.merchantSlug || process.env.NEXT_PUBLIC_MERCHANT_NAME;

  // 先获取响应，再解析为JSON格式的实际数据
  const response = await fetch(process.env.NEXT_PUBLIC_HOST_URL + `/merchants/${merchantSlug}/products/api`);
  const products = await response.json();

  console.log("products in page.js", JSON.stringify(products, null, 2));

  return (
    <div className='mt-10 sm:px-10 md:px-20'>
      <ProductSection productList={products} />
    </div>
  )
}

export default Products;

可选优化 #

既然是Server Component，可直接调用Strapi API，省去中间Route Handler的网络请求开销：

import ProductSection from '@/app/_components/ProductSection';
import React from 'react'
import base_url from '@/app/_util/StrapiConfig';

const Products = async ({ params }) => {
  const merchantSlug = params?.merchantSlug || process.env.NEXT_PUBLIC_MERCHANT_NAME;

  const response = await fetch(
    `${base_url}/products?populate=*&attributes[merchant][data][attributes][slug]=${merchantSlug}`,
    {
      headers: {            
        'Authorization': `Bearer ${process.env.NEXT_PUBLIC_STRAPI_TOKEN}`,
      },
    }
  );    
  const products = await response.json();

  console.log("products in page.js", JSON.stringify(products, null, 2));

  return (
    <div className='mt-10 sm:px-10 md:px-20'>
      <ProductSection productList={products} />
    </div>
  )
}

export default Products;

核心原因说明 #

1. fetch返回的是Response对象，它是包含响应状态、头信息的容器，必须调用.json()方法才能提取出实际的JSON响应体
2. Next.js的Server Components与Client Components之间的数据传递有严格限制：仅允许普通对象、字符串、数字等可序列化类型，类实例（如Response）无法被正确序列化传递

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