> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Optimize Page Rendering with Warmup Data

## Article: Optimize Page Rendering with Warmup Data

## Article Link: https://dev.wix.com/docs/develop-websites-sdk/code-your-site/build-a-custom-frontend/page-rendering/optimize-page-rendering-with-warmup-data.md

## Article Content:

# Optimize Page Rendering with Warmup Data

Use [warmup data](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/build-a-custom-frontend/page-rendering/about-warmup-data.md) to speed up your site's [page rendering](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/build-a-custom-frontend/page-rendering/about-page-rendering.md) by reducing the number of data operations that occur during client-side rendering.

## Create a data query with warmup data

Follow this procedure to make a data query that's 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 wasn't made during server-side rendering, it's called for the first time during client-side rendering.   

1. Add your import statements.
```javascript
import { items } from '@wix/data';
import { window } from '@wix/site-window';
```

2. Define a `getData()` function that makes a data query. Use the [Window API](https://dev.wix.com/docs/sdk/frontend-modules/window/introduction.md) to conditionally set the query results as warmup data if the query is being made during server-side rendering. 

```javascript
async function getData() {
  const results = await items.query("myCollection").find();
  if ((await window.rendering()).env == "backend") {
    await window.warmupData().set("myWarmupData", results.items);
  }
  return results;
}
```

3. In your `onReady()` code, store your data in a variable called `dataResults`. Retrieve the warmup data by calling `warmupData.get`. If server-side rendering doesn't occur, `dataResults` should default to the return value of `getData()`.

```javascript
$w.onReady(async function () {
  const warmupData = await window.warmupData();
  const dataResults = 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've 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:

```javascript
import { items } from '@wix/data';
import { window } from '@wix/site-window';

async function getData() {
  const results = await items.query("myCollection").find();
  if ((await window.rendering()).env == "backend") {
    await window.warmupData().set("myWarmupData", results.items);
  }
  return results;
}

$w.onReady(async function () {
  const warmupData = await window.warmupData();
  const dataResults = warmupData.get("myWarmupData") || await getData();
  // Use your data as needed. 
});
```

## See also

- [About page rendering](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/build-a-custom-frontend/page-rendering/about-page-rendering.md)
- [About warmup data](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/build-a-custom-frontend/page-rendering/about-warmup-data.md)
- [Warmup Data API](https://dev.wix.com/docs/sdk/frontend-modules/window/warmup-data/introduction.md)