Athenaが遅すぎるので Next.js 16の Cache Componentsで倒してみた

by OPTiM

Embed

Start on current slide

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

© 2019-2026 OPTiM Corp. All rights reserved. 3 自己紹介 榎本 株式会社オプティムエンジニア 2026年4月新卒エンジニアとして入社 運用管理システムの機能改善や追加開発を行う 趣味 ◼RPG(FFXIV) ◼電子工作(最近ちょっとできてない) ◼美味しいご飯 プロダクト ◼OPTiM Support & Growth Portal ◼OPTiM Hardware My Portal

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

© 2019-2026 OPTiM Corp. All rights reserved. 7 製品の保守システムにて、AWS Athenaを用いている部分が存在 S3に保存されているデータ量が多く、レスポンスまで1分~3分ほどかかる。 ページを表示するたびにクエリを叩いていた。発生していた問題リクエストレスポンス 1~3分程度かかる検索 Athena S3 検索結果保守システム ※Athena(S3上に在るcsv等のデータを対象にSQLで検索が可能AWSのサービス)

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

© 2019-2026 OPTiM Corp. All rights reserved. 11 改善した点 ◼キャッシュが存在している間は、即レスポンスが返されるように ◼画面を行き来する際に、レスポンスを待つ時間が削減 ◼複数人操作時に同じリクエストを送る回数を削減できる 懸念点 ◼キャッシュを使うので、最新の検索結果は返却されない ⚫※強制的にキャッシュを更新するボタンを作ることで対応 改善しなかった点 ◼キャッシュが存在しないタイミングでのアクセスは引き続き時間がかかる導入効果

Slide 12

Slide 12 text

Slide 13

Slide 13 text

© 2019-2026 OPTiM Corp. All rights reserved. 13 Next.js 15以前 ◼ルート設定（page/layout）＋ fetch の挙動でキャッシュが決まる ◼どこがキャッシュ対象かが追いにくい Next.js 16 ◼use cache で関数／コンポーネント単位に「ここをキャッシュ」を明示 ◼キャッシュ境界が読みやすい／追いやすい Next.js15以前との比較

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

