Ankündigung des React SDK mit vollständiger Unterstützung für React Server Components

Die Einführung des App-Router-Paradigmas in Next.js brachte erhebliche Änderungen in der Art und Weise mit sich, wie Entwickler Anwendungen erstellen und strukturieren. Während es die Tür zu aufregenden Funktionen wie React Server Components (RSC) und einer feineren Kontrolle über das Rendering öffnete, führte es auch zu einer Komplexität für Pakete, die sowohl clientseitige als auch serverseitige Umgebungen nahtlos unterstützen mussten.

Mit der Veröffentlichung von @storyblok/react Version 4.0.0 sind wir stolz, volle Unterstützung für React Server Components in Next.js anbieten zu können. Dieses Update vereinfacht die Implementierung, ermöglicht die Live-Vorschau-Funktionalität in unserem visuellen Editor und gewährleistet ein robustes Server-Rendering, alles in einem einzigen, einheitlichen Setup.

Beginnen Sie es jetzt mit:

npm i @storyblok/react@4

Wenn Sie @storyblok/react v3 mit App Router verwenden, gibt es einige wichtige Änderungen. Bitte lesen Sie diesen Artikel weiter, um zu erfahren, wie Sie Ihre App aktualisieren.

---

Was ist neu in @storyblok/react 4.0.0?

Hier ist ein kurzer Überblick über die wichtigsten Verbesserungen in dieser Version:

1. Einheitliche RSC-Unterstützung
   Bisher erforderten React Server Components in Next.js aus Kompatibilitätsgründen zwei unterschiedliche Implementierungen. Mit Version 4.0.0 haben wir dies optimiert und alles in einem einheitlichen Ansatz konsolidiert.

2. Live-Vorschau mit Visual Editor
   Entwickler, die den App Router verwenden, können jetzt Live-Vorschaufunktionen direkt im Storyblok Visual Editor genießen und so die Entwicklungs- und Inhaltsbearbeitungserfahrung verbessern.

3. Nahtloses Server-Rendering
   Nutzen Sie die vollständigen Server-Rendering-Funktionen von Next.js für eine verbesserte Leistung und Skalierbarkeit Ihrer Anwendungen

---

Wie man es benutzt

Schritt 1: Initialisieren Sie das SDK

Erstellen Sie zunächst eine neue Datei lib/storyblok.js, um das SDK zu initialisieren. Stellen Sie sicher, dass Sie die Funktion getStoryblokApi() exportieren.

// 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,
  },
});

Die Funktion getStoryblokApi() gibt eine gemeinsam genutzte Instanz des Storyblok-Clients zurück, die über Server- und Clientkomponenten hinweg funktioniert.

Schritt 2: Verpacken Sie Ihre Anwendung mit StoryblokProvider

Als nächstes erstellen Sie eine StoryblokProvider-Komponente, um die Live-Bearbeitung auf der Clientseite zu ermöglichen. Wickeln Sie Ihre gesamte App mit diesem Anbieter in die Datei app/layout.jsx ein.

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

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

Erstellen Sie nun die StoryblokProvider-Komponente:

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

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

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

Beachten Sie, dass der StoryblokProvider eine Client-Komponente ist. Dadurch wird sichergestellt, dass Ihre clientseitigen Komponenten mit Storyblok interagieren können, einschließlich der Live-Bearbeitung im visuellen Editor.

Schritt 3: Inhalte abrufen und Komponenten rendern

Verwenden Sie in Serverkomponenten die Funktion getStoryblokApi(), um Inhalte von Storyblok abzurufen. Hier ist eine Beispieldatei app/page.jsx.

npm i @storyblok/react@4

Schritt 4: Verwenden Sie StoryblokServerComponent für das Server-Rendering

Zum dynamischen Rendern von Komponenten verwenden Sie immer die StoryblokServerComponent von @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,
  },
});

Dadurch wird die Kompatibilität mit serverseitigem Rendering sichergestellt, auch wenn Sie die Komponente als Clientkomponente deklarieren.

Was kommt als nächstes?

Wir bereiten eine aktualisierte offizielle Dokumentation vor, um die Einführung von Version 4 noch reibungsloser zu gestalten. In der Zwischenzeit sind alle wesentlichen Schritte in der README-Datei enthalten.

Ihr Feedback und Ihre Beiträge sind entscheidend für die Verbesserung von @storyblok/react! Wenn Sie Vorschläge oder Probleme haben, können Sie gerne ein Problem eröffnen oder direkt zum Projekt beitragen.

Das obige ist der detaillierte Inhalt vonAnkündigung des React SDK mit vollständiger Unterstützung für React Server Components. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!