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

Nowadays, to cater to dynamic updates, enhanced loading speed, and reduced load on the server, most websites are designed as Single Page Applications (SPAs). In SPAs, most resources (HTML/CSS/Scripts) are only loaded once throughout the lifespan of an application. Only data is transmitted back and forth. 

Consider that you have some dynamic elements on your webpages 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 when you click on the HELP button, a contact support form appears as a pop-up. Now, you wish to apply changes to the elements present in the form. Here, in technical terms, the form was not present in the DOM initially but got added as soon as the HELP button was clicked.

To ensure that the changes get applied to such elements, each time the campaign is loaded, VWO has in-built support for Mutation Observer. This continuously looks for the changes (DOM changes) added on 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 Framework Rendering is Complete

This setting is used particularly to apply changes to the elements of a website built on frameworks like GatsbyJS, Next.js, ReactJS, etc.

ATTENTION: This option has been deprecated and its functionality has been merged with the above option. However, it continues to be available for the campaigns, in which this option is already enabled.

Such frameworks ensure that no one can make changes to the webpage until the entire rendering is complete. This, at times, leads to a situation wherein the changes you applied to the elements in your test campaign don’t get applied or get applied to some elements while for some, appears in their original form when the framework is fully rendered (thus reversing the changes made by the VWO editor).

To handle this, VWO keeps the modified elements hidden until the framework rendering is complete, and during this wait time, VWO keeps detecting the changes on the web page. Once the framework rendering is complete, the VWO campaign starts executing.

Here, the user has two timer options configured based on how slow or fast your website loads.

• The frequency at which VWO will check if the framework has completed rendering
  This is the frequency at which VWO scans the web page to check if the rendering is complete or not. By default, it is set to 10 milliseconds which typically mean that after every 10 milliseconds, VWO will run this check. As soon as VWO detects that there were no changes in the last 10 milliseconds, the VWO campaign starts executing.
  

• Maximum timeout after which changes are applied to the elements regardless of framework rendering state
  This is the timeout interval after which VWO will not check for the changes on the webpage. Once this timeout interval is reached, VWO applies the campaign changes, no matter what.

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

Configuring SPA/SSR Settings in VWO

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

Configuring SPA/SSR Setting at Campaign Level

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

Procedure

1. Login 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 URL(S) page and click NEXT.
4. In the VWO editor, click on the SETTINGS option at the bottom and choose SPA/SSR support options.
5. Enable the setting that's most relevant for your use case.
   
   NOTE: If you choose to enable the Delay applying setting, configure the following two fields:
   a. The frequency at which VWO will check if the framework has completed rendering.
   b. Maximum timeout after which changes are applied to the elements regardless of framework rendering state.
6. Once done, click SAVE.

Configuring SPA/SSR Setting at Account Level

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

Procedure

1. Login to your VWO account.
2. Go to ACCOUNT SETTINGS > CAMPAIGN SETTINGS.
3. Scroll down to the Editor Settings section and choose the SPA/SSR Support options.
4. Enable the setting that's most relevant for your use case.
   
   NOTE: If you choose to enable the Delay applying setting, configure the following two fields:
   a. The frequency at which VWO will check if the framework has completed rendering.
   b. Maximum timeout after which changes are applied to the elements regardless of framework rendering state.
5. Once done, click SAVE.