skills.rest
afonsoft
afonsoftCOMMUNITY
Explore all skills by this author →
Website𝕏@afonsoftGitHub

angular-ssr

Implement server-side rendering, hydration, and prerendering in Angular v20+ applications.

Updated Aug 10, 2025
Search Tags:#angular#seo#express#ssr#hydration#server-side rendering#prerendering
One-click install
npx skills add https://github.com/afonsoft/ai-studio-workspace --skill angular-ssr-afonsoft
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular-ssr
Source: https://github.com/afonsoft/ai-studio-workspace/tree/main/agents/skills/angular-ssr
Command: npx skills add https://github.com/afonsoft/ai-studio-workspace --skill angular-ssr-afonsoft

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @angular/ssr, @angular/platform-server, @angular/platform-browser, express, and includes references (resource) components.

What problem does it solve? Angular single-page applications render only in the browser, which hurts SEO, slows first contentful paint, and breaks social media link previews. This Skill guides you through adding server-side rendering, hydration, and prerendering to Angular v20+ projects using @angular/ssr. ## Core Features & Use Cases - SSR Setup and Configuration: Add @angular/ssr to an existing project, configure server routes with RenderMode (Prerender, Server, Client), and merge server providers into the application config. - Hydration Strategies: Apply incremental hydration with @defer blocks using triggers like viewport, interaction, idle, and timer, plus event replay to capture user input before hydration completes. - Browser-Only API Handling: Safely use window, localStorage, and DOM APIs with isPlatformBrowser checks, afterNextRender, and injection tokens so code runs on both server and client. - Prerendering and SEO: Prerender static and dynamic routes with getPrerenderParams, manage meta tags and JSON-LD structured data, and configure TransferState HTTP caching. - Use Case: You have an e-commerce Angular app where product pages need to rank in search engines. Use this Skill to prerender product routes, add Open Graph meta tags, and defer hydration of below-the-fold components. ## Quick Start Add server-side rendering to my Angular project and configure the product detail route to use dynamic SSR while prerendering the home and about pages.

Frequently Asked Questions about angular-ssr

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add server-side rendering to an existing Angular project?▼

Run ng add @angular/ssr to add server-side rendering to an existing Angular project. This installs the @angular/ssr package and generates server.ts, main.server.ts, and app.config.server.ts, then updates angular.json with the SSR configuration.

How to prerender dynamic routes with parameters in Angular SSR?▼

Use getPrerenderParams in your server routes configuration to prerender dynamic routes. Return an array of parameter objects, such as product IDs fetched from an API, and set a PrerenderFallback option for routes that were not prerendered.

What is the difference between RenderMode Prerender, Server, and Client in Angular?▼

RenderMode.Prerender generates static HTML at build time for pages like blogs, RenderMode.Server renders dynamically per request for user-specific content, and RenderMode.Client keeps the route as a client-side SPA for authenticated dashboards.

Why does Angular hydration mismatch happen and how do I fix it?▼

Hydration mismatch happens when server-rendered HTML differs from what the client generates, often from values like new Date() computed at render time. Fix it by moving dynamic values into afterNextRender, using signals, or applying ngSkipHydration to dynamic subtrees.

Can I use window and localStorage in an Angular SSR application?▼

Yes, but you must guard browser APIs with isPlatformBrowser checks or wrap them in injection tokens that return null on the server. Code inside afterNextRender and afterRender callbacks also runs only in the browser.

How does Angular incremental hydration with @defer work?▼

Incremental hydration uses @defer blocks with hydrate triggers such as on viewport, on interaction, on idle, on timer, or never. Components stay as static server-rendered HTML until the trigger fires, reducing initial JavaScript execution.

Related Skills

Explore More Software Engineering Skills→
huajian123huajian123
713

angular-ssr

Configure server-side rendering and hydration for Angular v20+ applications.

Community
Advanced
archview-aiarchview-ai

openwebf-release-cdn-deploy

Plan and implement CDN deployment of WebF assets with cache headers and verification.

Official
Advanced
guilhermemarketingguilhermemarketing
59

seo

Improves website search ranking via technical SEO audits and on-page optimization.

Community
Intermediate
LeoWSY-hashblueLeoWSY-hashblue
3

techstack-frontend

Identify client-side frameworks and build tools from HTML and JavaScript signals.

Community
Intermediate