宣布 React SDK 完全支援 React 伺服器元件
- 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
如果您將 @storyblok/react v3 與 App Router 一起使用，則會發生一些重大變更。請繼續閱讀本文以了解如何更新您的應用程式。
@storyblok/react 4.0.0 有什麼新功能？
以下是此版本中主要改進的快速概述：
統一 RSC 支援
以前，Next.js 中的 React 伺服器元件需要兩種不同的實作來實現相容性。在 4.0.0 版本中，我們簡化了這個過程，並將所有內容整合為一致的方法。使用視覺化編輯器進行即時預覽
使用 App Router 的開發者現在可以直接在 Storyblok 視覺化編輯器中享受即時預覽功能，從而增強開發和內容編輯體驗。無縫伺服器渲染
利用 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 的採用更加順利。同時，所有基本步驟都包含在自述文件中。
您的回饋和貢獻對於改進@storyblok/react 至關重要！如果您有建議或問題，請隨時提出問題或直接為專案做出貢獻。
以上是宣布 React SDK 完全支援 React 伺服器元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！