What is dynamic rendering?
Gordon the Gopher18th Jun '20 · 2 min read

Dynamic rendering (and dynamic serving) is a technique where a web server, web app or website renders and serves its content in a form most discernable to the visitor.

In the context of SEO (Search Engine Optimization) and SMO (Social Media Optimization), dynamic rendering involves serving a statically rendered version of a page to search engines and social media bots in order to improve indexability.

G usr User srv Website usr->srv request bot Bot bot->srv request srv->usr HTML Styles Images Scripts srv->bot HTML Styles Images

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 render (fully) in a timely manner.

This is especially important for SPAs (Single-Page Apps) like those build in React, Vue or Angular as a static render ensures search engines and social media services are able to index your content.

Is dynamic rendering a form of cloaking?

Google and other search engines don't consider dynamic rendering to be a form cloaking, unless your serve considerably different content to users and crawlers.

Dynamic rendering as implemented by oyato cloud is not a form of cloaking.

How does oyato cloud implement dynamic rendering?

Search Engines & Social Media Bots

When a visitor requests a page from your website, we check to see if it's a search engine or social media bot. If so, we render a completely static version of your page (including waiting for your API requests) with all Javascript code removed. We then cache it and serve a copy to the visiting bot.

G bot Bot srv oyato cloud bot->srv request srv->bot HTML Styles Optimized Images

Static rendering ensures the search engine or social media bot can index its content and load quickly — both of which improves SEO & SMO.

Regular Users

If the visitor isn't a bot, by default we serve the original non-prerendered version of your page.

G usr User srv oyato cloud usr->srv request srv->usr HTML Styles Optimize Images Scripts

You can enable fully-static or partially-static rendering for regular users as well:

  • go to your site's dashboard
  • click on the default page rule
  • enable the relevant prerendering option
  • click save to apply the changes

Regular Users & Bots

For both regular users and bots we additionally automatically optimize your images based on the browser's window size and what image formats it supports.

Mordern image formats like WebP can reduce image sizes by up to 90%.

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