Search code examples
angularangular5reverse-proxyfacebook-sharetwitter-share

In Angular 4/5, instead of prerendering each request, is it possible to prerender only request that coming from Facebook and Twitter crawler


In Angular 4/5, instead of prerendering each request, is it possible to prerender only requests that come from Facebook and Twitter crawler i.e. when the user shares those URLs on Facebook or Twitter. I was thinking if we can implement something like this using a reverse proxy where if the request is coming from Facebook or Twitter bot then I can serve them from a different environment which pre-renders the Angular code.

I have a dynamic website which I can't cache as well as due to heavy traffic it would be inefficient to pre-render each request.


Solution

  • Okay, so I found 2 solutions.

    1. The Google, Facebook, Twitter etc. crawlers have their own user agent i.e.
    googlebot
    bingbot
    twitterbot
    facebookexternalhit
    linkedinbot
    

    So, in the apache or nginx, we can write condition to pre-render only the request that is coming from a bot.

    1. Create an application in any language to dynamically serve only index.html file of Angular application, where you embed the og meta tags on run time with respect to the requested url.

      Hope this solution will help someone.