💼

2024 React トレンド(翻訳)

2024/03/14に公開

Gatsby.js

ASTRO (WITH REACT)

昨年、Gatsbyの次にAstroが登場しました。主に静的ウェブサイトを通じて有名になりましたが、
人気が高まり、ウェブアプリケーションやAPIエンドポイントにも活用し始めました。

Astroで作ったウェブサイトは、JavaScriptなしで開始し、すべての高コストレンダリングをサーバーに移すため、基本的に性能が優れています。静的サイト（SSG）がデフォルトですが、サーバサイドレンダリング（SSR）を選択することもできます。

ASTRO vs NEXTjs vs GATSBY比較

ASTROは静的コンテンツが多く、初期ローディング性能を最適化したいサイトに適しています。
NEXTjsはSSRが必要だったり、リアルタイムデータを扱い、バックエンド機能が強力な複雑なウェブアプリケーションに適しています。
GATSBYは静的なコンテンツが多く、頻繁に更新されないブログ、ランディングページ、会社のウェブサイトなどのプロジェクトに適しています。

認証 (IN REACT)

Firebase Authentication、Auth0、Passport.js、NextAuthがデフォルトで使用されてきましたが、ついに軽くてUI中心の認証代案で新しいものが出ました

SupabaseはGoogleのFirebaseに対するオープンソースの代案です。認証だけでなく、PostgreSQLデータベース、リアルタイム購読、ストレージ、サーバーレス機能などが一緒に提供されます。
Supabaseインスタンスは、独自のホスティングまたはホスティング（まだ有料）サービスを使用することもできます。しかし、多くの開発者が認証用としてのみ使用し、残りの領域は他のサービス(例:サーバレスDBであるPlanetScale)を選択します。
Clerkは認証のみに焦点を当てたこの分野のもう一つのライバルです。 Reactに挿入しやすいコンポーネントにより、ユーザーを簡単に登録し、アプリケーションにログインできます。その他にも、1つまたは複数の組織内でユーザーと役割を管理することもできます。
最後にLuciaはAstroとともに人気を博しましたが、他のフレームワークでも使用できます。
特に、オープンソースの特性、コミュニティの取り組み、アプリケーションとデータベースの間で提供する明確な抽象化階層が気に入っています。
Luciaを使用すると、独自のデータベースでユーザーを管理できるという点で、他の認証サービスと比較すると大きなメリットです。

ReactサーバコンポーネントとNEXT.JS

Reactサーバコンポーネント（RSC）は、Reactによって仕様としてリリースされ、昨年Next13.4を通じてコミュニティで実装および初採用されました。

RSCがもたらす多くの利点がありますが、ここですべての利点を強調することは難しいので、一つだけ話します。
RSCを使用すると、コンポーネントがブラウザに送信（またはストリーミング）される前に、サーバーコンポーネントからデータのインポートを実行できます。メリットは、ネットワークを介してクライアントからサーバーにつながる恐ろしいウォーターフォールのリクエストは、今や過去のことになっていることです。
これで、ウォーターフォールがサーバーではるかに高速に発生するため、パフォーマンスが向上します。

VERCEL

Vercelは、リアクトサーバコンポーネントでリアクトの限界を広げただけでなく、Next.jsを通じてリアクトアプリケーションが効率的に配布され、ユーザーに渡される方法も拡張しています。

アプリケーションがユーザのために遠く離れた場所（例えば、米国東部）でホスティングされず、アプリケーションのユーザとできるだけ近い場所でサーバレス機能でホスティングされるため、Edgeでアプリケーションを提供する際のパフォーマンスへの影響は非常に大きいです。

Reactコンパイラ（REACT FORGETとして知られる）

リアクト(React)開発者の間では、useCallback、useMemo、memoのようなReactの最適化ツールに対する不満がよくあります。
これらのツールは、コンポーネントの不要なリレンダリングを防止し、パフォーマンスを改善するために使用されます。
たとえば、useCallbackは関数をメモ化し、コンポーネントがリレンダリングされるたびに同じ関数インスタンスを再利用できるようにします。 useMemoは計算された値をメモ化するのに使われ、memoはコンポーネント自体をメモ化し、同じpropsでは再レンダリングを防止します。

他のフレームワークは、このような最適化ツールがなくても性能が優れていると主張していますが、リアクトは開発者が明示的にこの最適化を適用しなければならない方式を維持してきました。
しかし、リアクトチームはこのすべての最適化過程を自動化できる「React Compiler」という新しいコンパイラを開発中です。このコンパイラが導入されると、開発者はもはやuseCallback、useMemo、memoといったメモ化ツールを手動で使用する必要がなくなります。
リアクトコンパイラがアプリケーションのメモ化を自動的に処理し、次のレンダリング時にすべてを再計算する必要がなくなることが期待されます。

ReactのためのヘッドレスUIライブラリ

リアクト開発者たちは毎年好むUIライブラリを変えるのが好きです。
数年前にはMaterial UIを使っていたが、Semantic UI/Ant Designに、その次にはChakra UIに、そしてMantine UIに移り、昨年はshadcn/UIに定着(?)しました。
以前のすべての選択は、主にデザインとユーザビリティに対する欲求から始まったものでしたが、shadcn/UIではいくつかが変わりました。

shadcn/UIはコンポーネントをテーマ化してユーザ定義デザインを具現できる最初の人気UIライブラリで、Tailwindを(CSS変数の次に)完全に受け入れた最初のライブラリです。
Tailwindの足跡に沿ってshadcn/UIもノードパッケージとしてインストールするのではなく、プロジェクトにコピーして貼り付けるだけで、コンポーネントを自由に調整することができます。

また、パフォーマンスとユーザーエクスペリエンスを向上させるために、サーバからコンポーネントをレンダリングする傾向により、スタイルコンポーネントやエモーションなどのCSS-in-JSソリューションは、JavaScriptを実行してCSSを出力することで、クライアント/ブラウザにすべてのパフォーマンスの負担を転嫁するため、使用されなくなりました。
StyleXのような新しいCSS-in-JSソリューションは、ユーティリティ優先CSSにコンパイルしてこの問題を緩和します。

番外編

Insights and Trends in Vue.js from Evan You 2024