ホームページ > 記事 > ウェブフロントエンド > React Server コンポーネントを完全にサポートする React SDK を発表
React Server コンポーネントを完全にサポートする React SDK を発表
- Barbara Streisandオリジナル
- 2024-11-24 03:59:10939ブラウズ
Next.js への App Router パラダイムの導入により、開発者がアプリケーションを構築および構造化する方法に大きな変化がもたらされました。これにより、React Server Components (RSC) などのエキサイティングな機能やレンダリングのより詳細な制御への扉が開かれましたが、クライアント側とサーバー側の両方の環境をシームレスにサポートする必要があるパッケージに複雑さも導入されました。
@storyblok/react バージョン 4.0.0 のリリースにより、Next.js で React サーバー コンポーネントの完全なサポートを提供できることを誇りに思います。このアップデートにより、実装が簡素化され、ビジュアル エディターでライブ プレビュー機能が有効になり、堅牢なサーバー レンダリングがすべて単一の統合セットアップで保証されます。
今すぐ使用を開始してください:
npm i @storyblok/react@4
App Router で @storyblok/react v3 を使用している場合、いくつかの重大な変更があります。アプリを更新する方法については、この記事を読み続けてください。
@storyblok/react 4.0.0 の新機能は何ですか?
このリリースの主な改善点を簡単にまとめます:
統合 RSC サポート
以前は、Next.js の React Server コンポーネントには互換性を確保するために 2 つの異なる実装が必要でした。バージョン 4.0.0 では、これを合理化し、すべてを 1 つの一貫したアプローチに統合しました。ビジュアルエディターによるライブプレビュー
App Router を使用する開発者は、Storyblok Visual Editor で直接ライブ プレビュー機能を利用できるようになり、開発およびコンテンツ編集エクスペリエンスが向上します。シームレスサーバーレンダリング
Next.js のサーバー レンダリング機能をフル活用して、アプリケーションのパフォーマンスとスケーラビリティを向上させます
使い方
ステップ 1: SDK を初期化する
まず、新しいファイル lib/storyblok.js を作成して SDK を初期化します。 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,
},
});
getStoryblokApi() 関数は、サーバー コンポーネントとクライアント コンポーネント間で動作する Storyblok クライアントの共有インスタンスを返します。
ステップ 2: StoryblokProvider でアプリケーションをラップする
次に、StoryblokProvider コンポーネントを作成して、クライアント側でライブ編集を有効にします。このプロバイダーを使用してアプリ全体を app/layout.jsx ファイルでラップします。
// app/layout.jsx
import StoryblokProvider from '@/components/StoryblokProvider';
export default function RootLayout({ children }) {
return (
<StoryblokProvider>
<html lang="en">
<body>{children}</body>
</html>
</StoryblokProvider>
);
}
次に、StoryblokProvider コンポーネントを作成します。
// components/StoryblokProvider.jsx
'use client';
import { getStoryblokApi } from '@/lib/storyblok';
export default function StoryblokProvider({ children }) {
getStoryblokApi(); // Re-initialize on the client
return children;
}
StoryblokProvider はクライアント コンポーネントであることに注意してください。これにより、クライアント側コンポーネントが、ビジュアル エディターでのライブ編集など、Storyblok と対話できるようになります。
ステップ 3: コンテンツを取得してコンポーネントをレンダリングする
サーバー コンポーネントで、getStoryblokApi() 関数を使用して Storyblok からコンテンツを取得します。これは app/page.jsx ファイルの例です。
npm i @storyblok/react@4
ステップ 4: サーバー レンダリングに StoryblokServerComponent を使用する
コンポーネントを動的にレンダリングするには、常に @storyblok/react/rsc の StoryblokServerComponent を使用します。
// 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,
},
});
これにより、コンポーネントをクライアント コンポーネントとして宣言した場合でも、サーバー側レンダリングとの互換性が確保されます。
次は何ですか?
バージョン 4 の導入をさらにスムーズにするために、更新された公式ドキュメントを準備中です。それまでの間、重要な手順はすべて README に含まれています。
@storyblok/react を改善するには、あなたのフィードバックと貢献が不可欠です。ご提案や問題がある場合は、お気軽に問題をオープンするか、プロジェクトに直接貢献してください。
以上がReact Server コンポーネントを完全にサポートする React SDK を発表の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。