---
title: "Server Side Rendering | Features"
description: "Server-render or pre-render your grid and hydrate it on the client to help when you have large datasets, if your end-user is on low-powered devices, or if there are network constraints."
url: https://www.zinggrid.com/docs/features/server-side-rendering
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/features/server-side-rendering.md
mode: provenance
representation: markdown
origin_response_id: 2298c86156601a821ccccf9613c43ccb
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.703Z
version_nonce: 339e1ad60cd4fa9cd9073abfe0382eac
generated_at_utc: 2026-11-09T16:15:15.281Z
response_nonce: db4ac0a59b3955413fb38ac773fb60f3
```

# Server-Side Rendering

To enhance performance, you can server-render or pre-render your grid and hydrate it on the client.

## Why do I need SSR?

Server-side rendering is necessary if you're encountering any of the following issues:
* Your dataset is large
* You or your users are on low-powered devices
* Network constraints are causing performance issues

## How to implement SSR

In a general scenario with SSR, there are a few crucial steps:

1. Render your `.html` to a corresponding `/dist/.html`.
2. Use "Find and Replace" to find all `<zing-grid>` tags and add the `[server-render="true"]` attribute to them.
3. Render the dist page. When you view the page, ZingGrid will already be populated. Once the ZingGrid library is loaded on the page, it will find and hydrate the grid. Hydration will give the grid reference to your data – essentially enabling all features such as paging, search, sort, etc.

![SSR Diagram](https://www.zinggrid.com/assets/img/ssr_diagram.png)

## `server-render` Attribute

You can also easily add server-side rendering to your previously rendered grid with the `server-render` attribute, like so:

```html
<zing-grid server-render="true"
  <!-- already rendered content -->
  <zg-colgroup>...</zg-colgroup>
  ...
</zing-grid>
```
### `server-render` Grid
Here is a complete grid with server-side rendering enabled via the `server-render` attribute:

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

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

* [Adding Features Guide](https://www.zinggrid.com/docs/adding-features)