Hey everyone!
I'm trying to use @tanstack/react-table in a NextJS 14 project and take advantage of SSR and Suspense with loading components.

Currently, my server component looks like this:

import { client } from "@/lib/stormgateworld";

import LeaderboardTable from "./table";

export default async function LeaderboardPage() {
  const { data } = await client.GET("/v0/leaderboards/ranked_1v1", {
    params: {
      query: {
        page: 1,
      },
    },
  });


  if (!data) {
    return null;
  }

  return (
    <div className="my-6">
      <LeaderboardTable data={data} />
    </div>
  );
}

where <LeaderboardTable /> takes in data to then call useReactTable. I want to add pagination where a user can click between pages but this would require some state management and I can't use useState in a server component where my query is being made.

SSR is frankly a new concept to me but if anyone could point me in a direction of an appropriate pattern for this, that'd be great.

I could manually call client.GET and set data and recall the query whenever my pagination state changes, but I was wondering if this is achievable while leaving the query on the server: changing page from 1 to 2 based on user click.

Thanks in advance!