React 서버 구성 요소를 완벽하게 지원하는 React SDK 발표

Next.js에 App Router 패러다임이 도입되면서 개발자가 애플리케이션을 구축하고 구성하는 방식에 큰 변화가 생겼습니다. 이는 RSC(React Server Components) 및 렌더링에 대한 보다 정밀한 제어와 같은 흥미로운 기능을 제공하는 동시에 클라이언트측 및 서버측 환경을 모두 원활하게 지원해야 하는 패키지에 복잡성을 도입했습니다.

@storyblok/react 버전 4.0.0의 출시로 Next.js에서 React 서버 구성 요소를 완벽하게 지원하게 된 것을 자랑스럽게 생각합니다. 이 업데이트는 구현을 단순화하고, 비주얼 편집기에서 실시간 미리 보기 기능을 활성화하며, 단일 통합 설정에서 강력한 서버 렌더링을 보장합니다.

지금 바로 사용을 시작해 보세요:

npm i @storyblok/react@4

App Router와 함께 @storyblok/react v3를 사용하는 경우 몇 가지 주요 변경 사항이 있습니다. 앱을 업데이트하는 방법을 알아보려면 이 문서를 계속 읽어보세요.

---

@storyblok/react 4.0.0의 새로운 기능은 무엇인가요?

다음은 이번 릴리스의 주요 개선 사항을 간략하게 요약한 것입니다.

1. 통합 RSC 지원
   이전에는 Next.js의 React 서버 구성 요소에 호환성을 위해 두 가지 다른 구현이 필요했습니다. 버전 4.0.0에서는 이를 간소화하고 모든 것을 하나의 일관된 접근 방식으로 통합했습니다.

2. 비주얼 편집기를 사용한 실시간 미리보기
   앱 라우터를 사용하는 개발자는 이제 Storyblok 비주얼 편집기에서 직접 실시간 미리보기 기능을 즐길 수 있어 개발 및 콘텐츠 편집 경험이 향상됩니다.

3. 원활한 서버 렌더링
   애플리케이션의 성능과 확장성을 향상시키기 위해 Next.js의 전체 서버 렌더링 기능을 활용하세요

---

사용방법

1단계: SDK 초기화

SDK를 초기화하려면 새 파일 lib/storyblok.js를 생성하는 것부터 시작하세요. 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를 더욱 원활하게 채택할 수 있도록 업데이트된 공식 문서를 준비하고 있습니다. 그동안 모든 필수 단계는 README에 포함되어 있습니다.

여러분의 피드백과 기여는 @storyblok/react를 개선하는 데 매우 중요합니다! 제안이나 문제가 있는 경우 언제든지 문제를 공개하거나 프로젝트에 직접 참여해 주세요.

위 내용은 React 서버 구성 요소를 완벽하게 지원하는 React SDK 발표의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!