Server Side Rendering with Angular Universal

What is Server-Side Rendering (SSR)

Server-side rendering (SSR), is the ability of an application to contribute by displaying the web page on the server instead of rendering it in the browser. Server-side sends a fully rendered page to the client. Server-side rendering (SSR) is a popular technique for rendering a client-side single page application (SPA) on the server and then sending a fully rendered page to the client. This allows for dynamic components to be served as static HTML markup.

Why we use Server-Side Rendering (SSR)?

-Search engine optimization (SEO). Plays an important role in SEO (search engine optimization) and correctly indexes webpages.

-Improve performance on web and mobile devices.

-Enables pages to load faster which provides a better user experience.

-It provides body to the HTML pages for all server ships.

-It assists with loading the page when the user has a slow internet connection.

Setting up Angular Universal in the Project to run the below command in the project folder. 

ng add @nguniversal/express-engine

This command will install the required packages and add some new files for setting up SSR

src/main.server.ts,

src/app/app.server.module.ts,

tsconfig.server.json,

webpack.server.config.js,

server.ts,

It will also update the following files accordingly:

package.json,

angular.json,

src/main.ts,

src/app/app.module.ts

After that Create one Home Component

As like we can update the Title and Description for a particular page in our application

Run the application and check the content of the web page using the below command.

npm run build:ssr && npm run serve:ssr