How to implement SSR in angular ui side

Implementing Server-Side Rendering (SSR) in Angular can significantly improve the performance and SEO of your Angular applications. Angular Universal is the technology that enables SSR in Angular applications. Below are the steps to set up SSR in an Angular application.

Step-by-Step Guide to Implement SSR in Angular

1. Set Up Your Angular Application

If you don’t already have an Angular application, you can create one using Angular CLI:

bash
1ng new my-angular-app
2cd my-angular-app

2. Add Angular Universal

You can add Angular Universal to your application using the Angular CLI. This will configure your application for SSR.

bash
1ng add @nguniversal/express-engine

This command will:

• Install the necessary packages.
• Create a server-side application module (app.server.module.ts).
• Create a server file (server.ts).
• Update your Angular application configuration.

3. Update Your Application

Make sure your application is compatible with SSR. Here are a few considerations:

• Avoid Browser-Specific APIs: Make sure you don’t use browser-specific APIs directly in your application code. Use Angular’s isPlatformBrowser or isPlatformServer to check the platform.

• Handle Asynchronous Data: If your application fetches data, you need to ensure it’s available before rendering. You can use TransferState or Resolver to pre-fetch data.

4. Modify server.ts

The server.ts file is the entry point for your server. It should look something like this:

typescript
1import 'zone.js/dist/zone-node';
2import { enableProdMode } from '@angular/core';
3import { ngExpressEngine } from '@nguniversal/express-engine';
4import * as express from 'express';
5import { join } from 'path';
6import { APP_BASE_HREF } from '@angular/common';
7import { createServer } from 'http';
8
9enableProdMode();
10
11const app = express();
12const PORT = process.env.PORT || 4000;
13const DIST_FOLDER = join(process.cwd(), 'dist/my-angular-app/browser');
14
15app.engine('html', ngExpressEngine({
16  bootstrap: require('./dist/my-angular-app/server/main').AppServerModuleNgFactory,
17}));
18
19app.set('view engine', 'html');
20app.set('views', DIST_FOLDER);
21
22// Serve static files from /browser
23app.get('*.*', express.static(DIST_FOLDER, { maxAge: '1y' }));
24
25// All regular routes use the Universal engine
26app.get('*', (req, res) => {
27  res.render('index', { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
28});
29
30// Start the server
31createServer(app).listen(PORT, () => {
32  console.log(`Node server listening on http://localhost:${PORT}`);
33});

5. Build the Application

You need to build both the client and server parts of your application:

bash
1npm run build:ssr

This command will create a dist folder containing the server and browser builds of your application.

6. Run the Application

You can run your server using Node.js:

bash
1npm run serve:ssr

This command will start the server and you should be able to access your application at http://localhost:4000.

7. Test Your Application

Make sure to test your application to ensure that everything works as expected. You can use tools like Google Lighthouse to check the performance and SEO of your SSR application.

Additional Considerations

• SEO and Meta Tags: Use Angular's Meta service to manage meta tags for SEO purposes. Ensure that relevant meta tags are set up in the server-rendered HTML.

• Performance: Monitor the performance of your SSR application. Sometimes, SSR can introduce performance bottlenecks if not optimized properly.

• Caching: Implement caching strategies to enhance performance, especially for frequently accessed pages.

• Deployment: When deploying your Angular Universal application, ensure that your server environment supports Node.js.

Conclusion

Implementing SSR in Angular using Angular Universal is a powerful way to improve your application’s performance and SEO. By following the steps above, you can set up SSR in your Angular application and take advantage of its benefits.