Seamus  Quitzon

Seamus Quitzon

1595066520

Server Side Rendering (SSR) in Angular 5+ | The simplest and quickest SSR approach

Most of web applications out there are Client Side Rendered, that means all the necessary codes (HTML, CSS, JavaScript) are bundled together and shipped to the client browser at once. Depending on browser URL, frameworks like Angular, React, Vue etc. uses that code to show different views by manipulate DOM and making network requests. This drastically improves user experience but at some cost.

With above approach, user has to wait for a long time before all the necessary files are downloaded, which consists of framework code and application code. Until those files are downloaded, user is forced to see a blank page. Since, all the meaningful views are generated on client side, search engine and social media bots which do not have capability of executing JavaScript, only gets blank index.html page, hence no search engine indexing and social snippet previews. To resolve these problems, we need to render HTML code on the server when user or bots make a request for a page.

In Angular, basically index.html page is served from express server for all the URL paths and that index.html page is passed through some express view engine which injects HTML into <app-root></app-root>, based on current route and component for that route.

So in this article, I will explain step by step implementation of server side rendering with some examples. Make sure you have Angular CLI 1.6+ version installed. If you are creating new angular application, then better install new version of Angular CLI with following command

npm install -g @angular/[email protected]

First, we need to create a angular app with routing. Routing is not necessary, but just to show you how server side rendering works for different URLs, we are going to import a routing module. To create a angular app with routing module automatically generated and scss style support, use below command.

ng new angular-ssr-example --style scss --routing

This will create angular-ssr-example folder, where our angular code will be located. Let’s open that in VS Code or your favourite code editor.

Let’s understand how server side rendering works in practice. Traditionally, we used to serve entire dist folder (technically, only _index.html_ file from_dist__ folder_) which contains build files of our angular application. But now, we are going to create a express server which serves index.html file from dist-browser folder.

#javascript #server-side-rendering #angular-5 #angular-universal #angular

Server Side Rendering (SSR) in Angular 5+ | The simplest and quickest SSR approach