Modern web applications need to be fast, discoverable, accessible, and scalable. In the early days of the web, all rendering happened on the server. Then came Single Page Applications (SPA) powered by JavaScript frameworks like Angular, React, and Vue, shifting rendering to the browser. Today, large-scale applications often combine both approaches, depending on business and performance requirements.
In this article, we explore Server-Side Rendering (SSR) and Client-Side Rendering (CSR) in depth, evaluate their pros and cons, look at practical use cases, and focus specifically on how Angular supports both models. We will also compare performance, SEO impact, caching strategies, cost implications, user experience differences, deployment considerations, and common anti-patterns.
This article is written for senior developers and architects who need a practical, real-world, production-focused understanding of SSR vs CSR.
1. Introduction to Rendering Approaches
Rendering refers to the process of converting application code (HTML, CSS, JavaScript, templates, and data) into a user-visible UI in the browser.
There are two primary approaches:
Server-Side Rendering (SSR)
The server generates the HTML for the requested page and sends the fully rendered HTML to the browser.Client-Side Rendering (CSR)
The server sends a basic HTML shell and JavaScript bundle. The browser then executes JavaScript, fetches data if required, and renders the UI.
Both approaches have valid use cases. The goal is not to choose one blindly, but to select the right approach for the business and technical context.
2. Deep Dive into Client-Side Rendering (CSR)
CSR became popular with the rise of SPAs. In Angular CSR, the app loads once, and routing happens on the client side.
2.1 How CSR Works
The browser sends a request to the server.
The server returns a minimal HTML file.
The browser downloads JavaScript bundles.
JavaScript executes, initializes Angular, and builds DOM.
Data is fetched via APIs.
Angular renders UI dynamically.
2.2 Strengths of CSR
1. Highly Interactive and Responsive Applications
CSR is ideal for dashboards, admin panels, B2B tools, and applications where user interactions happen frequently without full page reloads.
2. Reduced Server Load
The server mostly serves static assets. Business logic and rendering happen in the browser.
3. Better Perceived Responsiveness After Initial Load
Once the initial JS bundle loads, the app feels fast because routing and updates happen instantly.
4. Flexible Frontend Architectures
Developers can isolate backend and frontend development, use micro-frontends, and deploy static assets on CDNs.
2.3 Weaknesses of CSR
1. Slow First Contentful Paint (FCP)
The user sees a blank screen until JavaScript downloads and executes. On low-end devices or poor networks, this delay becomes noticeable.
2. Poor SEO Without Special Handling
Search engines find it difficult to crawl CSR apps because content loads only after JavaScript execution.
3. Heavier JavaScript Bundles
CSR often requires shipping large JS bundles, increasing load times, especially on mobile devices.
4. Lower Performance on Weak Devices
Rendering large components on low-end phones can result in sluggish performance and degraded UX.
2.4 When CSR is the Right Choice
Internal dashboards and enterprise apps
Applications that require heavy client-side interactions
Tools that rely on real-time updates, WebSockets, or complex visualizations
Micro-frontend architectures
When SEO is not a priority
3. Deep Dive into Server-Side Rendering (SSR)
SSR brings back the traditional model where the server generates HTML. Frameworks like Angular Universal support SSR.
3.1 How SSR Works
The server receives a request.
Angular runs on the server (Node.js).
Angular pre-renders the HTML based on route.
The server returns fully rendered HTML.
The browser displays the page immediately.
Angular on the browser hydrates the page.
Hydration is the process where the client-side Angular takes over the static HTML and makes it interactive.
3.2 Strengths of SSR
1. Fast First Paint and Lower Time to Interactive
Users see meaningful content almost immediately because HTML comes pre-rendered.
2. SEO Friendly
Search engines can crawl HTML pages, making SSR ideal for:
e-commerce
travel websites
blogs and content-heavy sites
landing pages
3. Better Performance on Slow Devices
Server performs the heavy rendering work, reducing load on low-end devices.
4. Reduced Bounce Rates
When users see something on the screen immediately, they are less likely to leave.
3.3 Weaknesses of SSR
1. Higher Server Costs
Rendering on the server consumes CPU and memory. High traffic can significantly increase server resource usage.
2. Complex Deployment Process
SSR adds new layers:
Node.js server
Caching layers
Server-side routing
Hydration logic
3. Longer Build Times
SSR builds are heavier compared to CSR builds.
4. Harder Debugging
SSR errors can be difficult to trace because rendering happens in both browser and server contexts.
3.4 When SSR is the Right Choice
E-commerce websites
Content-driven platforms where SEO matters
Public-facing web applications
Apps with large anonymous traffic
Sites targeting regions with low-end mobile devices
4. Angular-Specific Considerations: CSR vs SSR
Angular offers built-in tools for both approaches:
Angular CSR: Default SPA model
Angular SSR: Via Angular Universal
Let us look at Angular's strengths and complexities for each.
5. Angular CSR Implementation Essentials
CSR in Angular is simple by default. But large applications often suffer from poor performance if developers do not apply best practices.
5.1 Must-Use Techniques for Production-Ready CSR
1. Enable Route-Level Lazy Loading
const routes: Routes = [
{
path: 'dashboard',
loadChildren: () =>
import('./dashboard/dashboard.module').then(m => m.DashboardModule),
}
];
2. Use Standalone Components for Lighter Bundles
Angular 16+ supports standalone components by default. They reduce module complexity.
3. Use OnPush Change Detection
@Component({
changeDetection: ChangeDetectionStrategy.OnPush
})
This avoids unnecessary change detection cycles.
4. Avoid Overusing Observables in Templates
Heavy async pipes can affect performance.
5. Preload Critical Routes
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
6. Use CDNs for Static Assets
Serving JS bundles globally improves load times.
6. Angular SSR Implementation Using Angular Universal
Angular Universal enables SSR in Angular. It pre-renders HTML on the server.
6.1 Installing Angular Universal
ng add @nguniversal/express-engine
This command:
Configures Express server for SSR
Adds server.ts entry file
Updates Angular configuration
Creates separate builds for browser and server
6.2 Running SSR in Development
npm run dev:ssr
6.3 Production Build
npm run build:ssr
npm run serve:ssr
6.4 Typical Angular Universal Folder Structure
src/
main.tsmain.server.ts
app/
server.ts
angular.json6.5 Key Angular SSR Concepts
1. Hydration
The process where Angular turns static server-rendered HTML into an interactive app.
Join the conversation! Your thoughts help the community grow.