In this article, we will learn how to implement server-side rendering in Angular 11 with angular universal.

We can build SEO friendly angular apps by the server-rendering our app with angular universal. Angular Universal technology can help to boost angular app’s performance.

Why SEO is important?

SEO (Search Engine Optimization) is an important feature in any web application because they allow the web app to be discovered by social media networks and search engines.

Let’s see an example of how to do that,

Prerequisites:

• Basic knowledge of Angular
• Code editor like Visual Studio Code

Create a new Angular project by typing the following command in the VSCode terminal.

ng new seo-demo

Now, open the newly created project and execute the commands given below to set up Angular Universal.

ng add @nguniversal/express-engine --clientProject seo-demo

NOTE: The project name mentioned in the above command must be the same as the project name in angular.json.

The schematic will automatically add an express server and also the required configurations and packages. The express server will render a part of the Angular app and return HTML to the browser.

Now, let’s execute the commands given below to build or run an angular app with the express server.

npm run build:ssr
npm run serve:ssr

You can see the page source difference in output, before and after the server-side rendering build.

Output:

Please give your valuable feedback and if you have any questions or issues about this article, please let me know. Also when you build your existing project with server-side rendering, it may get fails because angular universal have some predefined rules. I will add a solution for some of the common errors related to angular universal/server-side rendering in my upcoming articles.

Also, check Drag & Drop Image Upload In Angular 10 With .NET Core