updateContent()

Updates the preloaded content to the currently published content.

Copy
ReactDOM.hydrate(element, container, () =>  Scrivito.updateContent());

Scrivito’s prerendering improves the loading speed of your web application. To prerender your pages, the app uses the currently published content to generate a preload dump for the first meaningful paint, which is then replaced on-the-fly with the JS-enabled version. However, with rapid changes to the published content, the previously generated dump may become outdated, which may cause the pages to not include the latest content updates. To remedy this, Scrivito.updateContent is available. If called in the app’s startup phase, the preloaded content gets updated, bridging intermediate publishes.

Note that hydrate will not operate successfully if updateContent is executed before hydrate has finished.

A call to updateContent has no effect if no preload dump exists.

Remarks

Updating is done at best effort: If the preload dump is severely outdated, Scrivito may be unable to update all or parts of the content.

Examples

If the application supports ReactDOM.hydrate, the initial render could be implemented as follows:

Copy
function hydrateOrRenderApp() {
  const app = <App />;
  const container = document.getElementById("application");
 
  const dumpData = window.preloadDump;
  if (!dumpData) {
    ReactDOM.render(app, container);
    return;
  }

  const { dumpLoaded } = await Scrivito.preload(dumpData);
  if (!dumpLoaded) {
    ReactDOM.render(app, container);
    return;
  }
  
  ReactDOM.hydrate(app, container, () => Scrivito.updateContent());
}

If the application does not work with hydrate, the following would be an implementation that uses the content data from the dump but additionally updates it to the newest published content:

Copy
const app = <App />;
const container = document.getElementById("application");
 
const dumpData = window.preloadDump;
if (dumpData) {
  await Scrivito.preload(dumpData);
  Scrivito.updateContent();
}

ReactDOM.render(app, container);