Sign In Sign Up

What is Dynamic Rendering?

It is becoming more commonly seen where modern websites are using Javascript-rich features in order to render images, videos or even full web pages (such as javascript front end frameworks like React or Angular - commonplace for usage on Single page applications, or on fully-featured web applications like a social media platform).

Sites created with heavy script features like this have historically struggled to rank as well on Google and other search engines, due to the javascript limitations of the search crawlers, pages requiring authentication to view and various other reasons.

In order to avoid this and improve rankings, a site may choose an alternative content rendering method on their page entirely dependant on whether the request to view the page/site is coming from a bot/crawler or a human agent.

Some sites may choose to have static HTML on an SEO-rich page if the request is determined to be from a crawler/bot. They determine this by checking request headers, IP addresses or occasionally both. This entire process is known as ‘Dynamic Rendering’.

Dynamic rendering (and dynamic serving) is an SEO technique where a web server, web app or website renders and serves its content in a form most discernible to the visitor depending on the type of user agent; be it crawlers or human users.

With regards to SEO (Search Engine Optimisation) and SMO (Social Media Optimisation), dynamic rendering involves serving a statically rendered, technical SEO-rich page to search engines like Google and other web bots in order to improve indexability.

This is especially important for Single Page Applications (SPA's) that have been built with React, Vue or Angular as a static HTML renderer. Dynamic rendering ensures search engines and social media services are able to index your content, as typically the default functionality of those pages will require multiple javascript-heavy calls to different API's, each of which returning different data for different users. This will become even more commonplace with AI being used to drive individual homepages to customers, with tailored purchasing recommendations.

Though Google and other search engines are now capable of rendering Javascript, it’s not perfect and is sometimes unsuccessful if the page fails to fully render in a timely manner, or if javascript functions used on the site are beyond the capabilities of the crawler's browser engine.

What is Server-side Rendering

Server-side rendering (SSR) is a process for rendering client-side Single-Page Apps (SPAs) on the server while sending a fully rendered page to the client. This means that dynamic components are served as static HTML markup. Think of this as your typical website. You click a button, wait for the page to re-load while the server takes some time to process your request, then your view in-browser is updated with the next page required.

What is Client-side Rendering

Client-side rendering is producing content via Javascript rather than the server itself, by using the DOM (Document Object Model), typically using a mixture of data returned by API's, along with client-facing HTML template files, both being manipulated with javascript to seamlessly change data in front of your eyes. This style of rendering is more and more commonplace in the modern web and is most commonly noticed when scrolling a webpage and being served the next set of results in a list, without having to click the 'next page' button. This can be expanded upon greatly, and entirely new looking web-pages can be presented to the user, history added into your browser session and new data loaded every second, all by javascript, providing a near seamless web interface. Client-side javascript frameworks such as React and Angular utilise DOM manipulation in entirely this way, greatly reducing the load-time felt by users.

Can Dynamic Rendering Only be Useful for Javascript-heavy Sites?

Dynamic rendering can be useful for any site, no matter how it provides its content to the end-user. Sites that render fully on the server to present information to the browser may still have limited access for unauthenticated users or similar that a search bot may not be able to access at all. Instead of providing an unauthenticated page to the search engines, they may opt to show a blank version of the page with placeholders for content or similar. This is just one of many examples that can be applied to both server-side and client-side web rendering techniques.

Dynamic Rendering as a Service

Some platforms and integrations may allow a site that already exists and is fully functional to provide dynamic rendering. Typically these sites act as a 'middle man' in the web process, and the initial request for information is sent to the service that provides dynamic rendering, rather than the website itself. If the service being used detects a bot or crawler, it will serve a pre-cached version of the page to the requester. If not, it will forward the full request over to your website, meaning minimal additional development overhead is required in order to provide dynamic rendering to your website.

How Dynamic Rendering Benefits SEO

As we know, SEO is the process of optimising your site in a way that makes it easier for crawler bots to index and render your content.

Overall, dynamic rendering means that Google can crawl your website more easily. It is also associated with a higher volume of organic ranking keywords, increased organic impressions, clicks, and in turn, conversions. In its simplest form, it allows you to create an entirely different web page for a web-crawler. - In theory, they need not even look alike and can provide one solid, searchable page that all users can search for.

Remember, it's all connected. In order to expect a profit, you need enough site traffic, which comes from your rankings, which require indexing, which requires crawling and rendering. If Google is unable to crawl your page, you'll lose out on money.

Any extra pages on your site can lead to slower page speed, meaning a Google crawler may be unable to work through them all, meaning that a percentage of your pages may not be crawled (therefore indexed) at all, or may not be crawled frequently enough.

When it comes to SEO, it's all about visibility.

Is Dynamic Rendering a Form of Cloaking?

Firstly, what is cloaking, and is there a difference?

Cloaking is a technique used in SEO whereby the content presented to the bots or crawlers is different from what is presented to the users’ browser itself. This is achieved by delivering content that is determined by the IP addresses of the requesting user agents HTTP header.

However, if a site is unfortunately hacked, the hacker will more than likely use cloaking in order to make their hack go undetected by the site owner.

Google and other search engines don’t typically consider dynamic rendering to be a form of cloaking unless you serve considerably different content to users and crawlers. This is a key distinction to make and it is important to continuously monitor your search performance to find out where the harmony lies for the site or page that you wish to implement dynamic rendering on. There's no one size fits all trick that will work for everyone.

Who is Dynamic Rendering for?

Dynamic rendering is typically best suited to Javascript-heavy sites which tend to refresh or update frequently. It may also be helpful for websites that may be low on engineering sources or more budget-conscious.

When reviewing your website to determine if you need to use dynamic rendering, there are a number of factors to consider. If your page content updates frequently, for example, if you are an online retailer with constantly updating and refreshing stock and inventory.

It is also good for websites that rely on modern Javascript functionality and or social media sharing and chat apps that require access to page content.

It helps to remember that not every single website necessarily needs to use dynamic rendering as it is typically seen as a workaround for crawlers.

Dynamic rendering is implemented by Oyato Cloud and is not a form of cloaking.

How does Oyato Cloud Implement Dynamic Rendering?

Search Engines and Social Media Bots

When a visitor requests a page from your website, our systems check to see the request is coming from a search engine or a social media bot. If it is either, we render a completely static version of your web page, including your API (Application Programming Interface) requests, with all Javascript code, removed. We then cache it and serve a copy to the visiting bot.

Static rendering ensures the search engine or social media bot can index its content. By caching the responses we enable future requests to load even more quickly, both of which improve your SEO and SMO scores. Implementing dynamic rendering with Oyato Cloud can drastically improve page speed and in turn, your search engine rankings.

Oyato Cloud could improve your SEO and page speed by 50% or more without requiring all the teaching coding. Without coding, and fully automated, Oyato is able to improve the page speed of your website. Whether it is written in a javascript heavy framework like Angular, Vue or React. We can cater to large SPAs, Social Media platforms and all other kinds of sites to help increase Google & search engine indexability and overall user experience.

Regular Users

If the visitor is not a search bot, by default we serve the original, non-prerendered content version of your page. This means that users see the SEO-rich pages with detailed content, beautiful images and user interface, just as you designed and intended. All with the extra benefit of them hopefully coming to your site via a search engine you rank highly on!

With Oyato Cloud, you can enable fully-static or partially-static HTML rendering for regular users as well:

Regular Users and Bots

For both regular users and bots, we additionally automatically optimise your images based on the browser’s window size and what image format it supports. Optimised images are absolutely essential for SEO as it helps speed up page load times

Modern image formats like WebP can reduce image sizes by up to 90%. A WebP (pronounced "weppy") image file is a compressed image that has been fully optimised by Google without compromising quality. The WebP format was designed by Google and is intended to be the best alternative in comparison to JPEG, PNG and even GIF image formats.

Further size reduction is achieved by automatically resizing images for mobile devices and other smaller browser window sizes.

Optimising your site and all web pages is especially important in modern days as the majority of search engine traffic is via mobile devices. So optimising your images and content to be mobile-friendly can majorly make or break your SEO rank.

Oyato Cloud also offers a range of additional features such as unbiased caching, unlimited bandwidth, optimised font loading, responsive image resizing, free HTTPS/SSL, custom & oya.to domain names and the Plug & Play feature linking your site directly with Oyato Cloud.

Summarising Dynamic Rendering

When it comes to all things SEO and ranking, dynamic rendering is essential to your site.

It's always advised to verify your configuration to ensure the dynamic rendering process is functioning correctly. There are a few main things to check, including a mobile-friendly test. In September of 2020, Google switched to mobile-first indexing for all websites. That basically means that Google will view the mobile version of your site before the desktop version. This is why it's so important to optimise your site for mobile users. Thankfully, Google offer their own mobile-friendly test tool.

Using a URL Inspection tool can also be helpful in ensuring your site is properly crawled and indexed.

If you happen to be using schema markup in your site, you should seriously consider a Structured Data Testing Tool to make sure there is no interference.

Fetch as Google allows you to clearly determine the effectiveness of your dynamic renderer by ensuring that individual URLs are sufficiently submitted for indexing.

Recent Articles