Nextjs 13系を触ってみる
あっき〜しばらくReactのセカイから離れてしまっていたが、業務でReactおよびNextjsを触ることになるので、改めて再度インプットしていく。
ちなみに最後Reactを触っていたのは、16系が登場したばかりの頃でドキュメントも何も整備されていない中で14系で構築されていたアプリをリベースしていっていたのが最後。
あっき〜せっかくなので、めっさ早いと噂のBunを使ってみた。
公式で謳ってるだけあって、やはり早い。
以下npmとbunでそれぞれ同じ内容のpackage.jsonのインストールをしてみた結果。
npmもめっちゃくっちゃ早くなったっていう話は聞いてたけど、それでもBunめっちゃ早い。
計測が画像の右上に出てるけど、Bunは1秒かからない。
Bun
npm
あっき〜主題のNextjs 13系について
（React Hooksについてはざっくり浅瀬レベルで学習済み。但し、細かなレベルの副作用等については現在インプット中。。。）
Server ComponentsとClient Componentsの違いについてより前にこちらのページを読了する。
歴史的に、開発者はサーバーとクライアント用にコードを書くときに、異なる言語（JavaScript、PHPなど）とフレームワークを使わなければなりませんでした。Reactでは、開発者は同じ言語（JavaScript）と同じフレームワーク（Next.jsやお好みのフレームワークなど）を使うことができます。この柔軟性により、コンテキストを切り替えることなく、両方の環境に対してシームレスにコードを書くことができます。
しかし、それぞれの環境には独自の機能と制約があります。そのため、サーバー用とクライアント用に書くコードは必ずしも同じではありません。ある種の操作（データ・フェッチやユーザー・ステートの管理など）には、どちらか一方の環境に適しているものがあります。
これらの違いを理解することが、ReactとNext.jsを効果的に使うための鍵です。サーバーコンポーネントとクライアントコンポーネントのページで、その違いと使用例について詳しく説明します。
いや、まさしくその通りで。
自分が初めてwebのセカイに飛び込んだ時はHTMLとSCSSの環境をgulpで作って書いたりしていたし、バックエンドがRailsで構築されていたら、hamlとかを使っていた。
昨今でこそ、フロントエンド界隈でSPA/SSR/SSGなどなどが出てきて、バックエンドとフロントエンドが切り離されて実装されることが増えたが、それぞれ異なる言語で書いていたりそれぞれの制約があるのは変わらない。