fix: raw-data

kurosame · Jul 17, 2023 · 90c13bf · 90c13bf
1 parent 7a4c524
commit 90c13bf
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 3 deletions.
diff --git a/raw-data/NEXT.JS.md b/raw-data/NEXT.JS.md
@@ -12,6 +12,12 @@ Next.js
 
 <a href="https://kurosame-th.hatenadiary.com/entry/2021/08/04/150426" target="_blank">静的サイトの Next.js を SPA でルーティングさせる</a>
 
+### App Router
+
+- fetch
+  - 標準の fetch にパッチを当てて拡張している
+  - 取得したデータを自動でキャッシュし、任意のタイミングで Revalidate（データ再取得・キャッシュ更新）が可能
+
 ### Server Actions
 
 Server Actions はサーバーコンポーネントとクライアントコンポーネントのどちらでも機能する

diff --git 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
@@ -13,6 +13,9 @@ React Server Components はサーバーサイドのみで実行される
 一部のコンポーネントはサーバ側でレンダリングし、それ以外はクライアント側でレンダリングするみたいな世界観  
 ただし、クライアントコンポーネントはサーバサイドコンポーネントを import できない
 
+クライアントコンポーネントの children や他のクライアントコンポーネントへの props にサーバサイドコンポーネントを渡すことは可能  
+この場合、渡されるサーバサイドコンポーネントは事前にサーバーサイドでレンダリングされた HTML を渡すイメージ
+
 たとえば、以下の例だと、CounterServer はサーバーでレンダリングされ、HTML を返すだけの関数となる  
 （HTML 化により、クライアントでは不要なコンポーネント（以下の例だと`Btn`）も削除されるため、バンドルサイズが減る）  
 （また、Btn コンポーネントの処理も無くなるのでパフォーマンスも良い）  
@@ -44,13 +47,22 @@ export default function CounterClient() {
 }
 ```
 
+RSC は 2023/07 時点でまだ安定版ではなく、React Canary として機能提供されている  
+破壊的変更も多いため、React 単体で RSC を使うことは想定されず、基本的には Next.js などのフレームワークを経由して使うことになる  
+ただ、将来的に安定版になっても自前でサーバー処理を実装する必要があるため、Next.js などを使ったほうが楽だろう
+
 ### RSC のメリット
 
 - サーバーサイドでレンダリングするので、クライアントのバンドルサイズは軽くなる
   - サードパーティパッケージをバンドルファイルに含める必要がないから
 - DB、GraphQL エンドポイント、ファイルシステムなどのサーバーサイドのリソースに直接アクセスできる
   - サーバー側で API の実装が不要になるケースもある
   - コンポーネントのレンダリングも速くなる
+- コンポーネントで async/await が利用可能
+
+### RSC でできないこと
+
+- useState や useEffect などのフックは使えない
 
 ### SSR との違い
 

diff --git a/raw-data/REACT.md b/raw-data/REACT.md
@@ -19,7 +19,7 @@ React
 
 <a href="https://zenn.dev/kurosame/articles/78b7b154b90ac7" target="_blank">React のチャートライブラリ選定</a>
 
-<a href="https://zenn.dev/kurosame/scraps/333ce89c557fb3" target="_blank">Atomic Design と Bulletproof React を考察</a>
+<a href="https://zenn.dev/kurosame/scraps/333ce89c557fb3" target="_blank">フロントエンドのディレクトリ構成を考察</a>
 
 ### Component と Element
 

diff --git 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 を再開する