Пагинация NextJS getServerSideProps

Question

Я использую NextJS и Supabase для базы данных. Я не уверен, как использовать разбиение на страницы здесь. Потому что решение, которое я ищу, передает запрос в API. Я не могу этого сделать, потому что беру его напрямую из базы данных. Какое решение для меня здесь?

Решение передает запрос к API в getServerSideProps как это

      const res = await fetch(`${API}/start=${start}`);
const data = await res.json()

Answer 1

Вы должны выполнять пагинацию от клиента, так как getServerSideProps выполняется при обновлении страницы.

Answer 2

Вы можете иметь разбивку на страницы на стороне сервера с помощью SSR, несмотря на комментарии в предыдущем ответе. Вам нужно будет загрузить страницу с запросом, который включает номер страницы, как вы уже сделали в своемgetServerSidePropsИ чтобы получить нужные объекты из базы данных, вам придется преобразовать ее в своюrange()аргументы функции.

Например, если подсчет страниц начинается с 1, вы можете получить нужные элементы из БД следующим образом:

      const pageSize = 10;

export async function getServerSideProps({ query: { page = 1 } }) {
  const pageIndex = parseInt(page);
  const rangeStart = (pageIndex - 1) * pageSize;
  const rangeEnd = rangeStart + pageSize;

  const { data, count } = await supabase
    .from("cars")
    .select("*", { count: "exact" })
    .order("id", { ascending: true })
    .range(rangeStart, rangeEnd)
  return {
    props: {
      data: data,
      count: count,
      page: pageIndex,
    },
  };
}

Теперь, извлекая вашу страницу (давайте предположим, что маршрут вашей страницы/products/cars) сpageПараметр запроса вы можете получить страницы автомобилей:/products/cars?page=2

Вот статья, которая делает нечто подобное (не мое): https://ellismin.com/2020/05/next-pagination/