Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

Performance: Add pagination/infinite scroll to directory for large datasets

Đã đóng
  • Có gì không ổn?
#28 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
55/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
next.js, typescript
Lĩnh vực
full-stack, performance

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

enhancement good first 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.tsx loads ALL resources via getAllResources() (line 23-24)
  • src/lib/resources.ts getAllResources() fetches all approved resources (line 71-83)
  • Client-side pagination in DirectoryClient with PAGE_SIZE = 30 (line 15)

Expected Behavior

Implement server-side pagination with cursor or offset-based pagination:

  1. Add page/limit or cursor/limit params to directory URL
  2. Modify getAllResources() to accept pagination params
  3. Update DirectoryClient to fetch next page via API or Server Action
  4. 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 client
  • src/lib/resources.ts - add getResourcesPaginated() function
  • src/components/directory/directory-client.tsx - implement infinite scroll or pagination UI
  • src/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.

Ngôn ngữ chính
TypeScript
Star
1
Fork
6
Merge trung bình
21 giờ 33 phút
Pull request đã merge (30 ngày)
48

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của Your-Voldemort/StudentStack

Tất cả issue của Your-Voldemort/StudentStack

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.