最近のReact界隈
PONTA最近のReact界隈が面白い。みんな過去を振り返っている。
PONTAReact Server ComponentsがPHPの再来とか言われてるらしい。
PONTAReactはブラウザで動くものだったはずなのに、いつの間にかサーバーで動かすものになったらしい。
20年前に、HTMLはブラウザの描画するものだったはずなのに、PHPがそのタグの一部をサーバー側で動的に変えるって世界観が、Reactで起こっている。おもろいなぁ。
PONTAClientのReactでfetchするとAPIサーバーはAPIのtokenとか考えなきゃいけないけど、Serverでfetchするならその辺がゆるくできるのかな？
React Server Componentが叩くAPIサーバーと、React Client Componentが叩くAPIサーバーでは作り方が違う気がする。
PONTANext.js メモ
App Router:
Next.js 13.4で正式リリースされた新機能。これがリリースされてReact界隈が盛り上がってるんだと思う。全てのComponentがデフォルトでReact Server Componentsになり、フロントエンドとは何かという問いの投げかけられている？
Route Handler:
後述のAPI Routesに置き換わる機能。Client ComponentsでAPIを叩きたい時に入口とする。
API Routes:
Next.jsでAPIを作成する機能。ドキュメントには、App Router使ってるならRoute HandlerやReact Server Componentsを代わりに使えと書いてある。これまでは以下のようなユースケースで使われてきた。
たとえばAzure OpenAIでchatGPTのクローン作った時に、API Keyはクライアントに渡したくないとする。こういう時に、API RoutesでOpenAIのAPIを叩く簡素なAPI作れば、API KeyがNext.jsをホストしてるサービス上で保存されるので、クライアントにAPI Keyが渡らなくなる。
Middleware:
リクエストが来た時や、レスポンスを返す際に何らかの処理をする機能。ユースケースはCookieの認証とか。
PONTA最初の疑問を言語化すると、React Server Componentsで叩くAPIとReact Client Componentsで叩くAPIに違いはあるか？となる。以下が答え。
React Client Componentsからは、基本的にRoute Handerを叩くので、Middlewareを使ってエンドポイントを守る。
React Server ComponentsからRoute Handlerを叩くことは基本的にはしないんだと思う。直でAPI Key指定してどっかから情報とってくる。
Route HandlerからもReact Server Componentsからも叩きたい共通のAPIがあるのだとしたら、それはutilsフォルダとかを作って便利関数として定義するんだと思う。多分。
PONTAApp Routerで簡素なブログを作る記事。参考になった。
PONTARSCによってGraphQLの価値が変わる？
PONTAWeb アプリケーションを実装する際の責任がどんどんJavaScriptに寄ってるよねって考察してる。これからはReact Server ComponentsがRailsのように成長するかもとか書いてある。
PONTAreact server componentsのデモを動かしている。reactからpostgresを直接叩くという世界観。やばいなぁ。
PONTAReactがPostgresを直接叩く世界観って確かにやばい感じする。React界隈が叫んでる理由がようやくわかった。Reactがサーバーサイドで動くことで何ができるようになるのかなぁ。
この世界観でGraphQLの立ち位置って。。。これからどうなってくんだろ。全くわからん。
PONTAこの辺がよくわからん。一個のプロジェクト中のServer Componentsたちを色んなruntimeで動かせるようにしてるかなぁ。だとしたらこの革新はフロントエンドの人たちに留まらず、AWSとかk8s管理してる人にも影響してくかもね。