Next.js Discord

Discord Forum

Mutate server component's state after client component changes something

Unanswered
Oak saucer gall posted this in #help-forum
Open in Discord
Oak saucer gallOP
I have a component like this (using app router):

<ServerComponent>
  {someBoolState && (
    <ClientComponent />
  )}
</ServerComponent>


Now, at one point, ClientComponent makes an API request and that changes something that should ideally change someBoolState . But because the ServerComponent doesn't know about that change, someBoolState continues to have the old value (true). What is the path forward here? Am I following some anti-pattern?

5 Replies

Hi, a server should ideally be stateless, all the variables you create there have a lifetime limited to the user request/response roundtrip, so state can only live either in the database (persistent), or in the browser (transient state).
I don't know about your specific use case, so if someBoolState is changed by an API call it perhaps belong to the database
could be a user preference for instance
you can also use cookies, they are stored in the browser, and automatically sent to your server
that's the usual place to store semi-persistent stuff, like when user select a specific language via the UI, dark/light theme...