set( )

Sets data in server-side code for use in client-side code.

Description

A performance best practice is to set warmup data for time-consuming operations, such as querying collections or working with the results of network requests from external sites. You can write code that sets the data from these operations as warmup data on the server. The client-side code can then get that data without performing the operations again.

You can only set warmupData on the server. This function has no effect if called from client-side code.

Notes:
Rendering never occurs server-side when previewing your site.
Server-side rendering only occurs when visitors initially enter the site, and not when visitors navigate from page-to-page within the site.

Syntax

function set(key: string, data: *): void

set Parameters

NAME

TYPE

DESCRIPTION

key

string

A name representing the data to return to the client-side. Key names are unique within a site. Using the same key name within the same site code overwrites the corresponding data.

data

The data to return to the client-side.

Returns

This function does not return anything.

Return Type:

void

Was this helpful?

Set the warmup data on the server

Copy Code

1import wixWindowFrontend from 'wix-window-frontend';
2
3...
4
5if (wixWindowFrontend.rendering.env === "backend") {
6  wixWindowFrontend.warmupData.set("myWarmupMessage", "Now rendering on the server.");
7}

Use warmup data to send already-retrieved query results from the server to the client-side

This example demonstrates how to use warmupData to optimize performance between server-side and browser rendering.

The example has a getData() function that performs a query on a MyCollection collection.

If this operation happens to run on the server, the results are set for later browser use. The wixWindowFrontend.rendering.env property indicates if the run is occurring on the server (backend) or on the client-side (browser).

When rendering in the browser, the client-side code checks if the query results already exist. If so, there is no need to perform the same query again. If not, the client-side code runs the query.

Two text boxes are defined on the page: retrievedMessage displays a message about where the rendering occurred and retrievedData displays the query items.

Copy Code

1import wixData from 'wix-data';
2import wixWindowFrontend from 'wix-window-frontend';
3
4async function getData() {
5  const results = await wixData.query("MyCollection")
6    .find();
7  if (wixWindowFrontend.rendering.env === "backend") {
8    wixWindowFrontend.warmupData.set("myWarmupData", results.items);
9    wixWindowFrontend.warmupData.set("myWarmupMessage", "Rendering on the server.");
10  }
11  return results;
12}
13
14$w.onReady(async function () {
15  const defaultMessage = "Rendering client-side."
16  const dataResults = wixWindowFrontend.warmupData.get("myWarmupData") || await getData();
17  const message = wixWindowFrontend.warmupData.get("myWarmupMessage") || defaultMessage;
18  $w("#retrievedData").text = JSON.stringify(dataResults);
19  $w("#retrievedMessage").text = message;
20});