Universal React Apps Using Next.js
summary
Claims that server rendering plus code‑splitting measurably speeds initial load — 53% abandon after 3s — and that JavaScript parsing and execution dominate cost. Uses Next.js with automatic webpack/babel config, page files, automatic code‑splitting, getInitialProps for server/client data fetching, Link prefetch to hydrate future routes, and optional static export or custom Express server for pretty routes. Builds a Star Wars demo of seven film pages as a static site; initial loads are faster and prefetched navigations feel instant.
AI-written summary · about
chapters (17)
- 0:00Start
- 0:22Why Elevators Have Mirrors
- 5:41Prefetching
- 6:09Progressive Rendering
- 12:13Navigate in the Client
- 14:52Star Wars Api
- 17:20Loading Data
- 19:04Dynamic Routes
- 20:42Shared State
- 22:10Route Masking
- 22:48Client-Side Routing or Server-Side Routing
- 24:03Custom Server Api
- 24:45Custom Route
- 25:26Router Events Api
- 26:26Static Web App
- 31:17Resources
- 32:33Principles of Rich Web Applications
related talks
22mUniversal React Apps Using Next.js
15mBuilding Isomorphic JavaScript Apps Faster with Next.js
36mNext.js by Example
35mNext.js "Universal React Made Easy and Simple"
31mSpeeding up Startup for Large React Apps
34mWhat's Next? Exploring the future of React
27mAn introduction to Next.js and what's to come in 2021
26mLightning Fast React Apps