React Server Componentsの落とし穴まとめ
## use client と use server の境界
RSCで最もハマるポイント。クライアントコンポーネントからサーバーコンポーネントをインポートすると、自動的にクライアントバンドルに含まれる。
```tsx
// これは意図通りに動かない
"use client"
import { ServerComponent } from "./ServerComponent"
// → ServerComponentもクライアントに含まれてしまう
```
## 解決: Composition Pattern
```tsx
// layout.tsx (Server)
import { ServerComponent } from "./ServerComponent"
import { ClientWrapper } from "./ClientWrapper"
export default function Layout() {
return (
<ClientWrapper>
<ServerComponent /> {/* childrenとして渡す */}
</ClientWrapper>
)
}
```
## Data Fetchingの罠
サーバーコンポーネントでのfetchはデフォルトでキャッシュされる（Next.js 14まで）。
```tsx
// 毎回新しいデータが欲しい場合
const data = await fetch(url, { cache: "no-store" })
// Next.js 15以降はデフォルトがno-store
```
## Suspenseとの組み合わせ
```tsx
import { Suspense } from "react"
export default function Page() {
return (
<Suspense fallback={<Loading />}>
<AsyncComponent /> {/* サーバーコンポーネントのawait */}
</Suspense>
)
}
```
No comments yet. Be the first to share your thoughts.