使用 React 18 與 Suspense 提升 INP (Interaction to Next Paint) 指標
Original: Improving INP with React 18 and Suspense
INP (Interaction to Next Paint) is a Core Web Vitals metric introduced by Google to measure how quickly a webpage responds to user…
Vercel 分享了如何透過 React 18 的並行功能與 Suspense 改善「互動到下次繪製」(INP) 指標。傳統 React 的同步渲染會阻塞瀏覽器主線程，導致使用者操作出現延遲；而 React 18 允許中斷低優先級的渲染，優先處理使用者輸入，並透過選擇性水合技術，大幅降低互動延遲，提供更流暢的網頁體驗。
INP (Interaction to Next Paint) is a Core Web Vitals metric introduced by Google to measure how quickly a webpage responds to user interactions. In the past, React's synchronous rendering mechanism frequently blocked the browser's main thread — whenever the page was performing complex component updates or loading data, users would experience noticeable delays when clicking buttons or typing text, directly dragging down INP scores.
Free shows the 3-line summary; Pro unlocks the full deep summary (~300 words) so you never have to click through.
See Pro plans →Want the original English / full article?
Read on Vercel Changelog →Summaries are AI-generated; the original article is authoritative.