Optimize Page Rendering with Warmup Data

Use warmup data to speed up your site's page rendering by reducing the number of data operations that occur during client-side rendering.

Follow this procedure to make a data query that is called only once during server-side rendering. The query results are sent as warmup data for display during client-side rendering. If the data query was not made during server-side rendering, it is called for the first time during client-side rendering.

  1. Add your import statements.
Copy
import wixData from "wix-data"; import wixWindowFrontend from "wix-window-frontend";
  1. Define a getData() function that makes a wixData query. Use warmupData.set to conditionally set the query results as warmup data if the query is being made during server-side rendering.
Copy
async function getData() { const results = await wixData.query("myCollection").find(); if (wixWindowFrontend.rendering.env == "backend") { wixWindowFrontend.warmupData.set("myWarmupData", results.items); } return results; }
  1. In your onReady() code, store your data in a variable called dataResults. Retrieve the warmup data by calling warmupData.get. If server-side rendering does not occur, dataResults should default to the return value of getData().
Copy
$w.onReady(async function () { const dataResults = wixWindowFrontend.warmupData.get("myWarmupData") || (await getData()); // Use your data as needed. });

In this example, the dataResults variable is populated with the results of the query in all cases. When possible, we have optimized performance by using the warmup data initially fetched on the server, instead of running the query a second time during client-side rendering.

The full page code looks like this:

Copy
async function getData() { const results = await wixData.query("myCollection").find(); if (wixWindowFrontend.rendering.env == "backend") { wixWindowFrontend.warmupData.set("myWarmupData", results.items); } return results; } $w.onReady(async function () { const dataResults = wixWindowFrontend.warmupData.get("myWarmupData") || (await getData()); // Use your data as needed. });

See also

Did this help?