//[doc-seo]
{
  "Description": "Learn how to configure Server-Side Rendering (SSR) for your Angular application in the ABP Framework to improve performance and SEO."
}

yarn ng generate @abp/ng.schematics:ssr-add

yarn ng generate @abp/ng.schematics:ssr-add --project MyProjectName

{
  "dependencies": {
    "express": "^4.18.2",
    "openid-client": "^5.6.4"
  },
  "devDependencies": {
    "@types/express": "^4.17.17"
  }
}

{
  "projects": {
    "MyProjectName": {
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/MyProjectName",
            "outputMode": "server",
            "ssr": {
              "entry": "src/server.ts"
            }
          }
        }
      }
    }
  }
}

import {
    AngularNodeAppEngine,
    createNodeRequestHandler,
    isMainModule,
    writeResponseToNodeResponse,
} from '@angular/ssr/node';
import express from 'express';
import { dirname, resolve } from 'node:path';
import { fileURLToPath } from 'node:url';
import { environment } from './environments/environment';
import { ServerCookieParser } from '@abp/ng.core';
import * as oidc from 'openid-client';

// ... (OIDC configuration and setup)

const app = express();
const angularApp = new AngularNodeAppEngine();

// ... (OIDC routes: /authorize, /logout, /)

/**
 * Serve static files from /browser
 */
app.use(
    express.static(browserDistFolder, {
        maxAge: '1y',
        index: false,
        redirect: false,
    }),
);

/**
 * Handle all other requests by rendering the Angular application.
 */
app.use((req, res, next) => {
    angularApp
        .handle(req)
        .then(response => {
            if (response) {
                res.cookie('ssr-init', 'true', {...secureCookie, httpOnly: false});
                return writeResponseToNodeResponse(response, res);
            } else {
                return next()
            }
        })
        .catch(next);
});

// ... (Start server logic)

export const reqHandler = createNodeRequestHandler(app);

import { RenderMode, ServerRoute } from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
    {
        path: '**',
        renderMode: RenderMode.Server
    }
];

import { mergeApplicationConfig, ApplicationConfig, provideAppInitializer, inject, PLATFORM_ID, TransferState } from '@angular/core';
import { isPlatformServer } from '@angular/common';
import { provideServerRendering, withRoutes } from '@angular/ssr';
import { appConfig } from './app.config';
import { serverRoutes } from './app.routes.server';
import { SSR_FLAG } from '@abp/ng.core';

const serverConfig: ApplicationConfig = {
    providers: [
        provideAppInitializer(() => {
            const platformId = inject(PLATFORM_ID);
            const transferState = inject<TransferState>(TransferState);
            if (isPlatformServer(platformId)) {
                transferState.set(SSR_FLAG, true);
            }
        }),
        provideServerRendering(withRoutes(serverRoutes)),
    ],
};

export const config = mergeApplicationConfig(appConfig, serverConfig);

yarn start
# or
yarn ng serve

yarn run serve:ssr:project-name

yarn run dev:ssr

yarn run build:ssr
yarn run serve:ssr

import { RenderMode, ServerRoute } from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
    // Server-Side Rendering - renders on every request
    {
        path: 'dashboard',
        renderMode: RenderMode.Server
    },

    // Prerender (SSG) - renders at build time
    {
        path: 'about',
        renderMode: RenderMode.Prerender
    },

    // Client-Side Rendering - renders only in browser
    {
        path: 'admin/**',
        renderMode: RenderMode.Client
    },

    // Default fallback
    {
        path: '**',
        renderMode: RenderMode.Server
    }
];

{
    path: 'blog/:slug',
        renderMode: RenderMode.Prerender,
        getPrerenderParams: async () => {
        const posts = await fetchBlogPosts();
        return posts.map(post => ({ slug: post.slug }));
    }
}

export const serverRoutes: ServerRoute[] = [
    // Static pages
    { path: '', renderMode: RenderMode.Prerender },
    { path: 'about', renderMode: RenderMode.Prerender },

    // Dynamic pages
    { path: 'account', renderMode: RenderMode.Server },
    { path: 'orders', renderMode: RenderMode.Server },

    // Admin area
    { path: 'admin/**', renderMode: RenderMode.Client },
];

// ❌ Bad - will fail on server
const width = window.innerWidth;

// ✅ Good - check platform
import { isPlatformBrowser } from '@angular/common';
import { PLATFORM_ID, inject } from '@angular/core';

export class MyComponent {
    platformId = inject(PLATFORM_ID);

    getWidth() {
        if (isPlatformBrowser(this.platformId)) {
            return window.innerWidth;
        }
        return 0;
    }
}

// ❌ Bad - generates different values on server and client
id = Math.random();
currentTime = new Date();

// ✅ Good - use TransferState for consistent data
import { TransferState, makeStateKey } from '@angular/core';

TIME_KEY = makeStateKey<string>('time');
transferState = inject<TransferState>(TransferState);
time: string;

constructor() {
    if (isPlatformServer(this.platformId)) {
        this.time = new Date().toISOString();
        this.transferState.set(this.TIME_KEY, this.time);
    } else {
        const timeFromCache = this.transferState.get(this.TIME_KEY, new Date().toISOString());
        this.time = timeFromCache;
    }
}

// app.config.ts
import { provideClientHydration, withDebugTracing } from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {
    providers: [
        provideClientHydration(withDebugTracing()),
    ]
};

// server.ts
const PORT = process.env['PORT'] || 4000;
const HOST = process.env['HOST'] || 'localhost';

// Start the server
if (isMainModule(import.meta.url)) {
    app.listen(PORT, () => {
        console.log(`Server running on http://${HOST}:${PORT}`);
    });
}

# .env file or environment configuration
NODE_ENV=production
PORT=4000
HOST=0.0.0.0
API_URL=https://api.yourdomain.com

yarn build
# or if using Webpack builder
yarn run build:ssr

dist/MyProjectName/
├── browser/       # Client-side bundles
└── server/        # Server-side bundles (server.mjs)

npm install --production

node server/server.mjs

npm install -g pm2
pm2 start server/server.mjs --name "my-app"
pm2 startup  # Configure PM2 to start on boot
pm2 save     # Save current process list

import { isPlatformBrowser } from '@angular/common';

if (isPlatformBrowser(this.platformId)) {
    // Safe to use window, document, localStorage, etc.
}

import { AbpLocalStorageService } from '@abp/ng.core';

@Injectable({ providedIn: 'root' })
export class MyService {
    private storage = inject(AbpLocalStorageService);

    saveData(key: string, value: string): void {
        // Safe on both server and client
        this.storage.setItem(key, value);
    }

    getData(key: string): string | null {
        // Returns null on server, actual value on client
        return this.storage.getItem(key);
    }
}

// app.config.ts
import { provideAbpCore } from '@abp/ng.core';

export const appConfig: ApplicationConfig = {
    providers: [
        provideAbpCore(),
        // transferStateInterceptor is automatically included
    ]
};

// This service automatically benefits from the interceptor
@Injectable({ providedIn: 'root' })
export class UserService {
    private http = inject(HttpClient);

    getUsers() {
        // On server: Response is cached in TransferState
        // On client: Cached response is used (no duplicate request)
        return this.http.get<User[]>('/api/users');
    }
}