Performance in React and Next.js
summary
React 18’s concurrent renderer yields every 5 milliseconds so low‑priority updates pause for user input, reducing long tasks (anything long tasks >50ms) and cutting Total Blocking Time — example showed 70ms + 65ms → 35ms TBT — with the goal to keep both values below 200ms. React Server Components skips HTML and JavaScript serialization, streaming component payloads with Suspense as low‑priority boundaries. Next.js app router uses transitions and partial pre‑rendering to prerender static layout and stream dynamic suspense boundaries during navigations.
AI-written summary · about
chapters (11)
- 0:00React 18 and Next.js perf
- 0:27Long tasks impact
- 3:56Sync rendering delays demo
- 4:37Concurrent features for UIs
- 6:44Transitions improving responsiveness demo
- 7:48Server Components and data fetching
- 8:51Suspense for streaming
- 10:15Automatic data caching
- 11:19App Router optimizations
- 13:27Partial pre-rendering in Next.js 14
- 15:52Summary
