What is Angular Universal (SSR)?
Why Interviewers Ask This
Foundational questions like this help interviewers calibrate the rest of the interview. A confident, accurate answer signals that you have solid Angular basics — a prerequisite for any developer role.
Answer
Angular Universal (now integrated into Angular as @angular/ssr) enables Server-Side Rendering (SSR) of Angular applications — the app renders to HTML on the server and sends the pre-rendered HTML to the client. Why SSR? (1) SEO: search engine crawlers receive fully rendered HTML, not an empty shell with JavaScript; (2) Performance: users see content faster (First Contentful Paint) — the browser shows HTML immediately without waiting for JavaScript to execute; (3) Social sharing: Open Graph meta tags are pre-rendered for proper social media cards. Setting up SSR: ng add @angular/ssr — adds server-side rendering with Express.js. Creates server.ts (Express server), app.config.server.ts (server config), and updates build configuration. Hydration: after SSR HTML is displayed, Angular "hydrates" it — attaches event handlers and activates the Angular app in the browser. Without hydration, Angular re-creates the DOM. Non-destructive hydration (Angular 16+): Angular can reuse the server-rendered DOM instead of recreating it — reduces flickering and improves LCP metric. Platform-specific code: some APIs (localStorage, window, document) don't exist on the server. Use isPlatformBrowser/isPlatformServer, or inject the PLATFORM_ID token to guard platform-specific code. Static Site Generation (SSG/prerendering): ng build --prerender — generates static HTML files at build time for all or specific routes.
Common Mistake
A common mistake is memorizing definitions without understanding implications. When asked this question, go one level deeper — explain what happens when this concept is misused or ignored.