React Server コンポーネントを完全にサポートする React SDK を発表-jsチュートリアル-php.cn

React Server コンポーネントを完全にサポートする React SDK を発表

Barbara Streisand

リリース： 2024-11-24 03:59:10

オリジナル

937 人が閲覧しました

Announcing React SDK vith full support for React Server Components

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

ログイン後にコピー

これにより、コンポーネントをクライアントコンポーネントとして宣言した場合でも、サーバー側レンダリングとの互換性が確保されます。