The UPWA Lifecycle #
The stages of the UPWA lifecycle are explained below in detail.
A GET request will be sent to the SSR server from a device. When the SSR server is running in remote mode, it will not receive the actual user-agent from the device. Instead, it's aware of the device class: one of mobile, tablet or desktop.
When that GET request is received by the SSR server, it's first passed
requestHook method, which can handle
simple responses for files like
/robots.txt. This does not involve the UPWA code.
requestHook doesn't handle the request, and it matches one of
the UPWA routes, then the SSR server will:
- Create a browser-like environment for the UPWA
- Set the
window.locationfor that environment to match the request's URL
- Configure the environment so that the
getBrowserSizefunction will return the correct value depending on the class of the device that made the request
- Load and run the UPWA code in that environment
The UPWA can then fetch any data and render whatever React components are
necessary for the page. Once rendering is done, the UPWA must call the
function (in the
universal-utils module of the SDK), passing the contents
of the Redux store. Code can optionally set the status code for the HTTP
response, and set headers, by passing them to
2. By dispatching the thunk
(also in the
universal-utils module of the SDK). HTTP response status code and headers
can also be set by passing them to
If rendering fails, then the UPWA may call
ssrRenderingComplete, passing an error object. The SSR server
will generate an error page.
Assuming that rendering did not fail, the SSR server will create an HTML response that contains the following:
HTML elements copied from the
<head>of the rendered document. This allows UPWA code to use tools such as
react-helmetto add elements such as
<link>to the document, which will appear in the response. These elements will be present in the HTML response and will take effect when the browser loads that response.
If the SSR server was configured with
optimizeCSS: true, the minimal set of inline styles required to render the HTML. If
<link>in the head of the document that will prioritize loading of the stylesheet.
An embedded JSON string of the Redux store state that will be used to configure the UPWA when it starts running client-side (stored in
The React-rendered HTML.
<script>element that will kickstart the UPWA loading process when the page is received by the browser.
The response is then sent to the browser, and server-side rendering is complete.