wix-window.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:

ICAgaW1wb3J0IHdpeFdpbmRvdyBmcm9tICd3aXgtd2luZG93Jzs=

   import wixWindow from 'wix-window';

To learn more about the rendering process, see About the Page Rendering Process.

Contents

Gets the current environment the rendering process is running in.

Syntax

get env(): String

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.

Type

String

Examples

Get the current cycle in the rendering process

aW1wb3J0IHdpeFdpbmRvdyBmcm9tICd3aXgtd2luZG93JzsKCi8vIC4uLgoKbGV0IGN1cnJlbnRFbnYgPSB3aXhXaW5kb3cucmVuZGVyaW5nLmVudjsgLy8gImJyb3dzZXIiCg==

import wixWindow from 'wix-window';

// ...

let currentEnv = wixWindow.rendering.env; // "browser"

Use rendering environment to selectively run code per environment

aW1wb3J0IHdpeFdpbmRvdyBmcm9tICd3aXgtd2luZG93JzsKaW1wb3J0IHtsb2NhbH0gZnJvbSAnd2l4LXN0b3JhZ2UnOwoKbGV0IHF1ZXJ5UHJvbWlzZTsKCmlmKHdpeFdpbmRvdy5yZW5kZXJpbmcucmVuZGVyQ3ljbGUgPT09IDEpIHsKICBxdWVyeVByb21pc2UgPSB3aXhEYXRhLnF1ZXJ5KCJteUNvbGxlY3Rpb24iKS5maW5kKCk7Cn0KCiR3Lm9uUmVhZHkoZnVuY3Rpb24gKCkgewogIGlmKHdpeFdpbmRvdy5yZW5kZXJpbmcuZW52ID09PSAiYnJvd3NlciIpIHsKICAgICR3KCIjbXlUZXh0IikudGV4dCA9IGxvY2FsLmdldEl0ZW0oInNvbWVTdG9yYWdlS2V5Iik7CiAgICAkdygiI2J1dHRvbjEiKS5vbkNsaWNrKCAoKSA9PiB7CiAgCQljb25zb2xlLmxvZygiQnV0dG9uIGNsaWNrZWQiKQogIAl9ICk7CiAgfQp9ICk7Cg==

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")
  	} );
  }
} );

Gets the current cycle in the rendering process.

Syntax

get renderCycle(): Number

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.

Type

Number

Examples

Get the current cycle in the rendering process

aW1wb3J0IHdpeFdpbmRvdyBmcm9tICd3aXgtd2luZG93JzsKCi8vIC4uLgoKbGV0IGN1cnJlbnRDeWNsZSA9IHdpeFdpbmRvdy5yZW5kZXJpbmcucmVuZGVyQ3ljbGU7IC8vIDEK

import wixWindow from 'wix-window';

// ...

let currentCycle = wixWindow.rendering.renderCycle; // 1

Use rendering cycle number to selectively run code per cycle

aW1wb3J0IHdpeFdpbmRvdyBmcm9tICd3aXgtd2luZG93JzsKaW1wb3J0IHdpeERhdGEgZnJvbSAnd2l4LWRhdGEnOwoKbGV0IHF1ZXJ5UHJvbWlzZTsKCmlmKHdpeFdpbmRvdy5yZW5kZXJpbmcucmVuZGVyQ3ljbGUgPT09IDEpIHsKICBxdWVyeVByb21pc2UgPSB3aXhEYXRhLnF1ZXJ5KCJteUNvbGxlY3Rpb24iKS5maW5kKCk7Cn0KCiR3Lm9uUmVhZHkoZnVuY3Rpb24gKCkgewogIGlmKHdpeFdpbmRvdy5yZW5kZXJpbmcucmVuZGVyQ3ljbGUgPT09IDEpIHsKICAgICR3KCIjbXlUZXh0IikudGV4dCA9ICJTb21lIGluaXRpYWwgdGV4dC4iOwoKICAgIHJldHVybiBxdWVyeVByb21pc2UudGhlbihyZXN1bHRzID0+IHsKICAgICAgJHcoIiNteVRhYmxlIikucm93cyA9IHJlc3VsdHMuaXRlbXM7CiAgICB9ICk7CiAgfQp9ICk7Cg==

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;
    } );
  }
} );