Which sites should consider dynamic rendering?

How does dynamic rendering work?

Take a look at a sample web app Set up a small express.js server to serve the web app Install and configure Rendertron as a middleware for dynamic rendering

The sample web app

Cute cat images in a grid and a button to show more - this web app truly has it all!

Here is the JavaScript:



const apiUrl = 'https://api.thecatapi.com/v1/images/search?limit=50' ;

const tpl = document . querySelector ( 'template' ). content ;

const container = document . querySelector ( 'ul' );

function init () {

fetch ( apiUrl )

. then ( response => response . json ())

. then ( cats => {

container . innerHTML = '' ;

cats

. map ( cat => {

const li = document . importNode ( tpl , true );

li . querySelector ( 'img' ). src = cat . url ;

return li ;

}). forEach ( li => container . appendChild ( li ));

})

}

init ();

document . querySelector ( 'button' ). addEventListener ( 'click' , init );





The mobile-friendly test shows that the page is mobile-friendly, but the screenshot is missing all the cats! The headline and button appear but none of the cat pictures are there.

While this problem is simple to fix, it's a good exercise to learn how to setup dynamic rendering. Dynamic rendering will allow Googlebot to see the cat pictures without changes to the web app code.

Set up the server To serve the web application, let's use express , a node.js library, to build web servers. The server code looks like this (find the full project source code here):

Many frontend frameworks rely on JavaScript to show content. This can mean Google might take some time to index your content or update the indexed content. A workaround we discussed at Google I/O this year is dynamic rendering . There are many ways to implement this. This blog post shows an example implementation of dynamic rendering using Rendertron, which is an open source solution based on headless Chromium.Not all search engines or social media bots visiting your website can run JavaScript. Googlebot might take time to run your JavaScript and has some limitations , for example.Dynamic rendering is useful for content that changes often and needs JavaScript to display. Your site's user experience (especially the time to first meaningful paint ) may benefit from considering hybrid rendering (for example, Angular Universal ). Dynamic rendering means switching between client-side rendered and pre-rendered content for specific user agents.You will need a renderer to execute the JavaScript and produce static HTML. Rendertron is an open source project that uses headless Chromium to render. Single Page Apps often load data in the background or defer work to render their content. Rendertron has mechanisms to determine when a website has completed rendering. It waits until all network requests have finished and there is no outstanding work.This post covers: The “kitten corner” web app uses JavaScript to load a variety of cat images from an API and displays them in a grid.