Implementing Server-Side Rendering (SSR) in Angular Locally

Server-Side Rendering (SSR) in Angular enhances performance, SEO, and the initial load experience of your application. Unlike Client-Side Rendering (CSR), where the browser executes JavaScript to render pages dynamically, SSR generates HTML on the server before sending it to the client. This approach benefits applications by improving performance, reducing time-to-first-contentful-paint, and making pages more indexable by search engines.

In this guide, we will cover:

• Installing Angular Universal for SSR
• Optimizing performance with prerendering
• Deploying an SSR-enabled Angular application locally

---

Step 1: Install Angular Universal for SSR

1.1 Install Angular Universal

Angular Universal is the technology used to enable SSR in Angular applications. To integrate it, run the following command:

ng add @nguniversal/express-engine

This command:

• Installs the necessary packages
• Updates angular.json to include server-side configurations
• Generates server.ts, which configures an Express.js server to handle requests
• Modifies main.ts to enable SSR

1.2 Understanding the Generated Files

After installation, Angular Universal modifies your project by adding:

• server.ts: This is the Express.js server entry file used to serve SSR content.
• angular.json: Configuration updates for SSR support.
• tsconfig.server.json: A TypeScript configuration file specific to the server-side.
• main.server.ts: Entry point for the server-side version of your Angular application.

1.3 Build and Run the SSR Application Locally

After installing Angular Universal, build the application using:

npm run build:ssr
npm run serve:ssr

This command:

• Compiles the Angular application for SSR
• Starts an Express.js server to serve the rendered pages
• Runs the application on http://localhost:4000/

You can now visit your SSR-enabled Angular app in a browser.

---

Step 2: Optimize Performance with Prerendering

2.1 What is Prerendering?

Prerendering generates static HTML files for routes at build time, improving performance and reducing server load. It’s useful for static pages that don’t require real-time data fetching.

2.2 Enable Prerendering in Angular Universal

To enable prerendering, modify angular.json to include a prerender target:

"prerender": {
  "builder": "@angular-devkit/build-angular:prerender",
  "options": {
    "browserTarget": "your-app-name:build:production",
    "routes": ["/", "/about", "/contact"]
  }
}

Then, execute the following command to prerender pages:

npm run prerender

This command generates static HTML files for the specified routes and stores them in the dist folder.

2.3 Benefits of Prerendering

• Faster Load Times: Since pages are pre-generated, they load quickly.
• SEO Optimization: Search engines can easily crawl static HTML pages.
• Reduced Server Load: Eliminates the need for dynamic rendering on every request.

---

Step 3: Deploy SSR-Enabled Angular Locally

3.1 Running the SSR Application in Development Mode

To test your SSR setup locally, start the application using:

npm run serve:ssr

Open http://localhost:4000/ in a browser to see the SSR-enabled Angular application.

3.2 Debugging SSR Issues

Common issues when running SSR locally include:

• Missing Global Variables: If you use window, document, or localStorage, wrap them with a check to ensure they exist:

  if (typeof window !== 'undefined') {
    console.log('Running on the client-side');
  }
  

• Data Fetching in SSR Mode: Use Angular's TransferState module to cache server responses for the client:

  import { TransferState, makeStateKey } from '@angular/platform-browser';
  

• External API Calls: Avoid making API calls in constructors and instead use lifecycle hooks like ngOnInit.

3.3 Deploying Locally with PM2

PM2 is a process manager that can run and monitor Node.js applications, including an SSR Angular app. Install PM2 globally:

npm install -g pm2

Then start your SSR app with PM2:

pm run build:ssr
pm2 start dist/server/main.js --name angular-ssr-app

This runs the application in the background and ensures it stays alive after system restarts.

---

Conclusion

In this guide, we:

✅ Installed and configured Angular Universal for SSR ✅ Optimized performance using prerendering ✅ Deployed the SSR-enabled Angular application locally

By implementing SSR, your Angular application can achieve faster load times, improved SEO, and a better user experience. You can further enhance performance by integrating caching, lazy loading, and optimized data fetching.

Now, you are ready to build and deploy high-performance, SSR-enabled Angular applications! 🚀