Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Nextjs how to re-get data in server component when triggered from client component

I have two parallel routes, one being a server component that displays a list of things and the other being a client component that adds a thing to the list. The server component does a sql (mysql2) query to get the list and similarly, the client component does a sql query to add to the list.

I am wondering how can I make the server component’s list update after the client component adds to it. I’d like to know how to update the server component’s list without doing another db query, as the query from the client component returns the new thing that was added to the list; I just want to use that result to update the server component’s list.

I am open to using a state management library such as jotai, but I am not sure how this works within server components as hooks can’t be used; I want to avoid prop drilling.

Tags:

2

Answers


  1. 0

    Think of Server Components like any templating engine such as Blade, EJS, and Twig. They get transformed to plain HTML files when there is a request and sent to the browser. Like the other templating engines, to update them, you need to refresh the page, hence in your case, call the DB.

    If you need a different behavior (such as updating the component on the client), you should be using a client component, aka the "use client". And you shouldn’t try to fight this idea, as Lee Robinson from Vercel says:

    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.

    Also, even a client component first renders on the server with Next.js to improve the page initial load.

    Login or Signup to reply.
  2. 0

    From the docs:

    Parallel Routes allows you to simultaneously or conditionally render
    one or more pages within the same layout. They are useful for highly
    dynamic sections of an app, such as dashboards and feeds on social
    sites.

    If I understand your use case correct, I would simplify the structure and avoid parallel routes.

    /things-list/page.tsx (React Server Component)

    RSC which queries the datastore and renders the result things-list

    /things-list/interactive-rcc.tsx (React Client Component)

    This RCC receives data (things-list) from the RSC (props) and can fetch additional data.

    Or let the RSC query this additional data if possible and receive it in props

    Initiate datastore mutation with Server Actions. In forms or event handlers.

    /things-list/server-actions.tsx (React Server Component)

    RSC which mutates the datastore triggerd on form inputs or event handlers of a React Client Component.

    In general, it is preferable to stick with simple, recommended patterns. But you know better. Perhaps I misunderstand your demand.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search