Performance: Add pagination/infinite scroll to directory for large datasets
维护者通常 1 天内回复
还没有人认领这个 Issue。
评估
- 难度
- 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
- 平均合并
- 11 小时 16 分钟
- 30 天内合并 PR
- 16
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
Your-Voldemort/StudentStack 的其他 Issue
-
enhancement
难度 5/5 一周以上 新手友好度 20/100
Your-Voldemort/StudentStack#42 ·
维护者通常 1 天内回复
-
enhancement
难度 4/5 3-5 天 新手友好度 45/100
Your-Voldemort/StudentStack#41 ·
维护者通常 1 天内回复
-
enhancement
难度 5/5 一周以上 新手友好度 25/100
Your-Voldemort/StudentStack#40 ·
维护者通常 1 天内回复
-
enhancement
难度 5/5 一周以上 新手友好度 45/100
Your-Voldemort/StudentStack#38 ·
维护者通常 1 天内回复
-
enhancement
难度 5/5 一周以上 新手友好度 35/100
Your-Voldemort/StudentStack#37 ·
维护者通常 1 天内回复
查看 Your-Voldemort/StudentStack 的全部 Issue
相似的 Issue
-
streams:add
难度 1/5 1 小时以内 新手友好度 62/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 78/100
walletbeat/walletbeat#1558 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 82/100
hawk-digital-environments/HAWKI#438 ·
维护者通常 1 天内回复
-
Bug
难度 2/5 1-3 小时 新手友好度 72/100
GiganticMinecraft/seichi-portal-frontend#1165 ·
维护者通常 1 天内回复
-
难度 1/5 1-3 小时 新手友好度 84/100
维护者通常 1 天内回复