In this tutorial, we will create an angular application with the angular-cli, then make it server-side rendered (SSR). We use server-side rendering to improve performance and help our search engine crawler visibility.
Angular is a JavaScript framework that only loads a bare HTML skeleton at first, then fetches JS files from the server to populate the HTML. If we don’t use SSR, then search engine crawlers will see the bare HTML and move on to the next page. Some search engine crawlers claim to be able to handle JS frameworks that function like this, but we’ll look at how to implement SSR into our application to make sure that all crawlers will see the same page that the user sees.
Note: This tutorial assumes that node is installed. This tutorial is for Angular 12. The steps should be the same for newer versions of Angular, but check the Angular Universal page for up-to-date information.
First, we’ll install the angular-cli. If it’s already installed, then skip this step.
npm install -g @angular/cli
Next, we’ll create our Angular project. Make sure the terminal is in the folder you want to create the angular project as it can take a long time to move the project later due to the amount of files. You can change the app name later, but it is tedious and generally frowned upon as it can create problems, so make sure it’s a good name. We’ll run the following command to create the project.
ng new APP-NAME
We can enter the project’s root folder and run ng serve -o. This will open a browser window with our application running. Congratulations, we’ve made an Angular application. But that’s not enough for us. Let’s add SSR to this application. Use CTRL+C to stop the application.
Angular calls this Angular Universal, as it can do more than just SSR, but for this tutorial we will just focus on SSR. All we need to do to get SSR running in our project is to just run the following command in the project’s root folder.
ng add @nguniversal/express-engine
And that’s it! instead of using the ng serve command to run our project, we need to run a node server instead with npm run dev:ssr and navigate to the address the console says and the same application should be working.
There are some things to know about SSR. The server has no idea what document, window, localStorage, and a lot of other JS objects are, so we should make a service to tell when we are on the server or in the browser so we can use JS objects properly. First, we’ll run the following command to generate a service.
ng generate service services/platform
or
ng g s services/platform
There are no differences between the two commands. The second command is just shorthand for the first. We can save the service where ever and name it what ever, but we’ll save it in the services folder and call it platform. Next we’ll open platform.service.ts. In the constructor, we need to inject the platform id variable to be able to tell if we’re in the server or in the browser. We do this by changing the following.
constructor() { }
to
constructor(@Inject(PLATFORM_ID) private platformId: Object
This creates a private variable that’s only available in the service that holds the platform id. It’s not important to understand what the platform id actually is, all we need to know is that we use it to tell if we’re in the server or the browser.
Let’s create two functions to be able to check if we’re in the server or the browser.
public isBrowser(): boolean {
[tab]return isPlatformBrowser(this.platformId);
}
public isServer(): boolean {
[tab]return isPlatformServer(this.platformId);
}
We can then import the platform service into our components or services by adding private platformService: PlatformService in our constructor like we did for the platform id, but without the inject part, and then use if(this.platformService.isBrowser()) { } or if (this.platformService.isServer() { } to check if we’re in the browser or on the server.
