Dynamic Rendering

React logo Angular logo Vue logo

For JavaScript apps such as React, Angular or View, search engines such as Google still struggle to properly crawl and index all pages. Although they say they can achieve this over time after many visits, they do recommend for most sites to use dynamic rendering. Currently, it's difficult to process JavaScript and not all search engine crawlers are able to process it successfully or immediately.

What is Dynamic Rendering

Dynamic Rendering Google

Dynamic rendering is a workaround for crawlers. It means switching between client-side rendered and pre-rendered content depending on the user agents. Dynamic rendering is good in particular for websites for which content changes rapidly, or content that uses JavaScript features that aren't supported by crawlers. Not all sites need to use dynamic rendering.

Requests from crawlers are routed to a renderer, requests from users are served normally. Where needed, the dynamic renderer serves a version of the content that's suitable to the crawler, for example, it may serve a static HTML version.

Dynamic Rendering Setup

To setup dynamic rendering for your content, install and configure a dynamic renderer to transform the content into static HTML. Some common dynamic renderers are Puppeteer or prerender.io. Choose the user agents that you think should receive your static HTML.

Alex Bieth, Owner @ SEO Berlino and SEO Consultant