Responsive Rendering with Next.js
summary
Claims a concrete speed win: server-side user-agent detection plus dynamic imports load either a 15 KB desktop carousel library or a pure HTML/CSS mobile carousel, so mobile users avoid extra JS. Implementation uses a UA check (server and client) and warns that SSG forces very granular splitting or builds pull in every view. Also shows a bot-only SEO view using a bot list to render minimal markup. GitHub link and live demo exist and the approach reports success.
AI-written summary · about
chapters (13)
- 0:00Intro
- 0:30Responsive rendering with Next JS
- 1:57Server side device detection
- 2:34Use ua-parser-js
- 3:09Why is this important? Lets check out the carousel component
- 3:38Web desktop carousel component
- 3:52Web mobile carousel component Only HTML and CSS
- 4:15The missing piece of the puzzle dynamic
- 4:34With SSG
- 4:51Be more careful on how to split our components
- 5:44Live example
- 6:00Ohh, one more thing! you can also optimize for crawlers
- 6:15Implementation with ua-parser-js
related talks
44mServer Side Rendering from the trenches
08mLightning fast SSR React apps with top perceived performance and no (client side) JavaScript
25mNext.js: Choosing an Optimal Rendering Pattern for your Application
18mNext.js - The Hybrid Architecture for Web Developer
31mFaster content websites via SSR and progressive hydration of Web Components
33mUniversal React Apps Using Next.js
27mSSR & SSG in NextJS
30m50 shades of React rendering with Next.js