Page rendering is when your site's code is converted to a visual layout that's displayed in the browser. It occurs when visitors first enter your site, and for each subsequent page load, as they access different pages within the same site. To enhance performance, Wix render's your site code on the server and in the browser. You can use the Rendering API to control where your code runs in the rendering process.
You can implement the Rendering API using:
When a page request is made to the server, the server executes server-side rendering and once completed returns the HTML and all the necesary data to render the page. Once the browser gets the server response it displays the HTML immediately so the page is fully visible, though not yet responsive. Then, the browser runs the same page code again, adding the interactive actions. This double rendering occurs on initial site load, first on the server and then in the browser. Navigating to different pages on the same site, however, typically renders only once in the browser for each page load.
As a result of the double rendering, any code in your onReady() function may often execute twice, to provide faster initial loading time to access a site.
Because your onReady() runs twice during double rendering, it may produce side effects. For example, if your code inserts an item into a collection, that insertion occurs twice, unless you explicitly add code to prevent that from happening.
To avoid such unwanted side effects, use the Rendering API to conditionally control what code runs on the server or browser. You can also use warmup data to further optimize page loading.
Keep the following in mind when testing code that uses Rendering API.
console.log() calls in the Developer Console or in your browser's Developer Tools when they are performed on the server.