Search code examples
reactjsnext.jsserver-side-rendering

How to use client-side dependency variables while data fetching in Next.js 13?

I have a Next.js 13 app set up, I'm trying to properly implement client and server-side components to enhance user-experience and app performance. I am able to easily fetch and populate data using SSR on the initial render, but is it possible to use server-components to refetch data when a client-side dependency changes.

Example:

  • A user enters a search term and I need to refetch data based on the search filter.
  • User interacts with the some button and based on the change of a useState variable, I want to refetch data

As far as I understand, I won't be able to cater these use-cases on server-side, but I'm hoping there's something out there that lets me.

Here's a general gist of my server-component that I would ideally like to incorporate a user search filter with :

  const session = await getServerSession(authOptions);
  if (session.clientData._id === null || !session) {
    return false;
  }
  const baseUrl = `${process.env.NEXT_PUBLIC_API_URL}/client/projects`;
  let req = await fetch(
    `${baseUrl}/?clientId=${session.clientData._id}&status=${status}&page=${page}`
  );
  return req.json();
}
export default async function ProjectContractCardWrapper({ status }) {
  const data = await fetchData();

  return (
    <>
      {data.map((item) => (
        <ProjectContractCard item={item} />
      ))}
    </>
  );
}

TLDR: I want to emulate the ability of useEffect to refetch data based on a change in dependency array in server-components of NextJS 13.

Solution

  • Server Components are not meant to have the kinda interactivity you are looking for (they are meant to be static content). View them as a traditional website, where to have any change on your page, you have to make a call to the server a get a new HTML document. They highlight that on when to use Server and Client Components:

    enter image description here

    It's okay to use client components, as Lee Robinson from Vercel says on this GitHub issue:

    Client Components aren't a de-opt, nor a cop-out. You can think of Server Components as an additive to the existing model. I understand the sentiment of wanting to use Server Components for lots of things (not bad!) but it's also totally okay to use Client Components for certain things.

    And even a client component first renders on the server with Next.js, so most of the time you lose nothing.