2023/7/5 RSCとかの話

react RFC

参考

一言で言うと、React Server Componentsは多段階計算です。

revalidateの挙動についてはこれ

仮想DOMって要するにJSのオブジェクト

なので、もしも仮想DOMのオブジェクトがシリアライズ可能であるなら、サーバ、クライアント間をまたいで転送できる

code:TS

async function UserData() {

const data = await prisma.user.getInfo()

return <div>user: {data.username}</div>

}

それを実際に実現したもの

なので、仮想DOMをシリアライズしようとしたときに自然と想起される問題点を抑えておけばRSCの理解ができる

たとえばコールバック渡すのは無理だろとか

ここらへんをPOSTDの記事は解説してくれてる

モジュール参照とかを理解すれば、クライアントコンポーネントの子にサーバコンポーネントを渡せるとかもわかる

Server Component からClient Componentの利用

code:TS

import SomeClientComponent from './SomeClientComponent'

//これはserver component

export default async function UserData() {

const data = await prisma.user.getInfo()

// const data = fetch({... revalidate: 60}) // fetchもここでよべる

return <div>user: {data.username}

<SomeClinetComponent />

</div>

}

< Hoge /> これは関数実行

createElement

jsx-runtime

モジュール参照オブジェクトにすればいい

”use client"

サーバ - クライアント境界に必要

import "client-only"

pnpm?

npm i 入れなくてもserver-onlyは動いたはず

メモ

page, route単位での設定

別ブラウザにrevalidateは走るのか？

→無理

revalidateはserver actionのレスポンスの中にReact flightのプロトコルで帰ってくるから

でもrevalidate叩けばOK