NextJS getServerSideProps 分页

问题描述

我使用 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()

解决方法

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