© 2019-2026 OPTiM Corp. All rights reserved. 16 Next.js 15：意図せずDynamicになる例 export default async function Page() { const userId = cookies().get('uid')?.value ?? 'guest' // cookie取得(Dynamic API) const reco = await getRecommended(userId) //おすすめ商品一覧 return ( <> {/* 毎回レンダリングされる(Dynamic Rendering) */}

Slide 17

Slide 17 text

Slide 18

Slide 18 text

© 2019-2026 OPTiM Corp. All rights reserved. 18 Next.js15での実装例 export default function Page() { // ここで cookies()/headers() を読まない（= ルートを動的化しない） return ( <> {/* fetch(,{next: { revalidate: 600 },})でキャッシュ設定しなくても Full Route Cacheにはなるはず */}

Slide 19

Slide 19 text

© 2019-2026 OPTiM Corp. All rights reserved. 19 Next.js15での実装例 type Post = { id: string; title: string } export async function PostsList() { const res = await fetch('https://example.com/api/posts', { next: { revalidate: 600 }, // 10分 }) const posts: Post[] = await res.json() return (

記事一覧

{p.title}

) } fetchにキャッシュを設定

Slide 20

Slide 20 text

© 2019-2026 OPTiM Corp. All rights reserved. 20 Next.js15での実装例 'use client' import { useEffect, useState } from 'react' type Product = { id: string; name: string } export function RecommendedProductsClient() { const [items, setItems] = useState(null) useEffect(() => { ;(async () => { const res = await fetch('/api/recommended', { method: 'GET', credentials: 'include', // cookie を送る cache: 'no-store', }) setItems(await res.json()) })() }, []) if (!items) return

読み込み中…

return

{x.name}

} ←アプリ仕様

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

© 2019-2026 OPTiM Corp. All rights reserved. 24 Next.js16での実装例 ‘use cache‘でキャッシュを宣言 import { cacheLife } from 'next/cache' type Post = { id: string; title: string } export async function PostsList() { 'use cache' cacheLife('minutes') // 例：minutes/hours/days/max など（プロファイル） const res = await fetch('https://example.com/api/posts') const posts: Post[] = await res.json() return (

記事一覧

{p.title}

) }

Slide 25

Slide 25 text

© 2019-2026 OPTiM Corp. All rights reserved. 25 Next.js16での実装例 // app/ui/RecommendedProducts.tsx (Next.js 16) import { cookies } from 'next/headers' type Product = { id: string; name: string } export async function RecommendedProducts() { // use cache しない = request-time（ユーザー固有を素直に扱う） const cookieStore = await cookies() const userId = cookieStore.get('uid')?.value ?? 'guest' const res = await fetch(`https://example.com/api/reco?userId=${userId}`, { cache: 'no-store', // 毎回最新 }) const products: Product[] = await res.json() return

{x.name}

}

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

© 2019-2026 OPTiM Corp. All rights reserved. 30 Cache Components の Cacheはどこに保存されるのか？ Cluster Node Node Pod Next.js Server メモリキャッシュ Pod Next.js Server メモリキャッシュ Pod Next.js Server メモリキャッシュ Pod Next.js Server メモリキャッシュ

Slide 31

Slide 31 text

© 2019-2026 OPTiM Corp. All rights reserved. 31 Cache Components の Cacheはどこに保存されるのか？ Cluster Node Node Pod Next.js Server メモリキャッシュ Pod Next.js Server メモリキャッシュ Pod Next.js Server メモリキャッシュ Pod Next.js Server メモリキャッシュ Pod間でCacheが共有されていない。

Slide 32

Slide 32 text

© 2019-2026 OPTiM Corp. All rights reserved. 32 Cache Components の Cacheはどこに保存されるのか？ Cluster Node Node Pod Next.js Server メモリキャッシュ Pod Pod Next.js Server メモリキャッシュ Pod Next.js Server メモリキャッシュ Pod Next.js Server メモリキャッシュ

Slide 33

Slide 33 text

© 2019-2026 OPTiM Corp. All rights reserved. 33 Next.jsの'use cache' 系が作るキャッシュの“保存先”を差し替える仕組み ◼デフォルト(use cache) : サーバーのインメモリ ◼カスタム(use cache: remote) : Redis or KV database 等 ⚫ハンドラ設定が前提 ◼※(use cache: private)：ユーザーのブラウザのメモリ上 ⚫experimental機能 Cache Handlersとは？カスタム(use cache: remote) デフォルト(use cache)

Slide 34

Slide 34 text

© 2019-2026 OPTiM Corp. All rights reserved. 34 Cache Handlersとは？  カスタム(remote)ハンドラが有効なケース ◼レート制限のある API：上流サービスにレート制限／リクエスト上限があり、上限到達リスクを避けたい ◼遅いバックエンドの保護：高トラフィック時に DB や API がボトルネックになりやすいので、負荷を逃がしたい ◼高コストな処理：DB クエリや計算など、繰り返し実行するとコスト（時間・料金）が大きい処理を減らしたい ◼不安定・信頼性の低いサービス：外部サービスがたまに失敗したり、可用性にムラがあるため、安定化したい出典: Next.js 公式ドキュメントuse cache: remoteをChatGPTにて翻訳 (https://nextjs.org/docs/app/api-reference/directives/use-cache-remote) レート制限遅いバックエンド高コスト不安定

Slide 35

Slide 35 text

© 2019-2026 OPTiM Corp. All rights reserved. 35 Cache Handlersとは？ カスタム(remote)ハンドラを避けた方がよいケース ◼すでにデータ層の前にサーバー側のKVSキャッシュ（Key-Value Store）がある場合：データ取得層を包むキャッシュが既にあるなら、use cache だけで（追加のキャッシュ層を増やさずに）静的シェルにデータを含められることがある ◼処理がすでに十分速い場合（< 50ms）：近接・ローカルアクセス等で元処理が速いなら、remote キャッシュの参照（ネットワーク往復）の分だけ改善しない可能性がある ◼リクエストごとにキャッシュキーがほぼユニークになる場合：例：検索フィルタ、価格帯、ユーザー固有パラメータなど → キャッシュがほとんど再利用されず、利用率がほぼゼロになりがち ◼データ更新が頻繁な場合（秒〜分単位）：キャッシュがすぐ古くなり、ヒットしてもすぐ無効／ミスが増える → 上流の再検証（revalidation）待ちが頻発しやすい出典: Next.js 公式ドキュメントuse cache: remoteをChatGPTにて翻訳 (https://nextjs.org/docs/app/api-reference/directives/use-cache-remote)

Slide 36

Slide 36 text

Slide 37

Slide 37 text

© 2019-2026 OPTiM Corp. All rights reserved. 37 Next.js 14から発表されていたPPR(Partial Prerendering)※1が、 Next.js 16にて非常にシンプルに実現することができるようになりました。 キャッシュ化して高速化できる反面、サーバーリソース等々には気をつけていきたい 開発者として、フロントエンドでも自由にキャッシュを操作できるのは魅力的 Cache Componentsへの所感 ※1 PPR(Partial Prerendering) Static/Dynamicを同一ルートで混在させる仕組み Cache Componentsによって、コンポーネント粒度で実現可能になった。

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

おすすめ商品

Slide 17

Slide 17 text

Slide 18

Slide 18 text

おすすめ商品

Slide 19

Slide 19 text

記事一覧

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

おすすめ商品

Slide 24

Slide 24 text

記事一覧

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38