Dynamic Rendering vs Hybrid Rendering

Question

I watched Google's conference on SEO and they talk about Dynamic and Hybrid Rendering. But, I could not understand the difference, what is?

Thank you for your time.

Answer 1

Both of them are methods to improving SEO by complementing the lack of handling heavy JavaScript of search engine bots.

1. Dynamic Rendering

This is a workaround method to improving SEO. It just delivery static html content to crawler(robot) and stay everything the same for the users.

Dynamic rendering is to detect crawlers (by checking the user agent) and give them a static html content without any JavaScript which is fully-rendered by headless browser like puppeteer. You may need to host a rendering server like Rendertron to deal with the rendering process described above.

Advantage

• It didn't rely on changing your current front-end architecture. You don't need to change your code structure to build such as Server-Side Rendering structure or make your site as a static html by adopting Prerendering.
• It's suitable for large and rapidly changing sites.

It also mentioned in this session Youtube: Deliver search-friendly JavaScript-powered websites (Google I/O '18)

-

2. Hybrid Rendering

This is a long-term recommendation for google search.

Hybrid Rendering is not a new concept. It means you ship a part of content (which you want it to be indexed by googlebot) as static html (may generated by template engine or any other way) both to client and bot . And then run JavaScript for showing rest of things such as personalized content.

It's quit make sense, because we ship main content by static html and providing both wonderful FMP (First Meaningful Painting) for user experience and reduce the burden of Googlebot on consuming resources and times to understand your website. And we still can use powerful JavaScript to build more functionality to your website.

However, it would be a little bit tricky to implementing especially using modern frameworks in some specific and popular architecture. e.g. Single-Page-Application.

You can also check in this session for more information Youtube: Deliver search-friendly JavaScript-powered websites (Google I/O '18)

-

P.S. For more detail of the various rendering structure, please check Rendering on the Web. It's an amazing post for those who wants to understand the trade-offs between different structures.