Integrate server-side rendering (SSR) into a hybrid rendering strategy for Angular apps to improve performance and SEO.
Features
- Hybrid Rendering Strategy — Combines server-side rendering (SSR), pre-rendering/static site generation (SSG), and client-side rendering (CSR) in a single Angular application, allowing developers to optimize each route based on its specific requirements.
- Server Route Configuration — Fine-grained control over rendering modes through ServerRoute objects in app.routes.server.ts, enabling developers to specify RenderMode.Server, RenderMode.Client, or RenderMode.Prerender for individual routes.
- Multiple Rendering Modes — Three distinct rendering options: Server (SSR) for dynamic per-request rendering, Client (CSR) for traditional browser rendering, and Prerender (SSG) for build-time static HTML generation.
- Custom Headers and Status Codes — Ability to set custom HTTP headers and status codes for individual server routes, providing control over HTTP responses for specific pages like setting 201 status codes or custom X-headers.
- App Shell Pattern Support — Built-in support for the App Shell pattern using withAppShell feature, allowing developers to specify a shell component for client-side rendered routes while maintaining SSR benefits.
- Incremental Hydration — Advanced hydration capabilities that allow progressive loading of Angular components, improving perceived performance by hydrating critical content first.
Use Cases
SEO-Optimized Content Websites
Content-heavy websites like blogs, news sites, and marketing pages that require excellent search engine visibility. SSR delivers fully rendered HTML to search crawlers, significantly improving indexing and ranking compared to client-side only rendering. Target Audience: Content marketers, SEO specialists, and publishers building Angular-based websites
E-commerce and Dynamic Applications
Applications with a mix of static product pages and dynamic user-specific content like shopping carts or user profiles. Developers can use SSG for product listings, SSR for personalized recommendations, and CSR for interactive components. Target Audience: E-commerce developers and product teams building Angular storefronts
Performance-Critical Web Applications
Applications where Core Web Vitals and page load speed are critical metrics. Hybrid rendering eliminates the JavaScript download-parse-execute bottleneck by serving pre-rendered or server-rendered HTML for initial content display. Target Audience: Frontend engineers and performance optimization teams
Progressive Web Apps with Offline Support
PWAs that need to balance initial server-rendered content with subsequent client-side rendering via service workers. The first request is server-rendered while subsequent requests are handled client-side for offline capability. Target Audience: PWA developers building installable Angular applications
Pros
- Significantly improved page load performance by eliminating the JavaScript download-parse-execute bottleneck, delivering fully rendered HTML directly to the browser
- Excellent SEO capabilities as search crawlers receive complete HTML documents rather than needing to execute JavaScript to index content
- Fine-grained control over rendering strategy per route, allowing optimal rendering mode selection based on content type and user requirements
- Flexible deployment options including CDN deployment for fully static sites, reducing server infrastructure costs and improving scalability
- Reduced client-side resource demands as server handles computation, benefiting users on lower-powered devices or slower network connections
Cons
- Increased server hosting costs for SSR routes as the server must run Angular to produce HTML responses for every request
- Development complexity increases as code must be authored to work in both server and browser environments, limiting use of browser-specific APIs and libraries
- Prerendering adds significant time to production builds, especially when generating large numbers of static pages with getPrerenderParams
- Potential deployment size increases when prerendering produces many HTML documents, leading to slower deployments and larger artifact storage
