Hydration - server and clientside rendering
Contents
With React4XP, components may render server-side, client-side or even both.
Countdown
Start by updating your hello-react template, use the code below:
## include::../src/main/resources/react4xp/entries/hello-hydration.tsx[]This React component will initially render server-side, hydrate, and come alive client side as well - producing an amusing beer bottle countdown.
| The interactive part here is vanilla JS, just to keep things as simple as possible. We’ll look at stateful/dynamic components later. |
Preview
Back in Content Studio, your changes should automatically be picked up
+ In edit mode, components will not be hydrated (for a more robust visual editing experience) . Click Preview to get the hydrated version of the page.
+
+ Clicking anywhere on the text should trigger the dropBottle function from hello-react.tsx, modify the DOM and output a message in the browser console.
Look at those bottles go!
SSR vs client side gotchas
When using isomorphic JavaScript, selected features may only be working on server-side, and some only on client side, like document and window - which are pure client-side concepts. React4xp has polyfilled window as empty object. To prevent weird behavior or errors, take care to only execute browser-specific code in the browser.
In the example above, dropBottle is the response to a click listener which won’t be triggered to actually run on the server (although the code is compiled and read into memory), so we don’t need any more safeguards here. But if you do, it’s easy enough - for example:
if (typeof window.navigator !== 'undefined') {
// ...This won't run during SSR...
}Of course, this also applies to imported packages / nested components and so on. Importing them is usually safe, but consider wrapping the areas where they’re called/used.
|
Your React components may produce server-side errors, but these are not always easily interpreted. Switching over to pure clientside rendering (by setting SSR false, Hydrate true) in your controller, the particular React component will likely give you a better/sourcemapped error message in the browser console, making your debugging life easier. |
