next/image をソースコードから理解したい。(サーバーサイド編)

https://zenn.dev/hotsukai/scraps/ec8b5fcbf00b58
これの続き

圧縮したりキャッシュしたりするサーバー。
エントリーポイントはこれ
https://github.com/vercel/next.js/blob/3e3c01272628d1315ecbc0c843f785436b18e943/packages/next/src/server/next-server.ts#L772

handleNextImageRequestのざっくり流れは

1. パラメータのバリデーション(コード)
2. href,width,quality,mimeTypeからキャッシュキー生成(コード)
3. キャッシュからレスポンス or キャッシュの生成とレスポンス
   ここ、理解できなかったので深ぼる

imageOptimizerCache.getを理解したい

キャッシュからレスポンス or キャッシュの生成とレスポンス (コード)

前述のコレのこと。

---

呼び出し部。
第1引数がキー
第2引数がキャッシュの値を作る関数
第3引数はオプション?。渡しているincrementalCache: imageOptimizerCache はImageOptimizerCacheクラスのインスタンス。
https://github.com/vercel/next.js/blob/3e3c01272628d1315ecbc0c843f785436b18e943/packages/next/src/server/next-server.ts#L830-L853

this.imageResponseCacheの実態はResponseCacheクラス
https://github.com/vercel/next.js/blob/375d85d95e96df7be09f37eb620f977ae1cfd850/packages/next/src/server/response-cache/index.ts#L17

ResponseCache#getを理解する。

ResponseCache#getは引数にキーとレスポンス生成関数 とオプションを受け取る。
https://github.com/vercel/next.js/blob/375d85d95e96df7be09f37eb620f977ae1cfd850/packages/next/src/server/response-cache/index.ts#L48-L57

incrementalCacheにHitするものがあったとき。

Hitがありstaleならそれを返している(っぽい)
https://github.com/vercel/next.js/blob/375d85d95e96df7be09f37eb620f977ae1cfd850/packages/next/src/server/response-cache/index.ts#L91-L113

incrementalCacheにHitするものがないとき

レスポンス生成
https://github.com/vercel/next.js/blob/375d85d95e96df7be09f37eb620f977ae1cfd850/packages/next/src/server/response-cache/index.ts#L115-L119

incrementalCacheにset
https://github.com/vercel/next.js/blob/375d85d95e96df7be09f37eb620f977ae1cfd850/packages/next/src/server/response-cache/index.ts#L154-L156

imageOptimizerを理解する

https://github.com/vercel/next.js/blob/3e3c01272628d1315ecbc0c843f785436b18e943/packages/next/src/server/next-server.ts#L551-L598

① 画像をFetch(582~589行目)
② 圧縮
リクエストヘッダーから使えるminetypeを取得
https://github.com/vercel/next.js/blob/feb27ad6217c32dcfbea6ea54926e26b58adf6e2/packages/next/src/server/image-optimizer.ts#L259
どのcontenttypeにするか決定
https://github.com/vercel/next.js/blob/feb27ad6217c32dcfbea6ea54926e26b58adf6e2/packages/next/src/server/image-optimizer.ts#L646-L659

あとはsquooshとsharpで変換するだけ

ImageOptimizerCacheを理解する

前述のimageOptimizerCache.getの第3引数incrementalCacheとして渡されていたもの。

get

https://github.com/vercel/next.js/blob/feb27ad6217c32dcfbea6ea54926e26b58adf6e2/packages/next/src/server/image-optimizer.ts#L302-L332
ローカルディレクトリからファイルを読んでる。

set

https://github.com/vercel/next.js/blob/feb27ad6217c32dcfbea6ea54926e26b58adf6e2/packages/next/src/server/image-optimizer.ts#L332-L365
https://github.com/vercel/next.js/blob/feb27ad6217c32dcfbea6ea54926e26b58adf6e2/packages/next/src/server/image-optimizer.ts#L98-L112

ローカルディレクトリにおいてるけど、サーバーのストレージの圧迫は大丈夫なのかな