---
title: "Performance"
description: "To improve performance, ZingGrid has several key features to render data more quickly to the screen: Paging, Infinite Scroll, Server Paging, Server-Side Render."
url: https://www.zinggrid.com/docs/features/performance
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/features/performance.md
mode: provenance
representation: markdown
origin_response_id: 0bbdebb611d658e5604a251554a1c3aa
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.699Z
version_nonce: 16ce3ee2ff2455f2c81d49318cd270e6
generated_at_utc: 2026-10-25T18:22:30.195Z
response_nonce: 1f8a06af477e6f815fb96446f5aa54df
```

# Performance

ZingGrid had performance in mind while developing. Several key features can help you render data more quickly to the screen, including Infinite Scroll, Server Paging, Server-Side Rendering, and Styling.

## Infinite Scroll

To enable infinite scrolling, add the `height` attribute to your `<zing-grid>` tag **and** the `[name="loadByScroll"]` attribute to `<zg-param>` with `value="true"`, like so:

```html
<zing-grid height="238" >
    <zg-data>
      <!-- loadByScroll enables infinite scrolling -->
      <zg-param name="loadByScroll" value="true"></zg-param>
    </zg-data>
</zing-grid>
```

> **Tip:** While scrolling, ZingGrid will batch in new rows. At any given time there is a small, finite number of rows rendering. [Learn more about infinite scroll here](https://www.zinggrid.com/docs/features/virtual-scrolling#infinite-scroll).

### Infinite Scroll Grid
Here is a complete grid with infinite scrolling enabled:

[Example code](https://app.zingsoft.com/demos/embed/J0L5T5YU)

## Server Paging

Enable server paging through a couple `<zg-param>` attributes, like so:

```html
<zg-param name="loadByPage" value="true"></zg-param>
<!-- define the "page" query parameter -->
<zg-param name="pageKey" value="page"></zg-param>
<!--
  Need to tell ZG how many records were returned so it knows
  how to divide up the page-size
-->
<zg-param name="countPath" value="count"></zg-param>
<!-- define the path in the result JSON to find next/prev urls -->
<zg-param name="nextPath" value="next"></zg-param>
<zg-param name="prevPath" value="previous"></zg-param>
```

> **Note:** While paging, ZingGrid will only fetch as much data is needed to populate the rows. The library also re-uses the same rows from page to page. This will be even faster than just normal paging because a smaller initial dataset is fetched on render.

### Server Paging Enabled Grid
Here is a complete grid with server paging enabled:

[Example code](https://app.zingsoft.com/demos/embed/2N8MT6X4)

## Server-Side Render

To enhance performance, you can server-render or pre-render your grid and hydrate it on the client. Depending on your dataset size, this can help increase speed for grids without paging.

> **Note:** [Learn more about Server-Side Rendering here](https://zinggrid-com-stage.firebaseapp.com/docs/features/server-side-rendering).

### Server-Side Rendered Grid
Here is a complete grid that is server-side rendered:

[Example code](https://app.zingsoft.com/demos/embed/026WTT56)

## Height

Defining a `height` attribute on the grid will automatically enable lazy loading rows. By default, we try to fit the grid to the container size and then stretch the container to fit all rows. When you define a height, the **grid will only use DOM nodes visible within the height of the grid.** This means if only 5 rows are showing and there are 1000 rows, only 5 DOM rows will be used.

Here is a complete grid with the `height` attribute used to enhance performance:

[Example code](https://app.zingsoft.com/demos/embed/932MV513)

## Related Resources
Here are some extra resources related to this feature to help with creating your grid:

* [Paging Documentation](https://www.zinggrid.com/docs/features/paging)
* [Server Features](https://www.zinggrid.com/docs/features/server-features)
* [Server-Side Rendering Documentation](https://www.zinggrid.com/docs/features/server-side-rendering)