RSC Parallel vs Sequential Fetch: Next.js Prompt Example
CODE PREVIEW
P
Prompt
Create a Next.js App Router page demonstrating two common RSC data fetching patterns: parallel fetch (Promise.all) vs waterfall fetch (sequential). The page should display a list of blog posts with author info. Implement a toggle to switch between parallel and waterfall modes, showing loading times for each. Use a simulated delay (e.g., setTimeout) for posts and authors. The UI should be visually appealing with Tailwind CSS.
このページは、React Server Components (RSC) における2つの基本的なデータフェッチパターン（並列と直列）を示しています。Next.js App RouterとRSCを使用して、Promise.all で並列にデータを取得して読み込み時間を短縮する方法と、まず投稿を取得してから著者を取得する直列パターンをトグルで切り替えて体験できます。
Prompt Overview
This page demonstrates two fundamental data fetching patterns (parallel and serial) in React Server Components (RSC). Using the Next.js App Router and RSC, you can toggle between a parallel pattern that uses Promise.all to fetch data simultaneously and reduce loading time, and a serial pattern that first fetches posts and then fetches authors.
Was this prompt helpful?
Comments
Comments appear after moderation