Présentation du mode RSC dans la grille de KendoreAct

Le mode RSC dans la grille de données de KendoreAct vous permet de créer des applications de réaction haute performance en déplaçant les opérations à forte intensité de données vers le serveur.

Le paysage du développement de React a évolué avec l’introduction de composants React Server (RSCS) dans React 19. Comme nous l’avons exploré dans les discussions précédentes (RSC, SSR et CSR – OMG! et Quoi de neuf dans React 19), Les RSC offrent un paradigme puissant pour la construction de perforants et des applications évolutives en passant au calcul vers le serveur.

Dans cet article, nous explorerons ce que sont les composants React Server et comment les nouveaux progrès Kendoreact Mode RSC de la grille en profite. Nous allons parcourir certaines des principales fonctionnalités alimentées par RSC maintenant prises en charge dans la grille KendoreAct, telles que les opérations de données côté serveur et les actions du serveur.

Grille de données kendoreact

Le React Data Grid depuis Progrès kendoreact est un composant riche en fonctionnalités conçu pour gérer et présenter de grandes quantités de données. Il est rempli de fonctionnalités intégrées comme tri, filtration, regroupement et paginationqui sont essentiels pour toute expérience utilisateur de grille moderne basée sur les données.

Voici un rapide aperçu d’une implémentation de base du composant:

import * as React from "react";
import { Grid, GridColumn } from "@progress/kendo-react-grid";
import { ProgressBar } from "@progress/kendo-react-progressbars";

const ProgressCell = (props) => {
  const progress = props.dataItem[props.field];

  if (props.rowType === "groupHeader") {
    return;
  }

  return (
    <td {...props.tdProps}>
      <ProgressBar
        style={{
          width: "150px",
          height: "10px",
          marginRight: "20px",
        }}
        value={progress}
        labelVisible={false}
      />
      {progress} %<span> </span>
    </td>
  );
};

const App = () => {
  const data = [
    {
      ProductID: 1,
      ProductName: "Chai Tea",
      UnitPrice: 4.0,
      UnitsInStock: 85,
    },
    {
      ProductID: 2,
      ProductName: "Peppermint Tea",
      UnitPrice: 6.0,
      UnitsInStock: 27,
    },
    {
      ProductID: 3,
      ProductName: "Mint Tea",
      UnitPrice: 5.5,
      UnitsInStock: 52,
    },
  ];

  return (
    <Grid data={data}>
      <GridColumn field="ProductID" title="ID" width="40px" />
      <GridColumn field="ProductName" title="Product Name" />
      <GridColumn field="UnitPrice" title="Price" format="{0:c2}" />
      <GridColumn
        field="UnitsInStock"
        title="Stock Level"
        cell={ProgressCell}
      />
    </Grid>
  );
};

export default App;

Dans l’exemple de code ci-dessus, nous avons créé un réseau de base avec un rendu de cellules personnalisés pour la colonne au niveau de stock à l’aide d’un composant de barre de progression pour représenter visuellement les données.

Les caractéristiques principales du composant de la grille de données de Kendoreact sont disponibles dans le cadre de Kendoreact gratuitLe niveau gratuit de la bibliothèque de composants Kendoreact de qualité d’entreprise qui comprend 50+ composants d’interface utilisateur et outils de conception / interface utilisateur supplémentaires.

React Server Components (RSC)

Avant de plonger dans le nouveau mode RSC Grid Kendorect React Server Composants sont. Introduits et stabilisés dans React 19, les RSC permettent aux développeurs de créer des composants de réaction sans état qui s’exécutent exclusivement sur le serveur.

Étant donné que ces composants s’exécutent dans un environnement de serveur, ils peuvent accéder directement à la couche de données d’une application (comme une base de données ou un microservice), sans avoir besoin de récupérer des données via un point de terminaison API séparé. Cela change fondamentalement la façon dont nous pensons à la récupération des données dans les applications React.

import db from "./database";


async function BlogPost({ postId }) {
  
  const post = await db.posts.get(postId);

  return (
    <div>
      <h2>{post.title}</h2>
      <p>{post.content}</p>
    </div>
  );
}

Comme nous pouvons le voir dans l’exemple simple ci-dessus, le BlogPost Le composant récupère ses données directement dans le composant lui-même. Cela réduit la quantité de JavaScript expédiée au client, conduisant à des charges de page initiales plus rapides et à des performances améliorées.

Mode RSC de grille de données Kendoreact

Le nouveau mode RSC dans la grille KendoreAct est une fonctionnalité qui exploite la puissance des composants du serveur React pour décharger le traitement des données sur le serveur.

En fonctionnant sur le serveur, la grille Kendoreact en mode RSC réduit la taille du bundle côté client, car le JavaScript pour les opérations de données n’a pas besoin d’être envoyé au navigateur. Ceci est idéal pour les applications lourdes de contenu où le temps de chargement initial et le référencement sont essentiels.

Opérations de données côté serveur

L’une des caractéristiques les plus puissantes du mode RSC est la possibilité de gérer opérations de données Comme la pagination, le tri et le filtrage de tout sur le serveur. Dans une grille traditionnelle côté client, toutes les données sont envoyées au client, qui effectue ensuite ces opérations. Avec le mode RSC, la grille n’a besoin que de se préoccuper des données nécessaires au client.

La gestion de l’État dans les RSC est apatride. Pour la grille, cela signifie que les changements d’état des opérations de données sont gérés sur le serveur, utilisant souvent des cookies pour persister l’état entre les demandes.

Voici comment nous pourrions gérer un événement de changement d’état de données sur le serveur:

