React 서버 구성 요소를 완벽하게 지원하는 React SDK 발표-JS 튜토리얼-php.cn

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

Barbara Streisand

풀어 주다： 2024-11-24 03:59:10

원래의

994명이 탐색했습니다.

Announcing React SDK vith full support for React Server Components

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의 새로운 기능은 무엇인가요?

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

통합 RSC 지원
이전에는 Next.js의 React 서버 구성 요소에 호환성을 위해 두 가지 다른 구현이 필요했습니다. 버전 4.0.0에서는 이를 간소화하고 모든 것을 하나의 일관된 접근 방식으로 통합했습니다.
비주얼 편집기를 사용한 실시간 미리보기
앱 라우터를 사용하는 개발자는 이제 Storyblok 비주얼 편집기에서 직접 실시간 미리보기 기능을 즐길 수 있어 개발 및 콘텐츠 편집 경험이 향상됩니다.
원활한 서버 렌더링
애플리케이션의 성능과 확장성을 향상시키기 위해 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>
      <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,
  },
});

로그인 후 복사

이렇게 하면 구성 요소를 클라이언트 구성 요소로 선언하더라도 서버 측 렌더링과의 호환성이 보장됩니다.