Get Started with KendoReact Server Components

KendoReact Server Components are distributed separately from the regular KendoReact package. They are currently in a technology preview phase and are not recommended for production use.

KendoReact Server Components are in an experimental phase and are not intended for production use. APIs may change without introducing a breaking change. Please refer to the Umbrella GitHub issue for general feedback, bug reports, and more information.

Requirements

• Node.js version 18.0.0 or later.
• Next.js version 13.0.0 or later, with app router.
• react@canary version 18.3.0-canary. You do not need to install this package manually, as it is already shipped in Next.js.

Create a Next.js Project

For the purposes of this tutorial, start by creating an empty Next.js project, ensuring that the routing is enabled (you can use any other RSC-compatible environment, when available):

Copy Codenpx create-next-app my-test-rsc-app --ts --app --no-src-dir

Installation

Next, navigate to the root of your app and install the KendoReact Server Components package, along with the default Kendo theme packages:

Copy Codenpm install @progress/kendo-react-server-components @progress/kendo-theme-default

Import the Server Components

To start using the KendoReact Server Components, import the Grid component in your Next.js application. Add the import in the existing page.tsx file:

Copy Code// page.tsx

import { Grid } from "@progress/kendo-react-server-components";

Import the Theme & Icons

To enhance the visual appearance of the Grid, make sure to import the Kendo Default theme and font icons in your layout file:

Copy Code// layout.tsx

import "@progress/kendo-theme-default/dist/all.css";

The Default theme is just one option in the collection of four stunning Telerik and Kendo UI themes. Feel free to explore and experiment with any of these themes to find the perfect visual style for your project.

Use the Server Components

Now, you can use the KendoReact Server Components without explicitly including a "use client"; directive.

Copy Code// pages.tsx

<Grid
  data={fetch(`https://demos.telerik.com/kendo-ui/service-v4/odata/Products`)
    .then((resp) => resp.json())
    .then((json) => json.value)}
  schema={{
    model: {
      id: "ProductID",
    },
  }}
  state={{
    columns: [
      { field: "ProductID", title: "ID", width: 50 },
      { field: "ProductName", title: "Name" },
      { field: "UnitPrice", title: "Price" },
      { field: "UnitsInStock", title: "In stock" },
    ],
  }}
/>

After completing the steps above, you will be able to reproduce the following example:

To learn more about how to configure the Grid component, refer to the Grid Overview documentation.

Additional Resources

• КendoReact Server Grid Overview
• КendoReact Server Components Styling