Server-side rendering with Rendertron - Angular 5 without firebase

Question

I am using rendertron as a solution for server side rendering, below is index.js file. How to execute index.js and where to execute. I have setup my own instance of redertro

Answer 1

I'm using an Angular 6 app and I was facing the same issue. I did it without using an express server or firebase, instead I used NGINX to check the agent header and route them to rendertron if it's a bot or to the angular app if it's a normal user.

Incase, if you wanted to take this approach using NGINX. Use this configuration.

server {
    server_name your-server-name;

    root /path to your dist;

    index index.html;

    location ~ /\. {
        deny all;
    }

    location / {
        try_files $uri @prerender;
    }

    location @prerender {
        set $prerender 0;

        if ($http_user_agent ~* "googlebot|yahoo|bingbot|baiduspider|yandex|yeti|yodaobot|gigabot|ia_archiver|facebookexternalhit|twitterbot|developers\.google\.com") {
            set $prerender 1;
        }

        if ($args ~ "_escaped_fragment_|prerender=1") {
            set $prerender 1;
        }

        if ($http_user_agent ~ "Prerender") {
            set $prerender 0;
        }

        if ($prerender = 1) {
            rewrite .* /render/$scheme://$host$request_uri? break;
            proxy_pass https://render-tron.appspot.com; #You can use our own hosted Rendertron
        }

        if ($prerender = 0) {
            rewrite .* /index.html break;
        }
    }
}

And yes, you can now pre-render if it's a bot.

If you still wanted to do it using a express, rendertron offers an express middleware. You can check it out here.

I found this NGINX configuration from prerender.io, you can find something useful for different server or any other approach in their repo.