Configuring Single Page Application / Server Side Rendering Support in Editor Settings for Your Website in VWO

Nowadays, most websites are designed as Single-Page Applications (SPAs) to accommodate dynamic updates, enhance loading speed, and reduce server load. In SPAs, most resources (HTML/CSS/Scripts) are only loaded once throughout an application's lifespan. Only data is transmitted back and forth. 

Consider that you have some dynamic elements on your web pages that typically appear after a delay or some user actions, and using a VWO test campaign, you have made changes to some of these elements. To ensure that the modification you made to such elements gets applied each time a campaign is loaded, VWO has some implementations:

1. Keep Applying Changes Even After the Page is Loaded

This setting typically caters to situations where the element you modified appears on the web after the page has loaded, either after some delay or by some user action.

Consider that you have an e-commerce website where a contact support form appears as a pop-up when you click on the HELP button. Now, you wish to apply changes to the form's elements. Here, in technical terms, the form was not present in the DOM initially but was added as soon as the HELP button was clicked.

To ensure that the changes are applied to such elements each time the campaign is loaded, VWO has built-in support for Mutation Observer. This continuously looks for the changes (DOM changes) added to the webpage after the campaign is loaded completely. As soon as a change is detected, VWO applies modifications to it.

To learn how you can configure this setting in VWO, click here.

2. Re-apply Changes Whenever Modified Elements are Rendered Afresh

This setting primarily ensures that the modifications made by VWO Editor are reliably applied to websites built with frameworks such as React, Gatsby, Next.js, Angular, Vue, etc.

The challenge with such frameworks is that they can completely re-render page elements based on user actions or events, resulting in instances where VWO changes are reverted, and the elements go back to their original state.

If you notice something similar in your website's campaigns, we recommend enabling this setting. When enabled, VWO will constantly monitor all the elements to which you have made changes. If the underlying framework attempts to re-render the page elements, VWO will re-apply the changes to ensure that the visitors experience the change consistently.

To learn how you can configure this setting in VWO, click here.

3. Delay Applying Changes until Hydration Completes

This setting ensures that modifications made by the VWO Editor are reliably applied to websites built using modern server-side rendering (SSR) frameworks such as Next.js and Nuxt.js.

These frameworks perform a process called hydration, where client-side JavaScript takes over after the initial HTML is rendered. If VWO applies variation changes before hydration is complete, it can lead to issues such as UI inconsistencies or broken functionalities.

When this setting is enabled, VWO waits for the hydration process to complete before applying any variation changes. This helps ensure that changes are applied reliably and seamlessly, maintaining the integrity of the user interface and overall functionality on SSR-based websites.

Configuring SPA/SSR Settings in VWO

VWO lets you configure the SPA/SSR settings at the campaign level and at the workspace level using the VWO Editor. 

Configuring SPA/SSR Setting at the Campaign Level

Configuring this setting at the campaign level ensures that it’s only applicable to the current campaign.

Procedure

1. Log in to your VWO account.
2. Go to Testing and create a campaign, say A/B.
3. Enter the relevant information in the fields present on the Pages page and click Next.
4. Add a variation and click Edit to open the VWO Editor.
5. In the VWO editor, click Settings at the bottom. In the Editor settings pop-up, go to SPA/SSR support options.
6. Enable the setting that's most relevant to your use case.
   
7. Once done, click Save.

Configuring SPA/SSR Setting at the Workspace Level

Configuring this setting at the workspace level ensures that it’s only applicable for future campaigns. 

Procedure

1. Log in to your VWO account.
2. Go to Account Settings > Campaign.
3. Scroll down to Editor settings. In the Single page application/server side rendering support settings section, enable the setting that's most relevant to your use case. 

Need more help?

For further assistance or more information, contact VWO Support.