What is JavaScript rendering? (And why it matters for SEO)
Posted by Jenni Finch on July 4, 2022
What Is JavaScript Rendering?
Before JavaScript code can be displayed and shown to users, it must be processed and rendered. Google has mentioned that they index JavaScript pages/content in three stages – a first wave where it crawls the pages, a second wave which renders the JavaScript and finally the third wave which then indexes the page.
Google has to process JavaScript to understand it and puts it in a queue to come back to. The time this can take can be days or weeks (typically it’s not that long), therefore during this time, the pages won’t be effectively indexed. In addition, this also uses up the total crawl budget of a site.
It is also worth noting, that while Google can crawl and index JavaScript websites, some search engines cannot render JavaScript at all. Therefore, solutions such as pre-rendering or server-side rendering are a good option and also ensures your website is optimal performance-wise.
Types of Rendering
Client-Side Rendering
With client-side rendering, JavaScript is loaded in the browser rather than on the server. Therefore, search engines will initially see a blank screen or one with very little content, while waiting for the content to be rendered.
Maybe you’ve come across this message before?
“You need to enable Javascript to run this app.”
While this is fine and Google is able to render JavaScript content, client-side rendering does have its own performance issues and delays, such as relating to the First Contentful Paint, when compared to other rendering solutions such as Server-Side Rendering (SSR).
Server-Side Rendering
With server-side rendering, the HTML of the page is returned on the first request a browser makes (it is rendered and loaded directly from the server), instead of waiting for the JavaScript to load in the browser and then be rendered.
The main advantage to using server-side rendering is that search engines are able to see this HTML content and crawl and index it without having to execute the JavaScript that is in place. Search engines may also not wait more than a few seconds for the page to load, so it is better to load the content, ready for them to index with server-side rendering.
Server-side rendering also can reduce initial load time, meaning a better performance and a better experience for users.
There is also a proportion of internet users, i.e. screen readers, that will not be able to render JavaScript, therefore it is important that the content is available to them and they are able to access the website. Server-side rendering helps achieve this.
Dynamic Rendering
Alternatively, pre-rendering or dynamic rendering, recommended by Google, is another solution which detects the search engine bot (usually via recognising the user-agent) and serves them a pre-rendered version. A static HTML site is sent to crawlers and search engines to allow them to discover content easier. Users will get the client-side rendered version of the site, depending on user-agent.
Prerender.io is a dynamic rendering solution that is recommended by Google. Dynamic rendering is also a recommended solution by search engines for rendering JavaScript.
Summary
Whichever solution you choose for your rendering, it’s worth exploring all the options to make sure you pick the right solution for your business.
Dynamic rendering is less resource-intensive than server-side rendering and it is easier to implement, however, server-side rendering gives users and search engines the fully rendered version of the site without having to request any additional resources. Client-side rendering can end up with a poor user experience for users as it adds time to the load, which is especially an issue with slower devices, however, it is a cheaper option.