Dynamic Rendering How it works
Featured Alt: A geometric diagram showing cubes, symbolizing dynamic processors and how dynamic rendering works.
What is dynamic rendering?
Dynamic rendering is a process that allows Google to extract an HTML version of your website, and use that data for indexing. Indexing is important because it allows your website to be visible when searched on Google. Without it, having a website would not mean a lot, since no one would be able to find it through search.
If you are creating a website, there are a lot of website details you might have overlooked. The indexing issue is one of them. With that in mind, let’s learn a bit more about all the properties of dynamic rendering.
How do you know if you need dynamic rendering?
Not all websites need dynamic rendering to be indexed by Google. This depends on the programming language and frameworks used to create your website. If your website is written in any of these frameworks, you will probably have to look into dynamic rendering:
What is crawling?
To understand dynamic rendering, we first must talk about crawling. Crawling is a technical term used to describe a program used for extracting HTML data from a website to further use it for indexing. These crawlers find their way to your website, pull all URLs and provide HTML data to Google.
How dynamic rendering works?
When your webserver detects crawlers on your website, it is routing them to the renderer. That is how the requests will be served normally. In some cases, when it becomes necessary, it will also forward a version of a static HTML page to a crawler. It can be done for the entire website, or it can be split into a page-by-page system.
If you wish to boost your local SEO score, it will be smart to use dynamic rendering in these cases.
How to implement dynamic rendering on your website?
When working with dynamic rendering, you should know that it requires knowledge of working in the command line. You have to do some alterations on your server, so if you are not experienced with this, the best is to look for professional help. It is also important to check if you have full access to the server. If you don’t have a full plan, you will not be able to implement dynamic rendering.
Furthermore, for implementing dynamic rendering there is one other thing you need to pick – a dynamic processor. This framework is what makes dynamic processing possible. Let’s see which dynamic processors exist:
Puppeteer is the official dynamic processor made by Google. It is completely free for use, and there are multiple useful features like generating PDF files, screenshots, and static renders for every page on your website.
Even though it is an open-source project, Rendertron is a bit more difficult to set up. Still, it is a perfect choice, because it is designed to specifically target Google’s crawlers.
This service is compatible with multiple platforms, like Node, Ruby, PHP. It is also open-source, but there is one thing that makes it easier to use. You have a variety of hosted solutions to pick from, and they come with a pre-made setup, so you don’t have to go through that.
Choosing a dynamic processor mostly depends on the level of your knowledge. If you are a beginner, Puppeteer is probably the best solution for you. However, if you know how dynamic processors work, and you have worked with them before, going with Renderton is definitely the best way.
Configuring dynamic processor
Whenever someone visits your website, that information gets noted on the server. These visits can be made both from regular visitors, and search bots.
With that in mind, when you are configuring your dynamic processor, you should “tell it” to forward static pages of your website only to bots. Since every server has a list of bot agents users, you should add search engine bot names to that list, using a few lines of code:
export const botUserAgents = [‘googlebot’,’google-structured-data-testing-tool’,’bingbot’,’slurp’,’duckduckbot’];
This line of code adds different web crawlers and user agents to the server, and the dynamic processor can look for them and serve them static pages of your website.
The last step is to test if your dynamic processor works as it should. If you look at the above line of code, you will notice there is something called Google Structured Data Testing Tool. What this handy application does is it renders a version of your website that shows if it is mobile-friendly. The tool works perfectly, and if your website is mobile-friendly, rendered pages should look spotless.
However, if you notice that rendered pages do not look good, this means you have some issues that need to be fixed as soon as possible. Keep checking the rendered pages until the result is satisfying.
How dynamic rendering works explained
What is Rendering in SEO
Pre-rendering — Essentially consists of Sending and Listing a pure HTML Type snapshot to the search engine bot when it requests your page. This ensures that the user can still enjoy the very fast speeds provided by CSR, while also serving the search engines the HTML content needed to index and rank your pages.