RSCにおける、container presentational pattern

Motivation

React Server Components RSCにおいて、Test テスト Testingを行いたい際に、解決策としてcontainer presentational patternを行う場合がある。

使う側が普通のReact Server Components RSCとして単純に扱いたいというのもある

該当component 側でClient componentsにあるべき箇所を包んで、Client componentsを最小限にして欲しい

hr.icon

一旦の考え

code:ex.tree

一旦の方針:あるひとまとまりのcomponent Sidebarの場合

- ui/Sidebar

- index.tsx

- ただのエントリーポイント

- Sidebar.story

- <SidebarPresentation>を用いて、storyを作る。

- SidebarContainer.tsx

- fetchする<SidebarArticleList>はここで渡す。

- SidebarPresentation.tsx

- fetchしない<SidebarMenu>はここで渡しておく。

- SidebarNewArcleSection.tsx

- 中でfetchするSidebarに必要なcomponent

- SidebarMenu.tsx

- 中でfetchしないSidebarに必要なcomponent

- 他のcomponentやページで利用する場合は、<SidebarContainer>をimportして利用する。

- ※ 上の例だと、SidebarNewArcleSectionを更にcontainer/presentationに分けることも考えたが、Presentation部分に分けてTestする必要がなかったので、そのままにしている。

まとめ

Storybookで利用する場合

非同期componentが含まれるContainerのcomponentは利用しないで、PresentationのcomponentでStoryを作る。

Storybook以外の、Application側で使う場合

非同期componentを利用出来るので、Containerのcomponentを利用する。

hr.icon

ref