Grid RSC Mode Overview
Premium

The RSC mode of the KendoReact Grid is a modern, high-performance implementation built on top of the React Server Components (or RSC) architecture allowing you to perform server and hybrid data operations.

The RSC Mode of the Grid is part of KendoReact premium, an enterprise-grade UI library with 120+ free and premium components for building polished, performant apps. Test-drive all features with a free 30-day trial.Start Free Trial

The server-side mode of the Grid is part of the default @progress/kendo-react-grid package and is optimized for both client environments and RSC-compatible frameworks like Next.JS with app router. A crucial part of the RSC Grid usage is avoiding the usage of "use client" directive on top of the page where the component is defined:

jsx

import { Grid as ServerGrid } from '@progress/kendo-react-grid';

Change Theme

Theme

Loading ...

Hybrid Data Operations

To use enable the RSC mode of the Grid and utilize its hybrid data operations, you need to simply add it to a page inside a Next.js app (or in another RSC-compatible frameworks) and skip the "use client" directive on top. You should also use 'use server'; added in the beginning of each callback to instruct the Grid that it should perform on the server.

jsx

import { Grid } from '@progress/kendo-react-grid';

const onDataStateChange = async (event: ServerEvent<GridDataStateChangeEvent>) => {
    'use server';

    saveState(event.dataState);
};

return <Grid data={dataResult} onDataStateChange={onDataStateChange} />;

Bundle size

Unlike regular React components that execute on both server and client (hydration), the server mode of the Grid operates exclusively on the server. You can optimize the performance of the RSC Mode Grid even more by specifying the loading of the modules that are actually used which his results in a significant reduction in the total bundle size of your application.

By using the RSC mode of the KendoReact Grid only the essential JavaScript is shipped to the client, which is only the code needed to hydrate the component and add interactivity. The architecture retains most of the virtual DOM on the client side, allowing you to execute expensive operations solely on the server, without the need to ship your code to the client.

Key Features

The KendoReact Server Data Grid offers an extensive and continuously expanding set of built-in features that isn't limited by the list in this section. What makes the Grid truly exceptional is its flexibility—it allows you to seamlessly blend both server-side and client-side operations, adapting to your application's unique requirements.

Getting Started with KendoReact Data Grid RSC Mode

Grid RSC Mode Overview
Premium

Hybrid Data Operations

Bundle size

Key Features

Data Operations

Server Actions

Server Templates

Selection

Filtering

Sorting

Grouping

Paging

Globalization

Next Steps

Suggested Links