Isomorphic Rendering

This page was contributed by Tejas Dinkar and Shraddha Kesari

Malibu has been designed from the ground up as a Progressive Web App, which supports isomorphic rendering.

Here is a high-level overview of how a page is served from Malibu:

  • The initial request is served via Server Side Rendering of an HTML response. This page is heavily cached by our CDN, to ensure that end-users get a snappy response even on old devices. For more information on how the initial page is rendered, see Server Side Architecture
  • Once the page is loaded by the browser, the browser will start to hydrate components that were rendered from the server. This means that the event listener is attached, without changing the DOM that has been rendered (or at least minimal DOM updates). The process of loading relevant data and hydrating the page is described in the Client Side Architecture
  • Once the page is hydrated, clicking on any Link will load via AJAX.
  • If enabled, a ServiceWorker will install itself in the background of the first-page load. Subsequent visits will load from the PWA shell.