caching app shell in a React PWA with Server-Side rendering caching app shell in a React PWA with Server-Side rendering reactjs reactjs

caching app shell in a React PWA with Server-Side rendering


Any demos or examples of this functionality in the wild?

Yes!

Take a look at https://github.com/GoogleChrome/sw-precache/tree/master/app-shell-demo, which uses the dynamicUrlToDepndencies option in sw-precache to define which underlying resources are used to server-render the App Shell HTML.

The service worker it generates will take care of updating the App Shell HTML whenever any of the resources it depends on changes.

In this model the service worker will return the same App Shell HTML document for all navigation requests, so it assumes that the App Shell HTML is generic enough to then be populated at runtime with the dynamic content that's associated with the actual URL via your standard client-side routing logic.