When would you choose CSR over SSR or SSG in a production Next.js app? Give real-world examples.

A production admin panel for a SaaS platform is an ideal CSR candidate. These pages are accessed only by authenticated employees, have zero SEO requirements, and often contain complex data tables, charts, and real-time updates. Using CSR with a library like SWR or TanStack Query provides fast subsequent navigation, automatic background data refetching, and optimistic updates—all while keeping server costs minimal since each admin user's browser handles the rendering work [citation:2][citation:10].

Peloton's multi-year migration from a client-side-only app to Next.js demonstrates a hybrid approach. While they moved much of their public content to SSG/ISR for performance and SEO, their authenticated user dashboards (showing workout history, personal stats, and recommendations) remained CSR-heavy because each user sees completely personalized data that doesn't benefit from pre-rendering [citation:7]. This hybrid model gave them improved page performance for public content while maintaining rich interactivity for logged-in experiences.

Consider a marketing analytics platform like the one mentioned in Infragistics' case study [citation:8]. Pages with interactive charts, real-time data filtering, and complex visualizations are perfect for CSR. The initial load may show a loading skeleton, but once loaded, users can filter, sort, and explore data without page refreshes. SSR would add unnecessary server complexity here because the data changes per user interaction and SEO is irrelevant—marketers access these tools after login, not via search engines [citation:8].

However, CSR-only apps face real production challenges. Google's Core Web Vitals prioritizes initial load performance—CSR apps often struggle with Largest Contentful Paint (LCP) and Time to Interactive (TTI) on slow networks [citation:8]. Additionally, social media sharing breaks because crawlers can't execute JavaScript to read Open Graph tags [citation:8]. This is why modern Next.js apps use hybrid approaches: SSR/SSG for marketing pages, CSR for authenticated sections [citation:1][citation:6].

Teams at scale (like DoorDash and Preply) evaluate three metrics when choosing CSR: TTFB tolerance (CSR has fast TTFB but slow time-to-content), cache hit rate (CSR can't be CDN-cached), and JavaScript execution cost on low-end devices [citation:1][citation:5]. If your users primarily access the app on high-end devices with fast networks, the CSR trade-off becomes more acceptable.