Preboot#

TL;DR: A JavaScript snippet that forces the client to build the app in a hidden div and when it's finished, replaces the server-side rendered div with the client-side rendered div. Mostly for non-React users.

Headless-Render-API.com has Preboot v4 (not v5) integrated because despite being hosted on an Angular Github account, v4 of Preboot works for anything, including React.

Include preboot by adding the prerendercloud-preboot-app-root attr to your app root. This is all that's required to use preboot.

Using AngularJS/Angular? Read the Angular docs which cover this Preboot integration.

How our Preboot integration works:#

1. Browser receives initial payload from server
2. User sees server view
3. Preboot creates hidden div that will be used for client bootstrap and starts recording events
4. Browser makes async requests for additional assets (i.e. images, JS, CSS, etc.)
5. Once external resources loaded, Angular client bootstrapping begins
6. Client view rendered to the hidden div created by Preboot
7. Bootstrap complete, so Headless-Render-API.com injected script calls preboot.done()
8. Preboot events replayed in order to adjust the application state to reflect changes made by the user before Angular bootstrapped (i.e. typing in textbox, clicking button, etc.)
9. Preboot switches the hidden client view div for the visible server view div
10. Finally, Preboot performs some cleanup on the visible client view including setting focus

Seeing a blank/white screen when using preboot?#

Since preboot builds the client-side driven version of the App in a hidden div, code that was looking at div width will need to be resized. For example, the Flickity carousel qualifies for this.

  window.onPrerendercloudPrebootComplete = function() {
    // the client view is now active, so resize whatever
    // UI elements were dependent on width calculations
  }

Should non-React (Angular, Ember, Preact, Vue) users always use this?#

It's kind of a hacky solution and mostly for Angular apps prior to 2017, so you should try it first and see if it works for your app.

Why would you use this with React?#

Most likely you wouldn't since React has checksums and can gracefully transition from server HTML to client control. However, if for some reason you were unable to cache state or if you have inputs/forms that need to preserve input before the transition