Dynamic Rendering ~ A BOON!!!

The SEO Score: -

SEO has potential to make a major impact on company’s most important goals, like sales & leads. Let start our conversation by understand a general trend. Whenever you search anything on google, you get list of websites on your respective browser. Generally, 90% of people open only those sites which are listed on 1st page & in very rare cases, most probably only 1-2% people, tends to open website listed on 2nd or max to max 3rd page. So, if we started an e-commerce website or online business either product based or content-based & woefully our website got listed on 4th page or 10th page then our business will be impacted.

So now very next and obvious question which arise is what’s the difference between sites those got listed on 1st page and those which got listed on 4th page???

A very simple answer is SEO score. SEO stands for “Search Engine Optimisation” & SEO score indicates how well your site perform which contributes to your website’s organic ranking. So, now what we need to know is what all factor impacts SEO score?

Well, there are many, and that’s the reason it is difficult to cover all the factors in one single article. Here, we would be considering one of the important factors and that is JavaScript execution time. JavaScript is one of the most important part of the web application which assist in making robust applications. Currently its difficult to process JavaScript & not all search engine crawlers are able to process it successfully or immediately. And this eventually results to a bad SEO score.

Thus, solution to this is “Dynamic Rendering”. Dynamic rendering is good for content that uses JavaScript feature that aren’t supported by the crawlers. Let’s understand the concept if dynamic rendering & then we will be proceeding to a very insightful DEMO.

The Concept of Dynamic Rendering: -

Dynamic Rendering is the process or concept in which we identify requests that are made by crawlers to our content & serve those requests with the content suitable to the crawler like a static HTML version of content etc. So, I guess it very clear what is needed to be done. Now, “HOW we can achieve this??”, I would like to answer this question with a DEMO.

The DEMO: -

In our current setup I am having a ALB(Application Load Balancer) in front of an ec2 instance. In the ec2 instance I am have 2 scripts namely crawl.html & bot.html. And I am serving this website with help of AWS CloudFront.

First let me show you what both the script contains.

• crawl.html

• bot.html

Now here, I have not created an entire web application because my moto is to just show how with help of Lambda edge function, we can implement the concept of dynamic rendering. In this scenario, I am assuming that crawlers would be crawling crawl.html page. Now as per dynamic rendering we need to identify the request made by crawler and serve bot.html page to crawler as response. Thus, whenever normal user would be hitting crawl.html page he/she would be getting “Hello normal users :)” as output but, when crawler would be hitting crawl.html page it would be getting “Hello Search Engine BOT!!!” as output. Seems quite interesting. Let run through the lambda edge function further. Below I have shown the Lambda edge function which I have used.

NOTE: - This Lambda function is viewer request Lambda function. Thus, we need to attach it on viewer request end. It will process/analyse the request before it hits to cloudfront.?

def lambda_handler(event, context):

??? request = event['Records'][0]['cf']['request']

??? headers = request['headers']

??? print(request)

???

??? useragent = request['headers']['user-agent'][0]['value']

??? if "Googlebot" in useragent:

????? print("Google Bot")

????? request["uri"] = "/bot.html"

????? print(request)

??? return request?        

?For identifying whether request to our page is made by “Googlebot” or a “regular user”, we can use ‘user-agent’ header. If request is been made by regular user, then value of user-agent header would be something like this

'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36'

And if request is been made by Googlebot then value of user-agent would be like

'Mozilla/5.0 (compatible; Googlebot/2.1; +https://www.google.com/bot.html)'

So, in python function I have just simply used an if statement for identifying whether request has been made by regular user or Googlebot and accordingly I have changed uri for that respective request. This was the solution which I used, because I have not created a full fledge web application, thus I used this trick to demonstrate dynamic rendering. In real world what actually we can do is, we can pass custom header to our application or pass a specific query string to our application, whenever we identify that request has been initiated by Googlebot. And at backend our application will serve the content accordingly.

In the demo, first I made request to CloudFront as a regular user, and then I made a change in my chrome browser setting to stimulate the next request as if it was made by Googlebot.

Let’s view the demo :)?

I hope this article was useful for you. Don’t forget to share your feedback in comments?? Happy Learning & Happy Exploring!!!