CorvidReference

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.
renderCycleDeprecated: Gets the current cycle in the rendering process.
warmupDataDeprecated: Gets 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 and to prevent code that causes side effects from running twice.

Note

Rendering never occurs server-side when previewing your site.

Syntax

get env(): string
TYPE
?
The kind of data the property stores.
string

Examples

Use the Rendering API to avoid inserting an item twice

This example demonstrates how to make sure a collection insertion in the onReady event handler occurs only once.

import wixData from 'wix-data';
import wixWindow from 'wix-window';

let toInsert = {
  "field1": "Some value",
  "field2": "Some other value"
};

$w.onReady(function () {
  if (wixWindow.rendering.env === "browser") {
    return wixData.insert("myCollection", toInsert)
      .then( (item) => {
        $w("#myText").text = item.title;
      } );
  }
} );

renderCycle

Deprecated: Gets the current cycle in the rendering process.

Description

Deprecation note: The renderCycle property no longer works as expected. It will always return 1.

Syntax

get renderCycle(): number
TYPE
?
The kind of data the property stores.
number

warmupData

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

Description

Deprecation note: The warmupData property can no longer be used in a reliable manner.

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