Next.js Discord

Discord Forum

Client Side Component + RSC Error (Going Nuts)

Unanswered
Sloth bear posted this in #help-forum
Open in Discord
Avatar
Sloth bearOP
Error: " ⨯ Internal error: Error: Server Functions cannot be called during initial render. This would create a fetch waterfall. Try to use a Server Component to pass data to Client Components instead."

My mission is simple. I have a side navbar (Client Side Component) that controls the filtering on my blog posts (RSC). I have a Client Side Component with all of the states ---

const [filter, setFilter] = useState<string>("");
const [page, setPage] = useState<number>(1);
const [date, setDate] = React.useState<Date | undefined>(new Date());

....
<Suspense fallback={<h1>Loading...</h1>}>
          <BlogPosts filter={filter} pagination={PaginationCalc(page)}/>
</Suspense>


Now here is the RSC :

async function BlogPosts({ filter, pagination }: Props) {
  // Querying Redis if server side
  var posts: any = [];

  const redis = await getClient();
  posts = await redis.get("posts");
  posts = JSON.parse(posts);

  // Querying Sanity in Case not Cached
  if (!posts) {
    posts = await getAllPosts();
    await redis.set("posts", JSON.stringify(posts));
  }
  ...
}

the rest of the jsx is irrelevant the problem is that everytime I try to run this code I get this error :
" ⨯ Internal error: Error: Server Functions cannot be called during initial render. This would create a fetch waterfall. Try to use a Server Component to pass data to Client Components instead." how can I achieve my goal but get past this error?

5 Replies

Avatar
#rafaelLive'sMatter
this wont work
You calling a "server component" inside a client component, makes it a client component directly.
What you would do, is wrap the client component withh a server component.. do data fetching in there and pass those as props to te client component
Avatar
Sloth bearOP
"You calling a "server component" inside a client component, makes it a client component directly." okay i see so theres no way to do it my way T_T. Thank you , I believe doing it your method is the proper way next wants me to do it thank you for articulating it to me now its clear how i should refactor the code 🙏
Avatar
#rafaelLive'sMatter
No worries, feel free to mark the answer if it solved your question :D