get( )

Gets data from server-side code for use in client-side code.

Description

A performance best practice is to get warmup data on the server 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.

Getting the warmupData data retrieves data that was set on the server and makes the data accessible from the client-side.

You can only get warmupData in the client-side code.

This function returns null if called while on the server.
If this function runs before warmupData.set(), it returns undefined.

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 get(key: string): *

get Parameters

NAME

TYPE

DESCRIPTION

key

string

A name representing the data to return to the client-side. Until rendered, the data is undefined.

Returns

Returns one of the following:

The data corresponding to the key that was set with the warmupData.set() function in the backend.
undefined if not yet set.
null if called while on the server.

Return Type:

Was this helpful?

Get the warmup data on the client-side

Copy Code

1import wixWindowFrontend from 'wix-window-frontend';
2
3...
4
5if (wixWindowFrontend.rendering.env === "browser") {
6  const myMessage = wixWindowFrontend.warmupData.get("myWarmupMessage");
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 client-side page 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 client-side use. The wixWindowFrontend.rendering.env property indicates if the run is occurring on the server (backend) or on the client-side (browser).

When rendering on the client-side, 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});