Why do we need help with Angular?

Server-side rendering (SSR) refers to the practice of rendering a website or application on the server and delivering the fully-rendered HTML to the client's browser. In contrast, JavaScript-based applications, such as single-page applications (SPAs) like Angular, render content on the client-side, which means the server delivers a mostly blank page and the browser has to execute JavaScript to display the content.

What we need to do is execute the code that would normally happen when a user opens the application and store the results. This will make it easy for Search Engines to analyze the content. That is what Angular Universal does.

Angular Universal

Way back when I was pondering whether to write this website myself, Angular Universal was quite complicated.  Today there are only three things you have to do if you want to prerender your application and get index.html files for every route (which is a good solution for me, since my page structure does not change too often):

 

1. Add Angular universal to your project by calling this command from your console in the root of your project:

ng add @nguniversal/express-engine

You might run into problems if the Angular version in the project is different from the one you are trying to install. However, the rest is straightforward. 

 

2. Create a file with all routes you want to prerender. You will probably do this with a script. The file should look something like this:

/
/about
/article/quarkus
/article/fractal-tree-generator
...

Let's assume you store the file under "./pathTo/routes". Change the prerender script in package.json and add the routes-file parameter:

{
  "name": "furcino-frontend",
  "version": "0.0.1",
  "scripts": {
    "ng": "ng",
    ...
    "prerender": "ng run furcinoFrontend:prerender --routes-file='./resources/routes'"
  },
  ...
}

 

3. Run this from your project root:

npm run prerender

After you are done, there should be a browser folder in your dist folder containing all the paths as directories with an index.html inside. You can upload them to the server. The pages switch to "Javascript mode" once the scripts are loaded. 

 

And there we go. We have just successfully rendered the whole application to HTML. Now we can enjoy faster page load times and better support for meta tags and structured data. That is what web crawlers crave.