Ankündigung des React SDK mit vollständiger Unterstützung für React Server Components-js-Tutorial-php.cn

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

Barbara Streisand

Freigeben： 2024-11-24 03:59:10

Original

1005 Leute haben es durchsucht

Announcing React SDK vith full support for 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

Nach dem Login kopieren

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:

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

Nach dem Login kopieren

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>
      <html lang="en">
        <body>{children}</body>
      </html>
    </StoryblokProvider>
  );
}

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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!