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()

Deprecated renderCycle and warmupData properties

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.

Preventing Unwanted Side Effects

As mentioned above, your global page code and

onReady()

However, in certain situations, your

onReady()

Rendering API

The following property of the

wix-window

env

• Returns "backend" when rendering on the server.
• Returns "browser" when rendering on the client.Example

If you use the

insert()

insert()

insert()

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()

insert()

Additional Considerations

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()

Previously published at https://support.wix.com/en/article/velo-about-the-page-rendering-process