Overview
KendoReact Server Components represent a cutting-edge implementation of a UI Library which utilizes the React Server Components (or RSC) application architecture.
They are designed to be used in RSC-compatible environments such as Next.JS with app router and are currently in an experimental phase.
The KendoReact Server Components are distributed through npm packages, and are available as @progress/kendo-react-server-components.
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.
Data Fetching
One of the standout features of the KendoReact Server Components is their robust data-fetching capabilities. These components allow the initiation of data-fetching before rendering, dynamically updating the DOM upon data availability, and seamlessly transitioning to a predefined loading state by utilizing React.Suspense.
The server-side execution enables you to fetch the data from various sources, including databases, REST APIs, or a GraphQL endpoint.
import { Grid } from "@progress/kendo-react-server-components";
return (
<Grid
// ...
data={sql`SELECT * FROM products ORDER BY product_id`}
/>
);Bundle size
Unlike regular React components that execute on both server and client (hydration), server components operate exclusively on the server. This results in a significant reduction in the total bundle size of your application.
By using the KendoReact Server Components 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.
Server Actions
RSC introduce server actions, and KendoReact Server Components seamlessly integrate with them. Server-actions compatibility allows passing actions to the component's callbacks, such as onStateChange or onDataChange, empowering you to execute custom logic on the server.
In other words, 'use server' marks server-side functions that can be called from client-side:
import { Grid } from "@progress/kendo-react-server-components";
const handleDataChange = async (data, action) => {
"use server";
// ...
await sql`UPDATE products SET product_name = 'New Name' WHERE product_id = ${action.data.product_id}`;
};
return (
<Grid
// ...
data={sql`SELECT * FROM products ORDER BY product_id`.then((res) => res.rows)}
onDataChange={handleDataChange}
/>
);