ジャムスタックチョットデキル ナカノにきたときのメモ
Apollo ClientでApp Routerに移行する時の話
殆どがuse clientをつけることで一旦CCにしてから以降
何をSC/CCの線引
private/publicとstatic/dynamicのマトリクス図で検討
いいねの数とかはSC
NextSSRApolloClientを使うんかな？
SCのほうがColocationしやすそう？
SCはgraphqlの責務を奪ってしまい競合なので,SCにするならgraphqlをやめたほうが良さそう.
Next.js採用のメリットを振り返る
リッチなWebアプリケーションのための7つの原則
サーバーがページをレンダリングするのは任意ではなく必須
ユーザの入力に迅速に反応しよう
データの変更に反応しよう
データの変更をサーバーとともにコントロールしよう
historyを壊すべきではない,拡張しよう
コードの変更をPushしよう
振る舞いを予測しよう
複数人での大規模サイト移植のテクニック
WordpressをJamstack化する
2ヶ月で
3カ国語
200ページほど
NuxtjsとContentfulに
CMSと連携する層と固定のコンテンツの層に分けた
CMSでプレビュー環境を構築
分担
CMS
下地コア以外
ビルド周りの調査
毎朝30のmtg
QAエンジニアにも序盤から参加
Webアクセシビリティ対応への課題と実践的な取り組み方
WAI-ARIA
role
property
state
WCAG基準をAAくらいに
aria-expanded
aria-control
aria-current
スクリーンリーダー用のテキストを利用
ViewMoreのariaLabelに何の詳細か書く
Excapeでメニューを閉じる
閉じたら前にFocusを戻すようにする
スポンサー
https://www.hexabase.com/（mongoDBを使っているらしい）
microCMS
https://kuroco.app/ja/（postgresらしい）
App Router移行の実践〜microCMSドキュメントサイトでの教訓〜
2年前
Nuxt,Nextの2強
最近
Next1強
astroがアーリーアダプター層としてきた
既存のClientComponentの責務が狭いとSCに移行しやすい
App Routerの画面プレビュー
Draft Modeがあるのでそれをしよう
多言語対応
Page Routerには標準のi18nがある
App Routerには今のところない
DynamicRouteとMiddleware(pathのリダイレクト)で対応
不要な内部的なファイルのリダイレクトはignoreに設定する必要あり
サイドバーのスクロール位置が保持されるようにした
キャッシュをSCごとに管理するので,更新時間をそれぞれ持てるのはメリット
JSのバンドルサイズの削減に成功（40KB）全体の何%やねん
ヘッドレスの逆襲
Vercel ニコラス from アルゼンチン
現役プロ雀士
ヘッドレスのメリット
フロントエンドがパワーを取り戻す
開発速度があがる
最先端の技術の採用が容易になる
コラボレーションの促進
ヘッドレスのデメリット
専門知識が必要
初期コスト
複雑な管理
リアルタイム対応の難易度
複数のSCで同じfetchがあった場合も何回も呼ばれずにいい感じにまとまる
On-demand ISR（任意再生性）
revalidateTag
「Edge」の使いどころ（仮）
Compute on Vercel
Serverless functionはAWSのLambda
edge functionは独自
この2つの話
Edge function
Serverless functionと比べて軽量で高速でインスタンスを立ち上げていける
ただNodejsと同じように使用できないこともあるので注意
Max Function SizeがServerless functionと比べて小さめ
30秒以内に最初のレスポンスを返してあげる以外にTimeoutの上限はない
responseの後に非同期で処理を実行させることができる async tasks に対応
ユーザーに一番近いRegionで実行される
Edge Middleware
ブラウザとcacheの間で実行される
認証を挟んであげたりできる
基本的にはEdge functionと同じ
Use case
Serverless function
上限が大きいのでそれなりの処理を実行したい場合
Regionはそこでしか実行されない
アカウント内の合計が利用上限
一応ストリーミングにサポートされるようになった（FWに依存）
DBは一応使用できる
Edge
それ以外
パフォーマンスを重要視する場合
ストリーミングと相性がいい（ChatGPTなど）
Regionを行き来して実行できる
上限なし
waitUtilって関数に渡すと非同期で実行させることができる（async tasks）
DBとのやり取りは厳しそう
VercelのDBならできるようす
DBが起動するRegionから遠い場合はパフォーマンスが落ちるので注意
preferredRegionを指定する（実行するresionを指定する）ことで解決可能
Edge Config
key valueストアJSONとかここにConfigを保存するのが良さそう
npm i ai
頑張ってこの名前取ったw
これもedgeで動くもの
Vercelのruntime keyはedge-light
おしまい
Vercelの情報がめっちゃためになった！！！
