Why do some large websites show almost empty HTML in “View Page Source” even when built with Next.js?
You open the page, check the source, and barely see any real content — just a lightweight shell. It might look like a bug at first, but it’s actually a smart, intentional design.
What’s happening under the hood?
These sites use Dynamic Rendering in Next.js.
For regular users: The server sends a minimal HTML shell + JavaScript. The actual content loads on the client side (CSR). This keeps the server load low and improves real-user performance.
For search engine crawlers (Googlebot, etc.): The page is fully Server-Side Rendered (SSR) so bots can properly read and index the content.
Why this hybrid approach?
High-traffic pages are extremely dynamic (real-time prices, stock, personalization…). Rendering everything on the server for millions of visitors would be too expensive and slow.
How to implement it in Next.js
You can control this easily with:
- export const dynamic = ‘force-dynamic’
- Middleware or Edge Functions for bot detection
- Tools like Botd (by FingerprintJS) — which is much more accurate than simple User-Agent checking.
Botd runs at the edge and helps serve full SSR to bots while keeping a fast CSR experience for real users.
Modern web development isn’t about choosing SSR or CSR — it’s about choosing the right strategy for each page.
Have you worked with Dynamic Rendering or hybrid approaches? Which strategy do you prefer in your projects?
답글 남기기