diff --git a/raw-data/NEXT.JS.md b/raw-data/NEXT.JS.md
index de750dd..dee6cf2 100644
--- a/raw-data/NEXT.JS.md
+++ b/raw-data/NEXT.JS.md
@@ -12,6 +12,12 @@ Next.js
静的サイトの Next.js を SPA でルーティングさせる
+### App Router
+
+- fetch
+ - 標準の fetch にパッチを当てて拡張している
+ - 取得したデータを自動でキャッシュし、任意のタイミングで Revalidate(データ再取得・キャッシュ更新)が可能
+
### Server Actions
Server Actions はサーバーコンポーネントとクライアントコンポーネントのどちらでも機能する
diff --git a/raw-data/PANDA.md b/raw-data/PANDA.md
index 98774fa..f43cf04 100644
--- a/raw-data/PANDA.md
+++ b/raw-data/PANDA.md
@@ -27,4 +27,4 @@ Chakra UI と開発元が同じ
- Emotion や styled-components など
- ゼロランタイム CSS in JS
- ランタイム時のパフォーマンスが良い
- - Panda や Stitches など
+ - Panda や Stitches や Kuma UI など
diff --git a/raw-data/REACT SERVER COMPONENTS.md b/raw-data/REACT SERVER COMPONENTS.md
index 6631d86..da1cf25 100644
--- a/raw-data/REACT SERVER COMPONENTS.md
+++ b/raw-data/REACT SERVER COMPONENTS.md
@@ -13,6 +13,9 @@ React Server Components はサーバーサイドのみで実行される
一部のコンポーネントはサーバ側でレンダリングし、それ以外はクライアント側でレンダリングするみたいな世界観
ただし、クライアントコンポーネントはサーバサイドコンポーネントを import できない
+クライアントコンポーネントの children や他のクライアントコンポーネントへの props にサーバサイドコンポーネントを渡すことは可能
+この場合、渡されるサーバサイドコンポーネントは事前にサーバーサイドでレンダリングされた HTML を渡すイメージ
+
たとえば、以下の例だと、CounterServer はサーバーでレンダリングされ、HTML を返すだけの関数となる
(HTML 化により、クライアントでは不要なコンポーネント(以下の例だと`Btn`)も削除されるため、バンドルサイズが減る)
(また、Btn コンポーネントの処理も無くなるのでパフォーマンスも良い)
@@ -44,6 +47,10 @@ export default function CounterClient() {
}
```
+RSC は 2023/07 時点でまだ安定版ではなく、React Canary として機能提供されている
+破壊的変更も多いため、React 単体で RSC を使うことは想定されず、基本的には Next.js などのフレームワークを経由して使うことになる
+ただ、将来的に安定版になっても自前でサーバー処理を実装する必要があるため、Next.js などを使ったほうが楽だろう
+
### RSC のメリット
- サーバーサイドでレンダリングするので、クライアントのバンドルサイズは軽くなる
@@ -51,6 +58,11 @@ export default function CounterClient() {
- DB、GraphQL エンドポイント、ファイルシステムなどのサーバーサイドのリソースに直接アクセスできる
- サーバー側で API の実装が不要になるケースもある
- コンポーネントのレンダリングも速くなる
+- コンポーネントで async/await が利用可能
+
+### RSC でできないこと
+
+- useState や useEffect などのフックは使えない
### SSR との違い
diff --git a/raw-data/REACT.md b/raw-data/REACT.md
index 814d764..3de7fbf 100644
--- a/raw-data/REACT.md
+++ b/raw-data/REACT.md
@@ -19,7 +19,7 @@ React
React のチャートライブラリ選定
-Atomic Design と Bulletproof React を考察
+フロントエンドのディレクトリ構成を考察
### Component と Element
diff --git a/raw-data/SERVER SIDE RENDERING.md b/raw-data/SERVER SIDE RENDERING.md
index 2104f1d..8791301 100644
--- a/raw-data/SERVER SIDE RENDERING.md
+++ b/raw-data/SERVER SIDE RENDERING.md
@@ -25,9 +25,19 @@ Nuxt.js 自体も内部的には、vue-server-renderer を使っているらし
### SSR する理由
- OGP(Open Graph Protocol)の考慮
- SNS 上で OGP を設定しておくと、予め設定された画像・タイトル・説明文が表示され、ユーザへの訴求力アップに繋がる
+ SNS 上で OGP を設定しておくと、事前に設定された画像・タイトル・説明文が表示され、ユーザへの訴求力アップに繋がる
meta タグに設定するため、最低限 meta タグのみを SSR するのもあり
将来的に SEO の検索順位の決定は、Googlebot が行うことになるだろう
Google の Crawler は JavaScript も解釈すると言われている
つまり SPA で空の Body となっていても問題ないということ
+
+### Streaming SSR
+
+SSR のレンダリング結果を Streaming にブラウザに返し、表示する
+従来はすべてレンダリングされた後に結果を渡していた
+
+- React
+ - React 18 で追加された
+ - Suspense の機能が前提となる
+ - サスペンドされたら、そこまでのレンダリング結果を出力し、サスペンドが解除されたら Streaming SSR を再開する