Hydration - server and clientside rendering
Contents
React4XP allows entries to render server-side, client-side or both (the default).
Usage
The mode is controlled when the entry (React App) is initialized via react4xp.render().
const output = render(
'MyComponent',
props,
request,
{
body: myHtmlBody,
id: myId,
ssr: true (1)
hydrate: true (2)
}
);
return output;| 1 | Set to false to disable server-side rendering |
| 2 | Set to false to disable client-side rendering |
Visit the API documentation for more details.
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.
For example, the "Click" counter example used in this tutorial 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. |