import { Grid, GridColumn } from "@progress/kendo-react-grid";
import { cookies } from "next/headers"; 
import products from "products.json";

const GRID_STATE_COOKIE = "kendoreact-grid-rsc-state";

const getState = () => {
  const cookie = cookies().get(GRID_STATE_COOKIE);
  return JSON.parse(cookie?.value);
};

const saveState = (state) => {
  cookies().set(GRID_STATE_COOKIE, JSON.stringify(state));
};

const onDataStateChange = async (event) => {
  "use server";
  saveState(event.dataState);
};

export default async function MyGridPage() {
  const data = products;
  const dataState = getState();

  return (
    <Grid
      data={data}
      onDataStateChange={onDataStateChange}
      dataItemKey={"ProductID"}
      pageable={true}
      sortable={true}
      filterable={true}
    >
      <GridColumn field="ProductID" title="ID" />
      <GridColumn field="ProductName" title="Product Name" />
    </Grid>
  );
}

Dans l’exemple ci-dessus, le onDataStateChange Le gestionnaire d’événements est une action de serveur (notez le 'use server' directif). Il enregistre l’état actuel de la grille (page, commande de tri, etc.) à un cookie. Lorsque la page remensionne, il lit cet état et l’applique aux données.

Actions de serveur

Comme nous l’avons vu ci-dessus, l’architecture RSC présente Actions de serveurqui sont des fonctions qui peuvent être transmises des composants rendus du serveur aux composants clients et exécutés sur le serveur.

Dans la grille de Kendoreact, les gestionnaires d’événements comme onFilterChange, onSortChange et onItemChange peut être défini comme async fonctions avec le 'use server' directif. Cela nous permet d’exécuter une logique côté serveur personnalisé en réponse aux interactions utilisateur dans la grille sans rechargement de page complète.

const onSelectionChange = async (event) => {
  "use server";

  
  console.log("Selected IDs:", event.dataItem.ProductID);

  
  saveSelectionState(event.select);
};


<Grid
  onSelectionChange={onSelectionChange}
  selectable={true}
  
/>;

Dans l’exemple de code ci-dessus, le onSelectionChange La fonction est une action de serveur qui s’exécute sur le serveur lorsqu’un utilisateur sélectionne une ligne de grille. Cela nous permet de gérer en toute sécurité l’interaction sur le serveur (par exemple, en enregistrant les données sélectionnées ou à la mise à jour d’une base de données) tout en persistant l’état de sélection afin que l’interface utilisateur reste cohérente entre les demandes.

Modèles hybrides: serveur et client

Les capacités de personnalisation de la grille de Kendoreact s’étendent en mode RSC avec une approche hybride flexible pour modèles. Les modèles nous permettent de décider si une cellule personnalisée doit être rendue entièrement sur le serveur pour des performances maximales ou être hydratée sur le client pour permettre l’interactivité.

Modèles de serveur

Lorsque les performances sont importantes et que le contenu est statique, nous pouvons utiliser des modèles de serveur. Ce sont des composants définis directement dans le fichier de composant de serveur (celui sans un "use client" directif). Ils sont rendus en HTML sur le serveur, et aucun code de composant correspondant n’est envoyé au client.

Voici un exemple d’une cellule personnalisée entièrement traitée sur le serveur:

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

export default function ServerGrid() {
  return (
    <Grid data={data}>
      <GridColumn field="ProductName" title="Product Name" />
      <GridColumn field="ProductID" title="ID" cell={ServerCustomCell} />
    </Grid>
  );
}

Cette approche est idéale pour afficher des données qui ne nécessitent pas d’interaction utilisateur dans la cellule elle-même.

Modèles du client pour l’interactivité

Pour les scénarios nécessitant une interactivité, comme utiliser des crochets React ou attacher des gestionnaires d’événements côté client, nous pouvons utiliser des modèles clients. Ceci est réalisé en définissant notre composant de cellule personnalisé dans un fichier séparé et en le marquant avec le "use client" directif.

Nous importons ensuite ce composant interactif dans notre composant de serveur. React rendra le HTML initial sur le serveur, puis «hydrate» le composant sur le client, ce qui le rend entièrement interactif.

Tout d’abord, nous définissons le composant interactif dans son propre fichier:

"use client";

import * as React from "react";

export const InteractiveCell = (props) => {
  
  const [liked, setLiked] = React.useState(false);

  return (
    <td {...props.tdProps}>
      {props.dataItem.ProductName}
      <button onClick={() => setLiked(!liked)}>{liked ? "❤️" : "🤍"}</button>
    </td>
  );
};

Ensuite, nous l’importons et l’utilisons dans notre composant de serveur:

import { InteractiveCell } from "./client-components";

export default function ServerGrid() {
  return (
    <Grid data={data}>
      <GridColumn
        field="ProductName"
        title="Product Name"
        cell={InteractiveCell}
      />
      <GridColumn field="ProductID" title="ID" />
    </Grid>
  );
}

Ce modèle hybride nous donne le pouvoir d’optimiser les performances ou l’interactivité sur une base composante par composant.

Conclure

Les RSC présentent une nouvelle façon de construire des applications React, et l’équipe KendoreAct adopte ce changement. Le nouveau mode RSC pour la grille de données de KendoreAct fournit un moyen de créer des applications évolutives hautes performances en déplaçant les opérations à forte intensité de données vers le serveur.

Pour commencer et en savoir plus sur les détails, consultez l’officiel Début avec le mode RSC Grid Kendorect documentation!

N’oubliez pas: le mode RSC DataGrid est disponible dans le cadre de Kendoreact gratuitement. Téléchargez maintenant pour commencer:

Installer maintenant