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 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. 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 due to the deprecation and keeping it won’t hinder your site’s performance. will not break Preventing Unwanted Side Effects As mentioned above, your global page code and 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. onReady() However, in certain situations, your 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. onReady() Rendering API The following property of the Rendering API is used to track where your code is running: wix-window - Gets the current environment the rendering process is running in. This informs you where your code is being run. env Returns "backend" when rendering on the server. Returns "browser" when rendering on the client.Example If you use the function of the wix-data API to add an item to one of your collections, the 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 is only called once. insert() insert() insert() Here we demonstrate how to prevent an item from being added to a collection twice: wixData ; wixWindow ; toInsert = { : , : };

$w.onReady( { (wixWindow.rendering.env === ) { wixData.insert( , toInsert)
      .then( {
        $w( ).text = item.title;
      } );
  }
} ); import from 'wix-data' import from 'wix-window' let "field1" "Some value" "field2" "Some other value" ( ) function if "browser" return "myCollection" ( ) => item "#myText" Note that we wrap the in a check to see in which environment the code is being run. We only run when running in the browser. 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 calls when they are performed on the server. console.log() Previously published at https://support.wix.com/en/article/velo-about-the-page-rendering-process

Keep

Mind

Step-by-Step Guide on How to Work with the Velo Code Panel

Step-by-Step Guide on How to Use External Database Collections for Better Wix Website Performance

Develop Smarter, Deliver Faster

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

The API fetch Module as the Way to Accessing 3rd-Party Services

48 Stories To Learn About Coding With Velo

5 Hot Velo Practices to Test and Debug Your Website Code

73 Stories To Learn About Velo

A Custom Chart by Using the HTML Component Plainly Explained

The API fetch Module as the Way to Accessing 3rd-Party Services

48 Stories To Learn About Coding With Velo

5 Hot Velo Practices to Test and Debug Your Website Code

73 Stories To Learn About Velo

A Custom Chart by Using the HTML Component Plainly Explained

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps