Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta
  • Qualcosa non va?
#28 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
55/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
next.js, typescript
Ambito
full-stack, performance

Direzione di ricerca

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.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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.

Lingua principale
TypeScript
Stelle
1
Fork
6
Merge medio
12h 16m
PR unite (30g)
14

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di Your-Voldemort/StudentStack

Tutte le issue di Your-Voldemort/StudentStack

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.