CODEWITHSUNDEEP
reactjsnext.jsreact-server-components
Mat
Mat

Reputation: 86532

Are React Server Components appropriate to fetch a partial page based on client state?

I'm writing a Next.js 14 App Router application. I want to display a 'popup' component in a react-map-gl marker onClick handler. The 'info box' popup content needs to change based on the marker selected, via a database lookup.

React Server Components feel like the right way to do this now, but they only render once. This can be circumvented by invalidating with revalidatePath, but that seems to to re-render the whole page. I don't want to redraw my map, just the 'info box' component.

Various examples show database changes, followed by a reload of the same data (with additions now present in the database). That works if the change is in the database table, but not if I want to change the database query.

I want to change what I'm querying the database for (a WHERE slug = input clause). So I need to pass client state changes to the server, which doesn't seem possible.

It looks like I need to use Server Actions instead. Am I wide of the the mark?

Upvotes: 0

Views: 95

Answers (1)

Mat
Mat

Reputation: 86532

reactjs/server-components-demo described in React Labs: What We've Been Working On – March 2023 appears to do what I'm after, but it seems to do so by hoisting the state above the App component main/src/App.js:

export default function App({selectedId, isEditing, searchText}) {
  return (
    ...
    <Note selectedId={selectedId} isEditing={isEditing} />
    ...
  );
}

State is provided by server/api.server.js#L109:

 renderReactTree(res, {
    selectedId: location.selectedId,
    isEditing: location.isEditing,
    searchText: location.searchText,
  });

I'm not sure if that is possible in a standard Next.js App router project.

Upvotes: 0

Related Questions