Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Cerrado
  • ¿Algo no está bien?
#28 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
55/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
next.js, typescript
Área
full-stack, performance

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
1
Forks
6
Merge medio
23 h 56 min
PR fusionados (30 d)
25

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de Your-Voldemort/StudentStack

Todos los issues de Your-Voldemort/StudentStack

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.