宣布 React SDK 完全支持 React 服务器组件-js教程-PHP中文网

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

Barbara Streisand

发布： 2024-11-24 03:59:10

原创

938 人浏览过

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

登录后复制

如果您将 @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,
  },
});

登录后复制

这确保了与服务器端渲染的兼容性，即使您将组件声明为客户端组件也是如此。