We've just completed a significant optimization to our dashboard architecture – migrating from Server-Side Rendering (SSR) to Client-Side Rendering (CSR). This change delivers meaningful improvements in platform efficiency and reduces our infrastructure costs.
The Challenge: Rising CPU Usage
As our user base grew, we noticed that Vercel's Fluid Active CPU metrics were steadily increasing. Our dashboard, being rendered on the server for each request, was consuming significant server resources even for users who were simply browsing their existing data.
Why We Made the Switch
Server-Side Rendering (SSR) was causing:
- High CPU consumption on each page request
- Unnecessary server load for rendering static dashboard layouts
- Increased latency on slower connections
- Higher infrastructure costs
Client-Side Rendering (CSR) allows us to:
- Render the dashboard directly in the browser
- Reduce server workload significantly
- Cache dashboard assets for faster subsequent loads
- Shift rendering burden to client devices
What Changed
We've refactored the dashboard to load:
- Initial HTML shell from the server (minimal payload)
- JavaScript bundles that render the UI client-side
- Data fetching happening in the browser after the shell loads
This approach is especially beneficial because dashboard content is:
- Unique per user
- Frequently updated
- Interactive and dynamic
Performance Improvements
The migration delivers:
- Lower CPU usage – Vercel Active CPU metrics decreased significantly
- Faster perceived load times – Users see content faster with client-side interactivity
- Reduced server costs – Less server-side rendering = lower bills
- Better scalability – We can handle more concurrent users with the same resources
- Improved caching – CSR enables better browser caching strategies
No Change to User Experience
From a user perspective:
- Dashboard functionality remains identical
- Load times are comparable or faster
- All features work exactly as before
The change is entirely transparent to you – just faster and more efficient.
Technical Details
We've:
- Integrated client-side rendering patterns throughout the dashboard
- Maintained server-side authentication checks for security
- Optimized data fetching with proper error boundaries
- Implemented loading states for better UX during transitions
The Bottom Line
By shifting from server-side to client-side rendering where it makes sense, we've created a leaner, more efficient platform that scales better and costs less to operate. These savings allow us to reinvest in features and stability for all our users.