Next.js中getServerSideProps结合Suspense实现流式响应的问题

需求可行性 #

完全可行。Next.js 配合React 18+支持服务端流式渲染，能将已渲染完成的HTML分块发送到客户端，结合React Suspense可实现未加载区域的骨架屏展示，有效提升首屏感知加载速度。

你的方案报错原因 #

getServerSideProps要求返回的props必须是JSON可序列化的数据类型，你传递的catMethod是Promise对象，无法被序列化为JSON，因此触发序列化错误。

解决方案 #

方案一：适配现有Pages Router架构 #

Pages Router在React 18+版本中支持流式渲染，但需要调整数据获取逻辑，将异步请求从getServerSideProps移到组件内部，同时封装Suspense兼容的异步获取函数：

1. 封装Suspense兼容的异步数据获取工具

// utils/suspenseFetch.js
const cache = new Map();

export function fetchCategories(functions) {
  const cacheKey = 'categories';
  if (cache.has(cacheKey)) {
    return cache.get(cacheKey);
  }
  const requestPromise = httpsCallable(functions, 'getCategories')()
    .then(res => res.data)
    .catch(err => {
      cache.delete(cacheKey);
      throw err;
    });
  cache.set(cacheKey, requestPromise);
  return requestPromise;
}

2. 页面组件中用Suspense包裹异步内容

// pages/QuestionAndAnswers.jsx
import { Suspense, use } from 'react';
import { fetchCategories } from '../utils/suspenseFetch';
import { FirebaseService } from '../services/FirebaseService';

// 骨架屏组件
const CategoriesSkeleton = () => (
  <div className="skeleton-container">
    <div className="skeleton-line"></div>
    <div className="skeleton-line"></div>
    <div className="skeleton-line"></div>
  </div>
);

// 异步子组件
const CategoriesList = () => {
  const functions = FirebaseService.Instance.Functions;
  const categories = use(fetchCategories(functions));
  return (
    <div className="categories-list">
      {categories.map(category => (
        <div key={category.id} className="category-item">
          {category.name}
        </div>
      ))}
    </div>
  );
};

export default function QuestionsAndAnswers() {
  return (
    <div className="qa-page">
      {/* 首屏优先渲染的内容，无需等待异步数据 */}
      <h1>问答专区</h1>
      <p>这里是问答页面的核心内容，会先加载显示</p>
      
      {/* 用Suspense包裹需要异步加载的部分，加载时显示骨架屏 */}
      <Suspense fallback={<CategoriesSkeleton />}>
        <CategoriesList />
      </Suspense>
    </div>
  );
}

// 移除原有的getServerSideProps，数据获取逻辑移到组件内部

3. 确认Pages Router启用流式渲染
   Next.js 12.2+版本在React 18环境下默认启用流式渲染，确保你的_app.jsx使用标准写法：

// pages/_app.jsx
import '../styles/globals.css';

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

方案二：迁移到App Router（更推荐，原生支持流式） #

App Router是Next.js的新架构，默认支持服务端流式渲染，无需额外配置，直接在Server Components中编写异步逻辑即可：

// app/QuestionAndAnswers/page.jsx
import { Suspense } from 'react';
import { FirebaseService } from '../services/FirebaseService';

// 骨架屏组件
const CategoriesSkeleton = () => (
  <div className="skeleton-container">
    <div className="skeleton-line"></div>
    <div className="skeleton-line"></div>
    <div className="skeleton-line"></div>
  </div>
);

// 异步获取分类数据（Server Component中直接使用async函数）
async function fetchCategories() {
  const functions = FirebaseService.Instance.Functions;
  const response = await httpsCallable(functions, 'getCategories')();
  return response.data;
}

// 分类列表异步组件
async function CategoriesList() {
  const categories = await fetchCategories();
  return (
    <div className="categories-list">
      {categories.map(category => (
        <div key={category.id} className="category-item">
          {category.name}
        </div>
      ))}
    </div>
  );
}

export default async function QuestionsAndAnswers() {
  return (
    <div className="qa-page">
      <h1>问答专区</h1>
      <p>这里是问答页面的核心内容，会先加载显示</p>
      
      {/* Suspense自动处理流式渲染，数据加载时显示骨架屏 */}
      <Suspense fallback={<CategoriesSkeleton />}>
        <CategoriesList />
      </Suspense>
    </div>
  );
}

关键注意事项 #

• 确保Next.js版本不低于12.2（Pages Router）或13.4（App Router稳定版）
• Firebase Functions调用在Server Components中执行时，无需处理客户端CORS问题
• 可根据业务需求调整缓存逻辑，避免重复发起API请求

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