What is Server Side Routing in angular? See Example

Routing is a core part of any Angular application. While client-side routing is the default approach in Angular, server-side routing becomes crucial when you want better SEO, faster first contentful paint (FCP), and improved performance—especially for content-heavy or public-facing websites.

With Angular 21, server-side routing is commonly implemented using Angular Server-Side Rendering (SSR) via Angular Universal. This blog explains what server-side routing is, how it works in Angular 21, and how to implement it with practical examples.

---

What Is Server-Side Routing?

Server-side routing means that when a user visits a URL (for example, /blog/angular-routing), the server processes the route first and sends a fully rendered HTML page to the browser.

Client-Side Routing (Default Angular)

• Browser loads a single index.html
• Angular handles route changes using JavaScript
• Content is rendered after JS execution

Server-Side Routing (SSR)

• Server detects the requested route
• Angular renders the route on the server
• Fully populated HTML is sent to the browser

---

Why Use Server-Side Routing in Angular 21?

Key Benefits

1. SEO Friendly – Search engines can index pre-rendered HTML
2. Faster Initial Load – HTML arrives with content already rendered
3. Better Social Sharing – Meta tags are correctly generated per route
4. Improved Performance on Low-End Devices

---

Angular 21 and Server-Side Rendering

Angular 21 continues to support SSR through Angular Universal, now streamlined with standalone APIs and modern builders.

Creating an Angular 21 App with SSR

ng new angular-ssr-app –ssr

cd angular-ssr-app

ng serve

This command automatically:

• Configures server-side rendering
• Creates server.ts
• Adds main.server.ts
• Sets up routing for SSR

---

Example: Server-Side Routing in Angular 21

Step 1: Define Routes

// app.routes.ts

import { Routes } from ‘@angular/router’;

import { HomeComponent } from ‘./home/home.component’;

import { BlogComponent } from ‘./blog/blog.component’;

export const routes: Routes = [

{ path: ”, component: HomeComponent },

{ path: ‘blog/:slug’, component: BlogComponent },

{ path: ‘**’, redirectTo: ” }

];

---

Step 2: Enable Router in App Config

// app.config.ts

import { provideRouter } from ‘@angular/router’;

import { routes } from ‘./app.routes’;

export const appConfig = {

providers: [provideRouter(routes)]

};

---

Step 3: Blog Component (SSR-Friendly)

import { Component, inject } from ‘@angular/core’;

import { ActivatedRoute } from ‘@angular/router’;

@Component({

selector: ‘app-blog’,

template: `

<h1>Blog: {{ slug }}</h1>

<p>This content is rendered on the server.</p>

`

})

export class BlogComponent {

route = inject(ActivatedRoute);

slug = this.route.snapshot.paramMap.get(‘slug’);

}

The server renders the page before sending it to the browser.

---

Handling Meta Tags in Server-Side Routing

Meta tags are critical for SEO in SSR applications.

import { Meta, Title } from ‘@angular/platform-browser’;

constructor(private meta: Meta, private title: Title) {

this.title.setTitle(‘Angular 21 Server-Side Routing’);

this.meta.updateTag({

name: ‘description’,

content: ‘Learn how server-side routing works in Angular 21’

});

}

Angular Universal ensures these tags are rendered on the server.

---

Server-Side Route Handling in server.ts

import { app } from ‘./src/main.server’;

import express from ‘express’;

const server = express();

server.get(‘*’, (req, res) => {

app.render(req, res);

});

server.listen(4000, () => {

console.log(‘SSR server running on http://localhost:4000’);

});

This ensures all routes are processed server-side.

---

Data Fetching with SSR

When using HTTP calls:

this.http.get(‘/api/posts’).subscribe(data => {

this.posts = data;

});

Angular SSR waits for data to load before rendering the page.

Best Practice

• Use TransferState for caching
• Avoid browser-only APIs like window or document

---

Common Mistakes to Avoid

❌ Using window directly without platform checks
❌ Heavy client-only libraries during SSR
❌ Missing fallback routes on the server

Platform Check Example

import { isPlatformBrowser } from ‘@angular/common’;

if (isPlatformBrowser(this.platformId)) {

console.log(‘Browser-only code’);

}

---

When Should You Use Server-Side Routing?

✔ Blogs and news portals
✔ Marketing websites
✔ E-commerce product pages
✔ Public-facing dashboards

❌ Internal admin panels (usually unnecessary)

---

Conclusion

Server-side routing in Angular 21 enhances SEO, performance, and user experience by rendering routes on the server before sending them to the browser. With Angular Universal and modern routing APIs, implementing SSR has become simpler and more powerful.

If you’re building a content-rich Angular application, server-side routing is no longer optional—it’s essential.

View More Angular 21 Updates:

https://savanka.com/category/news/angular-21-features

Source:

http://angular.dev/