NextJS getServerSideProps 分页

Question

我正在使用 NextJS 和 Supabase 作为数据库。我不确定如何在这里使用分页。因为我正在寻找的解决方案是将查询传递给 API。我不能这样做，因为我直接从数据库中获取它。我这里有什么解决方案？

import { supabase } from "../lib/supabase";
import { useRouter } from "next/router";

function Cars({ data, count, page }) {
  const router = useRouter();
  return (
    <div>
      {data.map((carsdata) => (
        <ul key={carsdata.id}>
          <li>{carsdata.name}</li>
        </ul>
      ))}

      <button onClick={() => router.push(`/Cars?page=${page - 1}`)}>
        Prev
      </button>
      <button onClick={() => router.push(`/Cars?page=${page + 1}`)}>
        Next
      </button>
    </div>
  );
}

export async function getServerSideProps({ query: { page = 1 } }) {
  const { data, count } = await supabase
    .from("cars")
    .select("*", { count: "exact" })
    .order("id", { ascending: true })
    .range(0, 9)
  return {
    props: {
      data: data,
      count: count,
      page: parseInt(page),
    },
  };
}

解决方案是像这样将查询传递给getServerSideProps 中的API

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

Answer 1

您应该从客户端进行分页，因为getServerSideProps 在您刷新页面时执行。