features
Menu
Menu

Server-Side Rendering

Server-render or pre-render your grid, and hydrate it on the client.

On This Page

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:

Render your .html to a corresponding /dist/.html.
Use "Find and Replace" to find all <zing-grid> tags and add the server-render="true" attribute to them.
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 with the server-render attribute.

In this demo, we purposely duplicated grid content and omitted paging to slow grid rendering. You should see a slight flash of text between rendering and hydration.

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Related Resources

Join the Community

Support, extra demos, pre-releases and more

loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloading