Angular — SSR

What is SSR?

Server-Side Rendering renders the Angular app on the server before sending to the client.

Enable SSR

ng new my-app --ssr

How SSR Works

1. Request comes to server
2. Angular renders on server
3. HTML sent to client
4. JavaScript bootstraps app

Benefits

Benefit	Description
SEO	Search engines can crawl
Performance	Faster first paint
Social Sharing	Better meta tags
Accessibility	Content visible without JS

Server-Side Data

// Resolve server data
export const userResolver: ResolveFn<User> = (route) => {
  const http = inject(HttpClient);
  return http.get<User>(`/api/users/${route.params['id']}`);
};

Transfer State

// Transfer data from server to client
export const userResolver: ResolveFn<User> = (route, state) => {
  const transferState = inject(TransferState);
  const key = makeStateKey<User>('user');
  
  if (transferState.hasKey(key)) {
    return transferState.get(key, null)!;
  }
  
  return inject(HttpClient).get<User>(`/api/users/${route.params['id']}`)
    .pipe(tap(user => transferState.set(key, user)));
};

Mini Practice

1. Enable SSR in a project
2. Add data resolvers
3. Use transfer state
4. Test SSR output

Up Next

Continue with TypeScript — TypeScript in Angular.