Widget personalization
Personalization basics
Creating a personalized version of a widget follows the standard procedure in the new WYSIWYG editor. For more information, see Personalize widgets.
Personalized widgets are rendered after the page has been loaded on the front end, which means that:
- They are not part of the initial page render.
- They should not be cached.
- They are not indexed by search engines.
- They have their own request that is fired after the page has been served to the client.
There are some specifics to this approach. The content delivery network (CDN) should not cache these versions and serve personalized content by mistake to an anonymous user and vice versa, and at this point not all types of widgets can be properly personalized. Due to current limitations in the Next.js framework's hydration extensibility, only strictly server-side rendering (SSR) and strictly client-side rendering (CSR) widgets are properly personalized.
This means that if an SSR component hosts a CSR part, the CSR part only appears as markup on the front end, but its interactions are not properly attached. If the component is fully CSR, it is rendered via the react APIs on the front end and all of its interactions are loaded and usable.
EXAMPLE: Examples of widgets that are strictly SSR or CSR and can be properly personalized:
Personalize out of the box form widget
The out of the box Form widget and its children in the Next.js renderer are with mixed SSR components. In order to be able to personalize them you must switch to the CSR variants of these widgets. For more information see, Switch the form widget to CSR.