How to Use Velo Rendering API for Improved Performance of Website Pages: Tips to Take into Account

When a visitor browses to one of your site's pages, that page needs to be
set up before it is displayed. Setting up a page includes adding and
positioning all of its elements as well as running code that might retrieve the page's data or perform other setup operations. This process is known as rendering.

As part of this rendering process, global page code and the code in your

onReady()

function are run. This code runs in both the server and the browser. While a page request is running in the server, the browser downloads and executes the same code. After the server returns a response and the page is visible, the browser also renders the page and makes it interactive.

Previously, you were able to use the renderCycle and warmupData properties to control when and where some of your code is run. Since we've optimized the rendering process even further than before, these measures are no longer needed.

If you have used these properties, we advise you to update your code. Your code will not break due to the deprecation and keeping it won’t hinder your site’s performance.

As mentioned above, your global page code and

onReady()

code will usually run twice, once in the backend and once in the browser. Generally, this is not a problem. In fact, it is used to load your page quicker.

However, in certain situations, your

onReady()

and global code might not work as expected without taking additional measures. For example, if your code produces a side effect, such as inserting an item into a collection, that insertion will occur twice unless you explicitly add code to prevent that from happening. When needed, use the Rendering API to make sure parts of your code only run once.

The following property of the

wix-window

Rendering API is used to track where your code is running:

env

- Gets the current environment the rendering process is running in. This informs you where your code is being run.

If you use the

insert()

function of the wix-data API to add an item to one of your collections, the

insert()

might be called twice, leading to two items being added to your collection instead of one. In such a case, you will need to use the rendering env property to make sure the

insert()

is only called once.

Here we demonstrate how to prevent an item from being added to a collection twice:

import wixData from 'wix-data';
import wixWindow from 'wix-window';

let toInsert = {
  "field1": "Some value",
  "field2": "Some other value"
};

$w.onReady(function () {
  if (wixWindow.rendering.env === "browser") {
    return wixData.insert("myCollection", toInsert)
      .then( (item) => {
        $w("#myText").text = item.title;
      } );
  }
} );

Note that we wrap the

insert()

in a check to see in which environment the code is being run. We only run

insert()

when running in the browser.

There are some other things you need to keep in mind when using the Rendering API to improve your site's performance.

Rendering will never be performed server-side when previewing your site.

You will not be able to see the logging produced by

console.log()

calls when they are performed on the server.