Shulou(Shulou.com)06/02 Report--

Why do I need Rendertron?

Traditional Web pages are usually rendered on the server side, but with the popularity of SPA (Single-Page Application), especially the front-end frameworks represented by React, Vue and Angular, more and more Web App use client-side rendering.

Using client-side rendering has many advantages, such as saving back-end resources, local refresh, front-end separation and so on, but it also brings some challenges, such as the SEO problem to be solved in this article.

For the server-rendered page, the server can directly return the content in the form of HTML, and the search engine crawler can easily get the page content, while for the client-side rendering application, the client must execute the Javascript returned by the server to get the correct web content. At present, with the exception of Google and Bing, which support Javascript (there will also be some restrictions), most other search engines do not support Javascript, so they cannot get the correct web content.

Google's Rendertron is a tool to solve such a scenario. By using Rendertron,SPA, the rendered content can also be crawled by search engines that do not support Javascript. The principle is mainly by using Headless Chrome to execute Javascript in memory, and after getting the complete content, the content is returned to the client.

Introduction to the principle of Rendertron

Rendertron is usually deployed as a separate HTTP service, and then the Web application framework is configured with Google officially provided middleware or routing rules are added to the reverse proxy so that requests can be proxied to the Rendertron service when the UA of the search engine crawler is detected.

Rendertron provides two main API, Render and Screenshot. Render is used to render website content, and Screenshot is used to take screenshots of website content. The Render interface is used in the SEO scenario.

For example, when the client requests our website, our search line finds that the Baiduspider/2.0 keyword is included in the request header UserAgent, which can be considered as a Baidu crawler, and then the Mobile keyword is found in UserAgent, which means that the crawler is crawling mobile content. Based on the above judgment, you can route the request proxy / render/ https://www.aliyun.com/?mobile of the Rendertron service, let Rendertron help execute the Javascript within the page, and return the final content to the search engine crawler.

Effect at a glance

Google officially provides a sample https://render-tron.appspot.com/, which can experience the effect directly.

We also provide an example of deployment on function evaluation: http://renderton.mofangdegisn.cn

System architecture

Based on function calculation, our service architecture is as follows:

Performance testing

Here we choose Aliyun's performance testing PTS service for stress testing.

The test configuration is as follows:

We configure 100 parallel, test for 6 minutes, and stress test according to the rule of 20% increment every minute.

The website we are going to test is: http://renderton.mofangdegisn.cn/render/https://www.example.com/

The URL asks rendertron to request the content of the https://www.example.com/ site and return the rendered results.

The test overview is as follows:

As you can see from the above overview, due to the network requests from the function to https://www.example.com/, 99% of the requests with a minimum delay of 1106ms can be completed in 2011ms, 90% of the requests can be completed in 1347ms, 75% of requests can be completed in 1201ms, and 50% of requests can be completed in 1156ms. We increase the concurrency by 20% per minute. When the concurrency increases, the function calculation will encounter cold start, and the maximum time for cold start is 32261ms (preheating, reservation and other methods can be used to alleviate or completely eliminate the effect of cold start).

In the unoptimized scenario, our stress test results also reached 44.91 TPS, which is absolutely able to meet the needs of most websites.

The details of the pressure test are as follows:

The position indicated by the arrow above indicates a sudden increase in concurrency, and some cold starts will be encountered during the automatic expansion of the function. When the expansion is completed, the subsequent requests will be very smooth.

Deployment steps

It is not easy to deploy Rendertron to a traditional ECS or physical machine as a production service. In addition to the installation and configuration of Rendertron itself, you also need to consider how to expand capacity when traffic increases, and how to configure supporting services such as reverse proxy or load balancer.

Next, we will describe how function calculation solves these problems.

Refer to the link Fun installation tutorial, you can download the binary version of Fun directly here, decompress it and use it. Docker installation tutorial: local installation of dependencies requires the help of docker, you can download Docker directly here. 1. Clone Project: git clone https://github.com/GoogleChrome/rendertron.git

PS: the transformation is directly based on the official project, rather than providing a sample template to demonstrate how to smoothly migrate rendertron to function calculation. At the same time, after the official version is updated, it can be updated to the latest version as soon as possible.

two。 Create a template.yml profile:

Template.yml is the default description file for Fun, and the resources described by this description file can be deployed to the cloud with one click of fun deploy.

For example, our template below declares a service named Rendertron and a function named rendertron.

Function is the basic unit of function computing system scheduling and code execution, our rendertron project can run in the function, and service is the unit of management function computing resource management, a service can contain multiple functions.

For beginners, you can put the following template directly in the project root directory and name it template.yml.

ROSTemplateFormatVersion: '2015-09-01'Transform:' Aliyun::Serverless-2018-04-03'Resources: Rendertron: # declare a service named Rendertron Type: 'Aliyun::Serverless::Service' Properties: Description: This is Rendertron service rendertron: # declare a function named rendertron Type:' Aliyun::Serverless::Function' Properties: Handler: index.handler Runtime: custom # runtime We use custom Timeout: 60 MemorySize: 1024 CodeUri:. / Events: httpTrigger: # to add a http trigger Type: HTTP Properties: AuthType: ANONYMOUS Methods:-GET-POST-PUT renderton.mofangdegisn.cn: # add a custom domain name Type: 'Aliyun::Serverless::CustomDomain' Properties: Protocol: HTTP RouteConfig: routes: / *: ServiceName: Rendertron FunctionName: rendertron3. Create a bootstrap file

Next, create a file named bootstrap in the root directory of the project, which tells the function to calculate how to start rendertron. The contents of the file are as follows:

#! / usr/bin/env bashPORT=9000 HOST=0.0.0.0 npm run start4. Install dependencies & compile the project

Using fun install-d directly, you can install dependencies with one click, which is equivalent to npm install in the official documentation. Except that fun install-d not only installs npm dependencies, but also detects puppeteer dependencies contained in rendertron, and automatically installs apt dependencies necessary for puppeteer. For more details, please see this article:

Fun install-d

Then compile the project using the officially introduced npm run build:

Npm run build5. Run rendertron locally

There is no need to modify the code in the original project, we can start the function locally through fun local start renderton.mofangdegisn.cn and then access it through the browser.

Fun local start renderton.mofangdegisn.cn

The demonstration effect is as follows:

6. One-click deployment

When you run locally and debug to confirm that there is no problem, you can consider deploying it online. Before deployment, replace the domain name in template.yml with your own.

Here is a brief description of the next steps: if the AccountId of your Aliyun is 12345, then CNAME your domain name (domestic cluster needs to be licensed) to 12345.cn-shanghai.fc.aliyuncs.com, then update your domain name to template.yml, and execute fun deploy. You can refer to this document for more details.

Finally, you can deploy with one click of fun deploy.

Summary

Using Rendertron + function calculation can quickly build a Headless Chrome rendering solution that can be directly used in production, in order to help the website to better carry out SEO.

"Alibaba Cloud Native focus on micro-services, Serverless, containers, Service Mesh and other technology areas, focus on cloud native popular technology trends, cloud native large-scale landing practice, to be the best understanding of cloud native developers of the technology circle."

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.