Docs

Server-Side Rendering

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

Enable through attribute

Easily add server-side rendering to your previously rendererd grid with the server-render attribute.

<zing-grid server-render="true"
  <!-- already rendered content -->
  <zg-colgroup>...</zg-colgroup>
  ...
</zing-grid>
Top