Next.js 13 App Router:服务端组件链式请求更新同数据集方案问询
Next.js 13(App Router)服务端逐步更新同一数据集的实现疑问
我是Next.js 13(使用App Router)的新手,目前遇到以下需求和疑问:
需求说明
页面渲染初始数据后,需要基于后端返回的"next"链接逐步获取更优数据(如最新、多源数据),通常需2-3次加载完成,且尽可能在服务端执行。
后端API格式
后端API响应包含带URL的"next"字段,格式示例:
{ "meta": {..., "next": "https://api.example.com/path/to/next/request"}, "data": ... }
当前实现方案
Next.js文档中的sequential data fetching仅说明逐步渲染不同数据块,未提及更新同一数据集。我采用递归组件结合<Suspense>边界,将当前数据作为fallback实现,代码如下:
import { Suspense } from 'react'; export default async function Stream() { return ( <div className='m-auto h-screen w-1/2 p-3'> <h1>Welcome to the Stream page!</h1> <Results url={'http://127.0.0.1:3000/api/dummyData'} /> </div> ); } async function Results({ url }: { url?: string }) { const content = await fetch(url, { cache: 'no-store', }).then((res) => res.json()); // 如果响应中有"next"链接,递归调用组件 if (content.next) { return ( <Suspense fallback={<ResultsDisplayer content={content} />}> <Results url={content.next} /> </Suspense> ); } else { return <ResultsDisplayer content={content} />; } } async function ResultsDisplayer({ content }) { const isLoading = Boolean(content.next); return ( <> <p>Loading: {isLoading ? 'YES' : 'NOPE'}</p> <br /> <p>Data:</p> <pre>{JSON.stringify(content)}</pre> </> ); }
该方案可行,但我好奇是否有更常规直接的方式实现链式链接触发的服务端数据更新,未找到相关示例或文档。
调研过的不适用方案
- 客户端更新(如useSWR、useEffect):希望避免客户端请求,不符合需求
- Websocket:过于冗余且仅能在客户端消费
- ReadableStream:按Next.js路由处理器文档尝试后无法实现,且无法在服务端消费
- Server Actions结合revalidateTag:仍处于实验阶段,且难以告知客户端何时刷新
疑问
是否有其他人遇到过该问题?如何处理?是否有我忽略或误解的Next.js特性?
内容的提问来源于stack exchange,提问作者Frostily293
相关产品推荐
相关产品推荐

