記事:2024/6/3-
ルールなど
とりあえず全部開く
2,3分で読めそうなやつはすぐ読んじゃう
その他はgptに要約してもらってからメモ取りながら読む
土曜日中に読めなかったものは諦めるか、読みたければ繰り越す
今週分
https://2ality.com/2024/05/proposal-promise-with-resolvers.html
https://medium.com/@Luna-Rojas/nodejs-21-is-here-features-that-will-blow-your-mind-fd996c8f0365
https://codingbeautydev.com/blog/best-es9-javascript-features/
https://zenn.dev/team_soda/articles/99b4449f962fb4
https://qiita.com/Sicut_study/items/79838a4b8ec36bc3a961
地味に大変だったからうれしい。
クラシックの場合のみ領域確保。
stable both-edgesで両端に確保される。
app router
- static rendering: 従来の SSG や ISR 相当で、build 時や revalidate 実行後にレンダリング
- revalidate なし: SSG 相当
- revalidate あり: ISR 相当
- dynamic rendering: 従来の SSR 相当で、リクエストごとにレンダリング
これらが1つのHTTPレスポンスで完結し、レスポンスのHTMLに<PostFeed>や<Weather>のHTMLが含まれるのでSEO観点もフォローしていることが大きな特徴です。
これちょっとよくわからん…あとから送られるのに1つってどういうこと…?
PPRはStreaming SSRをさらに進化させた技術で、ページをstatic renderingとしつつ、部分的にdynamic renderingにする
やっぱAstroアイランドちゃうん…?
って思ったけどちがうわ…Astroは結局SSG/SSRをページ単位で選択できるだけで、+でアイランドはクライアントでも動作できるよって話だから、PPRのベースはSSGして部分的にSSRだよ、とは別ものか。
SSG+Client fetch/Streaming SSR
これがAstroアイランドか
ただんけいさん…?
、PPR以降はより細粒度な「どこまでをstaticに、どこからをdynamicにするか」という議論へとシフト
Storybook provides built-in testing capabilities through the play function and its own Playwright-based test-runner. This enables you to verify how a component reacts to user interactions such as clicks, typing, and mouse inputs. This is our recommended stack for testing components.
However, there are plenty of reasons why you might consider Playwright CT instead. It is fast, has an incredible VSCode integration, and other cool features like a test generator and a trace viewer.
--isolatedDeclarations オプションつけようかなあ…型は明示した方がレビュしやすい気がするし
- Cache-Controlヘッダーのno-storeを外す
- Ajaxでデータを取得した時にHistory APIのreplaceStateを実行する
- なんでこれでいけるのかBFキャッシュの仕様がわからん
• React v19 betaの紹介: React 18との比較で多くのユーザーフレンドリーなAPIが追加されたが、基本的な原則は大きく変わっていない。
• JSXとcreateElement: JSXはJavaScriptでDOMを管理するために使われ、ブラウザでは理解されないため、JSXはJavaScriptに変換される。React.createElementがコアとなる。
• レンダリングの簡素版: 自作の簡素なReactの実装では、JSXをリアルDOMにレンダリングする方法を解説。
• Fiberアーキテクチャと並行モード: 高優先度なタスク(ユーザー入力やアニメーション)をタイムリーに処理するための設計。小さな単位に分けてメインスレッドを開放。
• requestIdleCallback: ブラウザがアイドル状態のときに実行するコールバック。すべてのブラウザでサポートされているわけではないが、非同期の割り込み処理をサポートするためのベーシックな実装方法を解説。
• アルゴリズム: Fiberノードのデータ構造と、それを使ったレンダリングと非同期更新の具体的な実装手法について説明。
• 状態更新のトリガー: Reactで一般的なトリガーであるuseStateの基本的な更新メカニズムの実装方法を紹介。Fiberエンジンを動かすトリガーとして機能。
• 結論: コメントと型を除くと400行未満のコードで、非同期および割り込み可能な更新をサポートする最小限のReactモデルを実装する方法。