4 replies

Implement pagination on the server

I'm currently setting a URL parameter with the value of the current page number. I fetch the items by page number on page.tsx and pass them to my client table component. Is this the best way to do this?

More details:
I'm using Prisma
Here's and example of what I'm doing:

// page.tsx

const LIMIT = 10;

async function fetchItems(page: number) {
  const items = prisma.item.findMany(...);
  const itemsCount = prisma.item.count();
  const pagesCount = Math.ceil(itemsCount / LIMIT);
  const hasNextPage = page < pagesCount - 1;
  const hasPreviousPage = page > 0;
  return { items, hasNextPage, hasPreviousPage };
}

export default async function Page({searchParams}) {
  const pageParam = searchParams.page;
  const page = pageParam ? parseInt(pageParam) : 0;
  const { items, hasNextPage, hasPreviousPage } = await fetchItems(page);
  
  return (
    <>
      <Table ... />
      {/* disable links when there's no page */}
      <Link href={`/...?page=${page - 1}`}>Previous</Link>
      <Link href={`/...?page=${page + 1}`}>Next</Link>
    </>
  )
}

// page.tsx

const LIMIT = 10;

async function fetchItems(page: number) {
  const items = prisma.item.findMany(...);
  const itemsCount = prisma.item.count();
  const pagesCount = Math.ceil(itemsCount / LIMIT);
  const hasNextPage = page < pagesCount - 1;
  const hasPreviousPage = page > 0;
  return { items, hasNextPage, hasPreviousPage };
}

export default async function Page({searchParams}) {
  const pageParam = searchParams.page;
  const page = pageParam ? parseInt(pageParam) : 0;
  const { items, hasNextPage, hasPreviousPage } = await fetchItems(page);
  
  return (
    <>
      <Table ... />
      {/* disable links when there's no page */}
      <Link href={`/...?page=${page - 1}`}>Previous</Link>
      <Link href={`/...?page=${page + 1}`}>Next</Link>
    </>
  )
}

Is the navigation correct? I'm not sure how to prevent people from changing the URL param and go to pages that don't exist. At least I'm looking for the current best practice.

This would be unnecessary if I could use tRPC in /app. If there's a workaround with that I would appreciate it.

TTC

Theo's Typesafe Cult•3y ago•

4 replies

ahkhanjani

Implement pagination on the server

// page.tsx

const LIMIT = 10;

async function fetchItems(page: number) {
  const items = prisma.item.findMany(...);
  const itemsCount = prisma.item.count();
  const pagesCount = Math.ceil(itemsCount / LIMIT);
  const hasNextPage = page < pagesCount - 1;
  const hasPreviousPage = page > 0;
  return { items, hasNextPage, hasPreviousPage };
}

export default async function Page({searchParams}) {
  const pageParam = searchParams.page;
  const page = pageParam ? parseInt(pageParam) : 0;
  const { items, hasNextPage, hasPreviousPage } = await fetchItems(page);
  
  return (
    <>
      <Table ... />
      {/* disable links when there's no page */}
      <Link href={`/...?page=${page - 1}`}>Previous</Link>
      <Link href={`/...?page=${page + 1}`}>Next</Link>
    </>
  )
}

// page.tsx

const LIMIT = 10;

async function fetchItems(page: number) {
  const items = prisma.item.findMany(...);
  const itemsCount = prisma.item.count();
  const pagesCount = Math.ceil(itemsCount / LIMIT);
  const hasNextPage = page < pagesCount - 1;
  const hasPreviousPage = page > 0;
  return { items, hasNextPage, hasPreviousPage };
}

export default async function Page({searchParams}) {
  const pageParam = searchParams.page;
  const page = pageParam ? parseInt(pageParam) : 0;
  const { items, hasNextPage, hasPreviousPage } = await fetchItems(page);
  
  return (
    <>
      <Table ... />
      {/* disable links when there's no page */}
      <Link href={`/...?page=${page - 1}`}>Previous</Link>
      <Link href={`/...?page=${page + 1}`}>Next</Link>
    </>
  )
}

Implement pagination on the server

Similar Threads

Implement pagination on the server

Similar Threads

Similar Threads

Similar Threads