TL;DR React は単なる UI ライブラリにとどまらず Routing, Bundling, Server Technologies までを統合した技術になろうとしている React Server Components はパフォーマンスだけでなく、「PHP, Ruby on Rails のシンプルなサーバサイド HTML 描画の世界に戻しつつ、サーバサイドとクライアントサイドの実装を同じ技術でシームレスに実装できるようにする」ことができる それにより、開発者から見た複雑さを下げられ、かつエンドユーザは良いパフォーマンス・良い体験を得られる React Server Comonents (以下、RSC)について、インターネット上の記事では主にパフォーマンスについて語られることが多い印象です。しかし、RSC のもう1つ重要な点として、RSC は我々の Web アプリケーション開発の体験
前編と後編の2部構成にしています。 前編は【今までのReactらしい状態管理術】 後編は【Next.js 13 /app (React Server Components) らしい状態管理術】 の説明です。両者を比較します。 コンポーネント単位でサーバー側のレンダリングを選択できるので、GraphQLでなくてもバックエンドへのアクセスを纏められたり、あらかじめサーバー側でデータを加工することで、バンドルサイズ0を目指せる React Server Components 。 これは周知の通り、クライアントコンポーネントとサーバーコンポーネントに分かれますが、 useState や Recoil などはサーバーコンポーネントでは利用できないので、 Next.js 13 /app (React Server Components) らしい状態管理術はこんな感じになります。 サーバーコンポーネント
先日、React Server Componentsについてまとめる機会がありました。 この記事では、React Server Componentsの概要と、デモを触る中で感じたことについてご紹介します。 React Server Componentsとは React Server Componentsは、Reactコンポーネントをサーバーサイドでレンダーする新しい技術です。 一部のコンポーネントをサーバーサイドでレンダーしてしまうことで、アプリケーションのパフォーマンスを上げることを目的とします。 図は、デモの画面のうち、サーバーでレンダーされる部分を青で、クライアントでレンダーされる部分を赤で示したものです。 ページ全体をサーバーでレンダーするのではなく、一部のコンポーネントはクライアントにレンダーさせていることがわかります。 また、React Server ComponentsはCo
皆さんこんにちは。最近React界隈を騒がせているReact Server Components (RSC) には、筆者も興味を寄せています。以下の記事でもRSCについて説明しました。 この記事の中で少し言及しているのが転送量の話です。 というのも、RSCの利点として挙げられているもののうち、パフォーマンスに関係するものとしてバンドルサイズの削減があります。つまり、Server Componentはクライアントに送られる前にただのHTMLになってしまうため、コンポーネントの定義を送る必要がない分だけJavaScriptコードの量が減るということです。 しかし、実は話はそう単純ではありません。よくよく考えると、Server ComponentがただのHTMLになると、逆にサイズが増えるということも考えられます。 // Reactコードがこれなのに <Button>click me!</But
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く