Dynamic Rendering How it works
Featured Alt: A geometric diagram showing cubes, symbolizing dynamic processors and how dynamic rendering works.
If you are a proud owner of a website running on JavaScript, you are probably aware of indexing issues with Google. Google has problems with “crawling” or also known as extracting data from websites to index them properly. With dynamic rendering that was introduced in May 2018, this game-changer helped in many ways and solved the issue that many websites had. Here is your chance to understand how dynamic rendering works, and learn how to successfully implement it on your website.
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:
-
jQuery
-
Angular JS
-
React
-
Vue.js
These JavaScript frameworks will create issues with indexing.
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.
Since crawlers need static data to work, the issue happens when you have dynamic data on your website. It cannot properly read the code of JavaScript, and that creates issues. That is why you need to implement dynamic rendering.
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
- Rendertron
- Prerender.io
Puppeteer
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.
Rendertron
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.
Prerender.io
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.
Testing
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
Even if this process seems complicated, you should not give up JavaScript. With it, you can implement powerful features on your website, which makes the entire experience fantastic. You should start learning how dynamic rendering works, and enjoy JavaScript features without worrying whether your website will be indexed properly or not.
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.
