Annonce du SDK React avec prise en charge complète des composants du serveur React

L'introduction du paradigme App Router dans Next.js a apporté des changements significatifs dans la façon dont les développeurs créent et structurent les applications. Bien qu'il ait ouvert la porte à des fonctionnalités intéressantes telles que les composants React Server (RSC) et un contrôle plus précis du rendu, il a également introduit de la complexité pour les packages qui devaient prendre en charge de manière transparente les environnements côté client et côté serveur.

Avec la sortie de @storyblok/react version 4.0.0, nous sommes fiers d'offrir une prise en charge complète des composants du serveur React dans Next.js. Cette mise à jour simplifie la mise en œuvre, active la fonctionnalité de prévisualisation en direct dans notre éditeur visuel et garantit un rendu de serveur robuste, le tout dans une configuration unique et unifiée.

Commencez à l'utiliser maintenant avec :

npm i @storyblok/react@4

Si vous utilisez @storyblok/react v3 avec App Router, il y a quelques changements importants. Veuillez continuer à lire cet article pour savoir comment mettre à jour votre application.

---

Quoi de neuf dans @storyblok/react 4.0.0 ?

Voici un bref aperçu des améliorations majeures de cette version :

1. Support RSC unifié
   Auparavant, les composants React Server dans Next.js nécessitaient deux implémentations différentes pour des raisons de compatibilité. Avec la version 4.0.0, nous avons rationalisé cela et tout regroupé en une seule approche cohérente.

2. Aperçu en direct avec Visual Editor
   Les développeurs utilisant App Router peuvent désormais profiter des fonctionnalités de prévisualisation en direct directement dans Storyblok Visual Editor, améliorant ainsi l'expérience de développement et d'édition de contenu.

3. Rendu de serveur transparent
   Tirez parti des capacités de rendu complètes du serveur de Next.js pour améliorer les performances et l'évolutivité de vos applications

---

Comment l'utiliser

Étape 1 : initialiser le SDK

Commencez par créer un nouveau fichier lib/storyblok.js pour initialiser le SDK. Assurez-vous d'exporter la fonction getStoryblokApi().

// lib/storyblok.js
import Page from '@/components/Page';
import Teaser from '@/components/Teaser';
import { apiPlugin, storyblokInit } from '@storyblok/react/rsc';

export const getStoryblokApi = storyblokInit({
  accessToken: 'YOUR_ACCESS_TOKEN',
  use: [apiPlugin],
  components: {
    teaser: Teaser,
    page: Page,
  },
});

La fonction getStoryblokApi() renvoie une instance partagée du client Storyblok qui fonctionne sur les composants serveur et client.

Étape 2 : enveloppez votre application avec StoryblokProvider

Ensuite, créez un composant StoryblokProvider pour activer l'édition en direct côté client. Enveloppez l'intégralité de votre application avec ce fournisseur dans le fichier app/layout.jsx.

// app/layout.jsx
import StoryblokProvider from '@/components/StoryblokProvider';

export default function RootLayout({ children }) {
  return (
    <storyblokprovider>
      
        {children}
      
    </storyblokprovider>
  );
}

Maintenant, créez le composant StoryblokProvider :

// components/StoryblokProvider.jsx
'use client';

import { getStoryblokApi } from '@/lib/storyblok';

export default function StoryblokProvider({ children }) {
  getStoryblokApi(); // Re-initialize on the client
  return children;
}

Notez que StoryblokProvider est un composant client. Cela garantit que vos composants côté client peuvent interagir avec Storyblok, y compris l'édition en direct dans l'éditeur visuel.

Étape 3 : Récupérer le contenu et restituer les composants

Dans les composants serveur, utilisez la fonction getStoryblokApi() pour récupérer le contenu de Storyblok. Voici un exemple de fichier app/page.jsx.

npm i @storyblok/react@4

Étape 4 : Utilisez StoryblokServerComponent pour le rendu du serveur

Pour le rendu dynamique des composants, utilisez toujours le StoryblokServerComponent de @storyblok/react/rsc.

// lib/storyblok.js
import Page from '@/components/Page';
import Teaser from '@/components/Teaser';
import { apiPlugin, storyblokInit } from '@storyblok/react/rsc';

export const getStoryblokApi = storyblokInit({
  accessToken: 'YOUR_ACCESS_TOKEN',
  use: [apiPlugin],
  components: {
    teaser: Teaser,
    page: Page,
  },
});

Cela garantit la compatibilité avec le rendu côté serveur, même si vous déclarez le composant comme composant client.

Quelle est la prochaine étape ?

Nous préparons une documentation officielle mise à jour pour rendre l'adoption de la version 4 encore plus fluide. En attendant, toutes les étapes essentielles sont incluses dans le README.

Vos commentaires et contributions sont essentiels pour améliorer @storyblok/react ! Si vous avez des suggestions ou des problèmes, n'hésitez pas à ouvrir un numéro ou à contribuer directement au projet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!