React Server Components
RFC
RFC: React Server Components by josephsavona · Pull Request #188 · reactjs/rfcs · GitHub
rfcs/text/0227-server-module-conventions.md at main · reactjs/rfcs · GitHub
Reactのblog post
React Flight
SSRとServer componentsの違い
RSCを使った時のrenderingの流れ
3種類のcomponents
Server Components
Client Components
Shared Components
demo
Reactのdemo
netlifyのdemo
Next.jsのdemo
https://github.com/vercel/next-rsc-demo
使い分け
基本的にServer Componentsで書くようにする
無理ならClient Componentsで書く
Client Components内でも使いたいServer Componentsは、Shared Componentsにする
参考
React Server Components 総まとめ
めちゃくちゃわかりやすいまとめ
#WIP
hydration周りのことを先に知っていると効率的に概念を理解できると思うmrsekut.icon
https://dangpt.vercel.app/
Dan Abramov GPTs
https://github.com/reactwg/react-18/discussions/37
https://www.joshwcomeau.com/react/server-components/
https://vercel.com/blog/how-react-18-improves-application-performance
https://zenn.dev/uhyo/articles/react-server-components-multi-stage
https://zenn.dev/chot/articles/a042024e12fca1
https://github.com/acdlite/react-fiber-architecture
https://twitter.com/yutaroadachi/status/1693267138738593980
https://speakerdeck.com/izumin5210/findy-2023-10-04
https://twitter.com/naruaway/status/1705909545800007771?s=12&utm_source=pocket_saves
https://zenn.dev/uhyo/books/rsc-without-nextjs
https://azukiazusa.dev/blog/server-components-testing/
test
RSCのtest
https://quramy.medium.com/react-server-component-のテストと-container-presentation-separation-7da455d66576
test
内部とか再実装とか
https://github.com/reactwg/server-components/discussions/5
https://github.com/bholmesdev/simple-rsc
https://speakerdeck.com/narirou/webpahuomansugao-su-hua-tokorekaranoakitekutiya?slide=41
https://qiita.com/honey32/items/bc24d8c0ea3d096ff956
https://github.com/testing-library/react-testing-library/issues/1209
Testing Library
混在できる
https://gyazo.com/2850e976ec3c953e761c3e72b5ecc700 https://beta.nextjs.org/docs/rendering/fundamentals
https://www.youtube.com/watch?v=TQQPAU21ZUw
https://youtu.be/4Jfv4R-yeYY?t=986
react-io
Server & Clientから透過的に使えるライブラリ
なにするの?
https://www.patterns.dev/posts/react-server-components/
https://blog.plasmic.app/posts/how-react-server-components-work/
UIT INSIDEの76でしゃべってる
https://zenn.dev/erukiti/articles/react-server-components
https://qiita.com/naruto/items/c17c79ec5c2a0c7c4686
https://zenn.dev/uhyo/scraps/5d7cf67b1ef89f#comment-12cc7542515b5f
https://nextjs.org/blog/next-12#react-server-components
★この複数概念をこの軸で整理しておきたい
cache機構複数ある
Reactのcache()
Next.jsのCache
fetchの仕方も複数ある
App Router#63bc15ef19827000003d8ec3
Next.jsのfetch()
❌Reactのfetch()
Server Actions
Next.jsのAPI Routes
/mrsekut-p/Next.jsのAPI Routesはrevalidateできない
Next.jsのRoute Handlerこれか
prismaチョクで呼ぶやつ
hard navigation, soft navigation
revalidate複数ある
export const revalidate = 20
Next.jsのfetch()の引数のrevalidate
revalidatePath, revalidateTag
pathごとにrevalidate?
nextで入れ子にしてるのが前提になる?
重い処理だったら?
終わった後にrevalidate
revalidateTag
もうちょい狭い範囲
On-Demand ISR
router.refresh()
サーバーに新しいリクエストを行い、データリクエストを再取得し、Server Componentを再レンダリングする。
クライアントは、影響を受けていないクライアント側のReact(useStateなど)やブラウザの状態(スクロール位置など)を失うことなく、更新されたReact Server Componentのペイロードをマージすることができます。
https://zenn.dev/chot/articles/f13ac46a1d3f8e#router.refresh()とはなに奴%EF%BC%9F%EF%BC%9F%EF%BC%9F
気持ちまとめ
trpcもreact-queryも不要
APIエンドポイントを作る代わりに
server componentだったいr,
server actions
をつかう感じになる
presentational的な
モノレポかどうかでのserver componentに対する向き合い方が変わる
モノレポの場合
モノレポでない場合
メリットは有る
メリデメ
bundle sizeは小さくなる
諸々の概念はRSCが軸にある
疑問
直接書いた時にキャッシュされる?
code:TS
async function UserData() {
const data = await prisma.user.getInfo()
return <div>user: {data.username}</div>
}
毎回fetchされる?
/mrsekut-p/Next.jsのfetch()とは違う概念ぽいし
意図せず危険なコードを書ける?
キャッシュ周り
user id単位でキャッシュできないと危なそう
秘匿情報周り
/miyamonz/RSC、server action、on-demand revalidationでPHPのような世界をNext.jsにもたらす
/miyamonz/server actionの通信のやり取りの中身を見てみる
/miyamonz/2023/7/5 RSCとかの話
'use client'
bundle時にclientとserverの境界を見つけるために使う
「clientだからつける」ってわけではない
引数に関数を持てなくなる
代わりにimport client-onlyとか使えばいい
npmの仕組みを使ってる
じょうけんつきexport的な
error.jsが返る
'use server'