Performance: Add pagination/infinite scroll to directory for large datasets
メンテナーはふだん 1 日以内に返信
まだ誰も着手していません。
評価
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 初心者へのやさしさ
- 55/100
- issue の種類
- 機能追加
- 明瞭さ
- おおむね明確
- 活発さ
- 活発
- 技術スタック
- next.js, typescript
調査の方向性
Start by reading src/app/directory/page.tsx and src/lib/resources.ts to trace how getAllResources() loads the full dataset, then inspect src/components/directory/directory-client.tsx and its PAGE_SIZE behavior. Use the existing directory flow as the entry point; done means resources are fetched in pages and the directory uses pagination or infinite scroll without loading all approved resources server-side.
索引モデルが issue の本文から書いたものです。
説明
Description
The directory currently loads all resources server-side (~600 rows) and paginates client-side with a "Load more" button (30 per page, src/components/directory/directory-client.tsx line 15). As the dataset grows, this will become a performance issue.
Current State
src/app/directory/page.tsxloads ALL resources viagetAllResources()(line 23-24)src/lib/resources.tsgetAllResources()fetches all approved resources (line 71-83)- Client-side pagination in
DirectoryClientwithPAGE_SIZE = 30(line 15)
Expected Behavior
Implement server-side pagination with cursor or offset-based pagination:
- Add
page/limitorcursor/limitparams to directory URL - Modify
getAllResources()to accept pagination params - Update
DirectoryClientto fetch next page via API or Server Action - Replace "Load more" with infinite scroll or paginated navigation
Good First Issue Because
- Clear performance improvement
- Involves both frontend and backend changes
- Good for learning Next.js data fetching patterns
- Can be done incrementally (API first, then UI)
Files to Modify
src/app/directory/page.tsx- add pagination params, pass to clientsrc/lib/resources.ts- addgetResourcesPaginated()functionsrc/components/directory/directory-client.tsx- implement infinite scroll or pagination UIsrc/app/api/resources/route.ts(new) - API endpoint for paginated fetching
Implementation Approach
Option A: Offset-based (?page=2&limit=30) - simpler, but can have issues with concurrent updates
Option B: Cursor-based (?cursor=abc123&limit=30) - better for real-time data, more complex
Option C: Keep client-side for now, add server-side when dataset > 1000
Given current size (~600), Option A is fine for now.
- 主要言語
- TypeScript
- スター
- 1
- フォーク
- 6
- 平均マージ
- 12時間 16分
- マージ済み PR（30日）
- 14
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートあり
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
Your-Voldemort/StudentStack のほかの issue
-
enhancement
難易度 5/5 1週間以上 初心者へのやさしさ 20/100
Your-Voldemort/StudentStack#42 ·
メンテナーはふだん 1 日以内に返信
-
enhancement
難易度 4/5 3〜5日 初心者へのやさしさ 45/100
Your-Voldemort/StudentStack#41 ·
メンテナーはふだん 1 日以内に返信
-
enhancement
難易度 5/5 1週間以上 初心者へのやさしさ 25/100
Your-Voldemort/StudentStack#40 ·
メンテナーはふだん 1 日以内に返信
-
enhancement
難易度 5/5 1週間以上 初心者へのやさしさ 45/100
Your-Voldemort/StudentStack#38 ·
メンテナーはふだん 1 日以内に返信
-
enhancement
難易度 5/5 1週間以上 初心者へのやさしさ 35/100
Your-Voldemort/StudentStack#37 ·
メンテナーはふだん 1 日以内に返信
Your-Voldemort/StudentStack の issue をすべて見る
似ている issue
-
enhancement
難易度 2/5 1〜3時間 初心者へのやさしさ 74/100
メンテナーはふだん 1 日以内に返信
-
[Bug] remember() with special characters in namespace hangs until timeout instead of returning 400オープンbug
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
MystenLabs/MemWal#1133 · コメント 1 件 ·
メンテナーはふだん 1 日以内に返信
-
bug user-priority/P2
難易度 1/5 1時間未満 初心者へのやさしさ 92/100
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1時間未満 初心者へのやさしさ 88/100
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 88/100
Effect-TS/effect#8881 · コメント 1 件 ·
メンテナーはふだん 1 日以内に返信