Setting Up Angular SSR
Add SSR with the Angular CLI.
Setting Up Angular SSR is a free Angular Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Adding SSR
The fastest way to enable SSR is the schematic ng add @angular/ssr. It wires up the server build, an Express-based server, and hydration for you.
// terminal
// ng add @angular/ssrNew Projects
When creating a new app you can opt in directly with the SSR flag, so the project starts SSR-ready.
// ng new my-app --ssrWhat The Schematic Adds
It adds a server.ts (Express server), a main.server.ts bootstrap, an app.config.server.ts, updates angular.json with server options, and enables hydration in the app config.
provideServerRendering
The server application config provides the SSR engine via provideServerRendering(), merged with your browser config.
// app.config.server.ts
import { provideServerRendering } from '@angular/ssr';
import { mergeApplicationConfig } from '@angular/core';
const serverConfig = { providers: [provideServerRendering()] };
export const config = mergeApplicationConfig(appConfig, serverConfig);Hydration On The Client
The browser config enables hydration so the client reuses server HTML instead of re-rendering. This is added automatically by the schematic.
// app.config.ts
import { provideClientHydration } from '@angular/platform-browser';
export const appConfig = {
providers: [provideClientHydration()]
};The Express Server
server.ts creates an Express app that serves static assets and delegates HTML rendering to the Angular SSR engine for all other routes.
// server.ts (simplified)
const app = express();
app.get('**', (req, res) => {
angularApp.handle(req).then(response =>
response ? writeResponseToNodeResponse(response, res) : res.sendStatus(404)
);
});Dev Server
During development ng serve runs SSR automatically with the application builder, so you see server-rendered output and hydration without extra steps.
// ng serveBuilding For Production
A production build emits a browser bundle and a server bundle. You run the Node server entry to serve SSR in production.
// ng build
// node dist/my-app/server/server.mjsBrowser-Only APIs
Code runs on the server too, where window, document, and localStorage do not exist. Guard such access or it will crash during SSR.
import { isPlatformBrowser } from '@angular/common';
import { inject, PLATFORM_ID } from '@angular/core';
const isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
if (isBrowser) { localStorage.setItem('k', 'v'); }Absolute URLs For HTTP
On the server, relative API URLs have no origin. Use absolute URLs or configure a base so server-side HttpClient calls resolve correctly.
Verifying SSR Works
To confirm SSR, request a page and inspect the raw response (for example with curl). You should see rendered content in the HTML, not just an empty app root.
// curl http://localhost:4000/ | grep "<h1>"Quick Check
Check your SSR setup knowledge.
Recap
You set up SSR with ng add @angular/ssr: it adds an Express server, provideServerRendering(), and client hydration. Remember to guard browser-only APIs, use absolute URLs server-side, and verify rendered HTML in the raw response.
Frequently asked questions
Is the “Setting Up Angular SSR” lesson free?
Yes — the full text of “Setting Up Angular SSR” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.
What will I learn in “Setting Up Angular SSR”?
Add SSR with the Angular CLI. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Angular Academy?
No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Setting Up Angular SSR” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Angular Academy lesson?
Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.