Why SSR matters for Angular

Introduction

SSR (Server-Side Rendering) helps Angular apps load faster and work better for everyone, including search engines and users with slow internet.

When you want your Angular app to show content quickly on the first load.

When you want search engines to easily find and understand your app's pages.

When users have slow internet or older devices and need faster page display.

When you want better social media previews with correct page content.

When improving overall user experience and accessibility is important.

Syntax

Angular

import { renderModule } from '@angular/platform-server';

renderModule(AppServerModule, {
  document: '<app-root></app-root>',
  url: '/home'
}).then(html => {
  console.log(html);
});

This code runs Angular on the server to create HTML before sending it to the browser.

The is the main Angular component where the app starts.

Examples

This example renders the 'About' page on the server and logs the HTML output.

Angular

import { renderModule } from '@angular/platform-server';

renderModule(AppServerModule, {
  document: '<app-root></app-root>',
  url: '/about'
}).then(html => console.log(html));

This shows how to prepare the 'Contact' page HTML on the server before sending it to users.

Angular

import { renderModule } from '@angular/platform-server';

renderModule(AppServerModule, {
  document: '<app-root></app-root>',
  url: '/contact'
}).then(html => {
  // send this HTML to the browser
});

Sample Program

This simple Angular app uses SSR to create HTML on the server. It shows a welcome message and paragraph. The renderModule function runs the app on the server and prints the full HTML.

Angular

import { Component, NgModule } from '@angular/core';
import { renderModule, ServerModule } from '@angular/platform-server';

@Component({
  selector: 'app-root',
  template: `<h1>Welcome to SSR with Angular!</h1><p>This content is rendered on the server.</p>`
})
class AppComponent {}

@NgModule({
  declarations: [AppComponent],
  imports: [],
  bootstrap: [AppComponent]
})
class AppModule {}

@NgModule({
  imports: [AppModule, ServerModule]
})
class AppServerModule {}

renderModule(AppServerModule, { document: '<app-root></app-root>', url: '/' })
  .then(html => {
    console.log(html);
  });

Important Notes

SSR improves the first impression by showing content faster than waiting for the full app to load.

Search engines can read server-rendered HTML easily, helping your site appear in search results.

Setting up SSR requires extra steps but greatly benefits user experience and SEO.

Summary

SSR means Angular renders pages on the server before sending to the browser.

This helps pages load faster and improves search engine visibility.

Use SSR when you want better performance and reach for your Angular app.