RSC Mode Templates Overview
Premium

The server templates in the RSC mode of the KendoReact Grid can be defined similarly to custom cells in the client mode, but their behavior depends on whether they are defined in a server-rendered page or a client-rendered page. This hybrid approach allows developers to choose between server-rendered templates for performance optimization or client-side templates for interactive functionality.

The RSC Mode Templates feature 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

RSC Mode Server Templates

You can define a custom server template in the sample page where the RSC Grid is configured - it must not contain 'use client' at the top. These templates are rendered and function entirely on the server, making them ideal for scenarios where performance and static content rendering are prioritized.

If the custom cell performs any server actions, the developer is responsible for handling the state updates accordingly.

tsx

//app.tsx

const CustomCell = (props: GridCustomCellProps) => {
    return (
        <td {...props.tdProps}>
            <div>{props.children} (Processed on Server)</div>
        </td>
    );
};

export default function ServerGrid() {
    return (
        <Grid data={data}>
            <GridColumn field="userName" title="User Name" />
            <GridColumn field="userID" title="Activity" cells={{ data: CustomCell }} />
        </Grid>
    );
}

Take a look at the demo below, where we showcase how a custom cell template is rendered and functioning entirely on the server for optimized performance.

Change Theme

Theme

Loading ...

RSC Mode Client Templates

In case you have an already implemented custom cell template working with Native client events or just want to use React hooks to handle the cell state, you can still use it with the server Grid by defining it on a separate page that includes 'use client' at the top.

In this way you will utilize the hybrid capabilities of the Grid, having custom cells rendered on the server but functioning on the client-side. To do so you should:

Define a custom template on a page running on the client-side:

tsx

//clientcomponents.tsx
'use client';

export const CustomCell = (props: GridCustomCellProps) => {
    return (
        <td
            {...props.tdProps}
            colSpan={1}
            style={{
                color: props.children == 'true' ? 'green' : 'crimson'
            }}
        >
            {props.children}
        </td>
    );
};

Import the template on the server-side page where the Grid is defined:

tsx

//app.tsx

import { CustomCell } from './clientcomponents';

export default function ServerGrid() {
    return (
        <Grid data={data}>
            <GridColumn field="userName" title="User Name" />
            <GridColumn field="Discontinued" cells={{ data: CustomCell }} />
        </Grid>
    );
}

Below, you will find a demo illustrating how a custom client cell template can be seamlessly integrated with the RSC mode of KendoReact Grid.