CodeAPI

rendering

The Rendering API is used to control when code is run as a page is being loaded.

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

PROPERTIES

?
Store values associated with an object.
envGets the current environment the rendering process is running in.
renderCycleGets the current cycle in the rendering process.
warmupDataGets data sent from server-side code to client-side code.

env

Gets the current environment the rendering process is running in.

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
TYPE
?
The kind of data the property stores.
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

Gets the current cycle in the rendering process.

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
TYPE
?
The kind of data the property stores.
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

Gets data sent from server-side code to client-side code.

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
TYPE
?
The kind of data the property stores.
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;
  }
} );