# Next.js 流式渲染（Streaming Rendering）面试题详解 ## 1. 什么是流式渲染？流式渲染（Streaming Rendering）是 **React 18** 引入的特性，Next.js 基于它实现了 **Server Components + Suspense + Streaming**，允许服务器在数据未完全准备好时，先发送部分 HTML 到客户端，用户可以更快看到页面骨架或部分内容，而不是等待整个页面渲染完成。 **核心目标：** - 降低 TTFB（Time To First Byte） - 提升用户感知性能 - 支持渐进式加载（Progressive Rendering） --- ## 2. 流式渲染的原理 - **React 18 的 `Suspense`**：允许组件在数据未准备好时“挂起”，并显示 fallback。 - **Next.js App Router**：默认支持 **React Server Components (RSC)**，结合 `Suspense` 实现流式渲染。 - **HTTP Streaming**：服务器通过分块传输（chunked transfer encoding）发送 HTML。 **流程：** 1. 用户请求页面。 2. Next.js 先渲染已准备好的部分（例如布局、骨架）。 3. 数据加载完成后，剩余部分通过流式更新插入页面。 --- ## 3. 应用场景（Web3 前端） - **链上数据加载慢**：比如从区块链或 IPFS 获取数据，流式渲染可以先显示 UI 框架，再填充数据。 - **NFT Gallery**：先显示骨架屏，后续逐步加载图片和元数据。 - **钱包信息**：先渲染基本布局，再加载余额、交易记录。 - **交易状态更新**：交易确认过程可以流式显示进度。 --- ## 4. 代码示例（Next.js 14+ App Router） ```tsx // app/page.tsx import { Suspense } from 'react'; import NFTList from './NFTList'; export default function Page() { return (

My NFT Gallery

Loading NFTs...

); } // app/NFTList.tsx export default async function NFTList() { const res = await fetch('https://api.example.com/nfts', { cache: 'no-store' }); const nfts = await res.json(); return (

{nft.name}

); } ``` **关键要点** - **Suspense + async component** 实现流式渲染。 - fetch 默认在 Server Component 中执行，减少客户端负担。 --- ## 5. 面试回答要点 - 区别 SSR 和 Streaming：SSR 等待所有数据准备好再返回，Streaming 可以先返回部分 HTML。 - 性能优势：降低白屏时间，提升用户体验。 - 与 Web3 结合：链上数据延迟高，Streaming 非常适合。 --- ## 6. 加分点 - 提到 **React 18 + Next.js App Router + Suspense + Server Components** 是流式渲染的核心组合。 - 可以结合 Edge Runtime 和 Server Actions 提升性能。 ## ✅ 第二部分：扩展 Web3 场景结合点这里我帮你列出几个可以在面试中提到的亮点： ### 1. 钱包连接（Wallet Connect） - 用户点击“连接钱包”后，页面不必等待链上数据加载，可以先显示 UI 骨架。 - 使用 `Suspense` 包裹钱包信息组件，等链上数据返回后再填充。 ### 2. NFT Gallery - 先渲染 NFT 列表框架，后续逐步加载图片和元数据。 - 可以结合 **React.lazy** 和 `Suspense` 实现图片懒加载。 ### 3. 交易状态流式更新 - 用户发起交易后，页面可以先显示“交易已提交”，再通过流式渲染逐步更新状态（Pending → Confirmed → Finalized）。 - 可以结合 **Server Actions** 和链上事件监听。 ### 4. IPFS 内容加载 - IPFS 文件加载慢，可以先显示骨架屏，后续流式填充内容。 ---