PROPERTIES


rendering
When possible, the rendering process that runs when your page loads is split in two in order to improve performance. The first cycle in the process happens server-side and the second cycle happens client-side. When not possible, all rendering happens client-side.
Use the Rendering API to track when and where your code is running to selectively run parts of your code in certain conditions.
To use the Rendering API, import wixWindow
from the wix-window
module:
import wixWindow from 'wix-window';
Table of Contents
env
Description
When possible, the rendering process is split in two in order to improve performance. The first cycle in the process happens server-side and the second cycle happens client-side. When not possible, all rendering happens client-side.
The env
property returns "backend"
when rendering on the server
and "browser"
when rendering on the client.
Use the env
property in your page's onReady()
event handler to control where your code runs during the rendering
process.
Note
Rendering never occurs server-side when previewing your site.Syntax
get env(): string
Examples
Get the current cycle in the rendering process
import wixWindow from 'wix-window';
// ...
let currentEnv = wixWindow.rendering.env; // "browser"
Use rendering environment to selectively run code per environment
import wixWindow from 'wix-window';
import {local} from 'wix-storage';
let queryPromise;
if(wixWindow.rendering.renderCycle === 1) {
queryPromise = wixData.query("myCollection").find();
}
$w.onReady(function () {
if(wixWindow.rendering.env === "browser") {
$w("#myText").text = local.getItem("someStorageKey");
$w("#button1").onClick( () => {
console.log("Button clicked")
} );
}
} );
renderCycle
Description
When possible, the rendering process is split in two in order to improve performance. The first cycle in the process happens server-side and the second cycle happens client-side. When not possible, all rendering happens client-side.
When the rendering is split, renderCycle
returns 1
on the server
and 2
on the client.
When all the rendering happens client-side, renderCycle
returns 1
while the rendering process is still running.
In either case, after the client-side rendering has finished,
renderCycle
returns NaN
.
Use the renderCycle
property in your page's onReady()
event handler to control during which cycles your code runs.
Note
Rendering never occurs server-side when previewing your site.Syntax
get renderCycle(): number
Examples
Get the current cycle in the rendering process
import wixWindow from 'wix-window';
// ...
let currentCycle = wixWindow.rendering.renderCycle; // 1
Use rendering cycle number to selectively run code per cycle
import wixWindow from 'wix-window';
import wixData from 'wix-data';
let queryPromise;
if(wixWindow.rendering.renderCycle === 1) {
queryPromise = wixData.query("myCollection").find();
}
$w.onReady(function () {
if(wixWindow.rendering.renderCycle === 1) {
$w("#myText").text = "Some initial text.";
return queryPromise.then(results => {
$w("#myTable").rows = results.items;
} );
}
} );
warmupData
Description
When possible, the rendering process is split in two in order to improve performance. The first cycle in the process happens server-side and the second cycle happens client-side. When not possible, all rendering happens client-side.
Pass data from the server-side cycle to the client-side cycle by
returning the data from the onReady()
function when it is run server-side.
Then retrieve that data client-side by getting the value of the
warmupData
property.
Note
Rendering never occurs server-side when previewing your site.Syntax
get warmupData(): boolean | number | string | Object
Examples
Get the warmup data passed from the server-side render cycle
import wixWindow from 'wix-window';
// ...
let data = wixWindow.rendering.warmupData;
Use warmupData to run a query server-side and pass the results to client-side code
This example demonstrates how to work with passing warmup data from the server-side render to cycle to be used in the client-side cycle. It takes into account the two possible render paths: 1) Two cycles - First cycle happens on the server and then a second cycle in the browser. 2) One cycle - Only one cycle that happens in the browser.
import wixData from 'wix-data';
import wixWindow from 'wix-window';
import {local} from 'wix-storage';
let promise;
let dataResults;
// start performing a query as soon as possible during
// the first render cycle and store the returned promise
if(wixWindow.rendering.renderCycle === 1) {
promise = wixData.query("myCollection").find();
}
// this will run twice, once on the
// backend and once in the browser
$w.onReady( function () {
// if it's the first render cycle, set up what
// to do when the query promise resolves
if(wixWindow.rendering.renderCycle === 1) {
promise.then( (results) => {
// use the query results for page setup
$w("#text").text = results.items[0].title;
// if the first cycle is happening on the backend
if(wixWindow.rendering.env === "backend") {
// return the items from the query results
// to be used later in the browser
return results.items;
}
// if the first cycle is happening in the browser, just
// store the items from the query results in a variable
dataResults = results.items;
} );
}
// if it's the second render cycle, get the items from the query
// results returned in the first cycle and store them in a variable
else {
dataResults = wixWindow.rendering.warmupData;
}
// regardles of cycle, if in the browser, do some stuff that can
// only be done in the browser, like using local storage
if(wixWindow.rendering.env === "browser") {
$w('#storedText').text = local.getItem("someKey");
}
// if it's the first cycle, return the promise
// that rendering rendering should wait for
// if there will be a second cycle, the value the promise
// resolves to will be retrieved using warmupData
if(wixWindow.rendering.renderCycle === 1) {
return promise;
}
} );