宣布 React SDK 完全支持 React 服务器组件

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 有什么新功能？

以下是此版本中主要改进的快速概述：

1. 统一 RSC 支持
   以前，Next.js 中的 React 服务器组件需要两种不同的实现来实现兼容性。在 4.0.0 版本中，我们简化了这一过程，并将所有内容整合为一种一致的方法。

2. 使用可视化编辑器进行实时预览
   使用 App Router 的开发者现在可以直接在 Storyblok 可视化编辑器中享受实时预览功能，从而增强开发和内容编辑体验。

3. 无缝服务器渲染
   利用 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>
      
        {children}
      
    </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中文网其他相关文章！