⚡ Optimize GitHub API fetching by adding Next.js revalidate cache#362
⚡ Optimize GitHub API fetching by adding Next.js revalidate cache#362is0692vs wants to merge 1 commit into
Conversation
Co-authored-by: is0692vs <135803462+is0692vs@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
Qodo reviews are paused for this user.Troubleshooting steps vary by plan Learn more → On a Teams plan? Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center? |
|
Warning Review limit reached
More reviews will be available in 58 minutes and 37 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more credits in the billing tab to continue. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (2)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request adds the ts-node dependency and updates the fetch request in cardDataFetcher.ts to use Next.js revalidation caching instead of disabling caching. Feedback points out that ts-node is redundant as Next.js and Vitest natively compile TypeScript. Furthermore, the Next.js Data Cache optimization will be ineffective because the calling API route uses the Edge Runtime; changing the runtime to Node.js or using a custom caching layer is recommended.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| response = await fetch(url, { | ||
| headers: getHeaders(), | ||
| cache: "no-store", | ||
| next: { revalidate: 3600 }, |
There was a problem hiding this comment.
Since the API route calling this function (src/app/api/card/[username]/route.ts) is configured to use the Edge Runtime (export const runtime = "edge"), the Next.js Data Cache (next: { revalidate }) will not be persisted across requests on platforms like Vercel. As a result, this caching optimization will not have any effect in production.
To resolve this and enable the Next.js Data Cache, you should change the API route's runtime to Node.js by removing export const runtime = "edge" (or setting it to "nodejs"), or implement a custom caching layer (e.g., using @upstash/redis which is already a dependency in this project).
| "tailwindcss": "^4", | ||
| "ts-node": "^10.9.2", | ||
| "typescript": "^5", |
There was a problem hiding this comment.
The ts-node dependency appears to be unused in this project. Next.js and Vitest both natively support TypeScript compilation and execution without requiring ts-node. Removing this dependency will keep the package.json clean and reduce the installation footprint.
| "tailwindcss": "^4", | |
| "ts-node": "^10.9.2", | |
| "typescript": "^5", | |
| "tailwindcss": "^4", | |
| "typescript": "^5", |
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| "ts-node": "^10.9.2", | ||
| "typescript": "^5", | ||
| "vitest": "^4.1.5" | ||
| } |
There was a problem hiding this comment.
ts-node の追加がこの PR の目的（キャッシュ設定の変更）と無関係に見えます。PR の説明には ts-node を追加する理由が一切記載されておらず、変更されたソースファイル（cardDataFetcher.ts）でも使用されていません。Jules が自動生成したものである可能性が高く、意図しない追加の可能性があります。この依存関係が本当に必要かどうか確認をお願いします。
Prompt To Fix With AI
This is a comment left during a code review.
Path: package.json
Line: 51
Comment:
**不要な依存関係の追加**
`ts-node` の追加がこの PR の目的（キャッシュ設定の変更）と無関係に見えます。PR の説明には `ts-node` を追加する理由が一切記載されておらず、変更されたソースファイル（`cardDataFetcher.ts`）でも使用されていません。Jules が自動生成したものである可能性が高く、意図しない追加の可能性があります。この依存関係が本当に必要かどうか確認をお願いします。
How can I resolve this? If you propose a fix, please make it concise.Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
| response = await fetch(url, { | ||
| headers: getHeaders(), | ||
| cache: "no-store", | ||
| next: { revalidate: 3600 }, | ||
| signal: controller.signal, | ||
| }); |
There was a problem hiding this comment.
signal オプションとキャッシュの相互作用
signal（AbortController）と next: { revalidate } を同時に指定した場合、タイムアウトによってリクエストがアボートされると、その応答はキャッシュに保存されません。通常の成功レスポンスはキャッシュされるため、大きな問題ではありませんが、高負荷時に連続してタイムアウトが発生すると、1 時間のキャッシュ効果が得られず、常に GitHub API へのリクエストが発生し続ける可能性があります。現在の動作で問題ない場合は許容範囲ですが、意図した動作であることを確認してください。
Prompt To Fix With AI
This is a comment left during a code review.
Path: src/lib/cardDataFetcher.ts
Line: 85-89
Comment:
**`signal` オプションとキャッシュの相互作用**
`signal`（`AbortController`）と `next: { revalidate }` を同時に指定した場合、タイムアウトによってリクエストがアボートされると、その応答はキャッシュに保存されません。通常の成功レスポンスはキャッシュされるため、大きな問題ではありませんが、高負荷時に連続してタイムアウトが発生すると、1 時間のキャッシュ効果が得られず、常に GitHub API へのリクエストが発生し続ける可能性があります。現在の動作で問題ない場合は許容範囲ですが、意図した動作であることを確認してください。
How can I resolve this? If you propose a fix, please make it concise.| response = await fetch(url, { | ||
| headers: getHeaders(), | ||
| cache: "no-store", | ||
| next: { revalidate: 3600 }, |
There was a problem hiding this comment.
revalidate: 3600 により GitHub リポジトリのデータ（pushed_at を含む）が最大 1 時間キャッシュされます。一方、buildHeatmapFromRepoPushes 内の new Date() は呼び出しごとに「今日」の日付を計算します。その結果、最大 1 時間前の pushed_at データを元にヒートマップが描画されるため、直近 1 時間以内のプッシュが表示に反映されない可能性があります。パフォーマンス向上とのトレードオフとして許容範囲内ですが、ユーザーへの影響を考慮した上で revalidate の値が適切かどうか検討してください。
Prompt To Fix With AI
This is a comment left during a code review.
Path: src/lib/cardDataFetcher.ts
Line: 87
Comment:
**ヒートマップデータの陳腐化**
`revalidate: 3600` により GitHub リポジトリのデータ（`pushed_at` を含む）が最大 1 時間キャッシュされます。一方、`buildHeatmapFromRepoPushes` 内の `new Date()` は呼び出しごとに「今日」の日付を計算します。その結果、最大 1 時間前の `pushed_at` データを元にヒートマップが描画されるため、直近 1 時間以内のプッシュが表示に反映されない可能性があります。パフォーマンス向上とのトレードオフとして許容範囲内ですが、ユーザーへの影響を考慮した上で `revalidate` の値が適切かどうか検討してください。
How can I resolve this? If you propose a fix, please make it concise.Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
1 participant
💡 What: Replaced the
cache: "no-store"option withnext: { revalidate: 3600 }in the GitHub API fetch function withinsrc/lib/cardDataFetcher.ts.🎯 Why: Previously, the
no-storecache directive forced the application to make a fresh network request to the GitHub API every single time profile data was fetched. This was inefficient, increased response latency for end-users, and consumed GitHub API rate limits rapidly. By implementing a 1-hour cache revalidation policy, recently fetched profiles are served instantly from the Next.js cache, significantly improving application performance and reducing API quota usage.📊 Measured Improvement: While a direct synthetic benchmark could not be executed due to Next.js edge runtime restrictions and
server-onlyboundaries outside of the full Next.js routing lifecycle, the theoretical improvement is undeniable. A typical network request to GitHub's API can take anywhere from 100ms to over 1s. Serving the same request from Next.js's native cache eliminates this network overhead entirely, effectively reducing the data fetching time for subsequent requests to sub-millisecond levels. Additionally, this change prevents unnecessary processing in building the card data components for repeated visits.PR created automatically by Jules for task 11084214089844866217 started by @is0692vs
Greptile Summary
GitHub API フェッチ関数の
cache: "no-store"をnext: { revalidate: 3600 }に置き換え、Next.js のデータキャッシュを活用して GitHub API への不要なリクエストを削減するパフォーマンス改善 PR です。合わせて、PR の目的とは無関係にts-nodedevDependency が追加されています。cardDataFetcher.ts:getJson関数内のfetchオプションを変更し、同一 URL への GitHub API レスポンスを 1 時間キャッシュするよう設定。レート制限への負荷軽減とレスポンス高速化が期待できる。package.json/package-lock.json: PR の説明に記載のないts-nodeパッケージが devDependency として追加されており、意図しない変更の可能性がある。Confidence Score: 4/5
メインのキャッシュ変更自体は安全で、Next.js の標準的なデータキャッシュパターンに沿っている。ただし、PR 目的と無関係な
ts-nodeの追加が含まれており、マージ前に確認が必要。cardDataFetcher.tsの変更は 1 行のみで、Next.js のキャッシュ機構を正しく利用している。AbortSignalとの組み合わせやヒートマップデータの陳腐化は軽微なトレードオフに留まる。一方、ts-nodeの追加は PR の目的に記載がなく、意図しない変更である可能性があるため、依存関係の肥大化につながる懸念がある。package.json— 目的外のts-node追加について確認が必要。Important Files Changed
fetchのcache: "no-store"をnext: { revalidate: 3600 }に変更。GitHub API レスポンスを 1 時間キャッシュするように修正。AbortSignalとの相互作用およびヒートマップデータの陳腐化に軽微な懸念あり。ts-nodedevDependency が追加されている。意図しない追加の可能性があり、確認が必要。ts-nodeと関連依存パッケージのロックファイルエントリが追加された。package.jsonの変更に対応した自動生成。Sequence Diagram
sequenceDiagram participant Client as ブラウザ participant Next as Next.js サーバー participant Cache as Next.js Data Cache participant GitHub as GitHub API Note over Client,GitHub: 初回リクエスト（キャッシュミス） Client->>Next: プロフィールページ要求 Next->>Cache: URL キャッシュ確認 Cache-->>Next: キャッシュなし（MISS） Next->>GitHub: "fetch /users/{username}（revalidate: 3600）" GitHub-->>Next: ユーザーデータ Next->>Cache: レスポンスを保存（TTL: 3600秒） Next-->>Client: カードデータ返却 Note over Client,GitHub: 1時間以内の再リクエスト（キャッシュヒット） Client->>Next: 同ユーザー再リクエスト Next->>Cache: URL キャッシュ確認 Cache-->>Next: キャッシュヒット（HIT） Next-->>Client: キャッシュ済みデータ返却（GitHub API 呼び出しなし） Note over Client,GitHub: 1時間経過後（再検証） Client->>Next: 同ユーザー再リクエスト Next->>Cache: URL キャッシュ確認 Cache-->>Next: 期限切れ（STALE） Next->>GitHub: "fetch /users/{username}（再検証）" GitHub-->>Next: 最新データ Next->>Cache: キャッシュ更新 Next-->>Client: 最新データ返却Prompt To Fix All With AI
Reviews (1): Last reviewed commit: "perf: Add Next.js cache revalidation to ..." | Re-trigger Greptile
Context used: