search

reactjs / server-components-demo

Demo app of React Server Components.
https://reactjs.org/server-components
MIT License
4.27k stars 640 forks source link

How does react decide to rerender search result? #43

Closed quolpr closed 2 years ago

quolpr commented 3 years ago

First of all, thank you for a great example 🙂️. And thank you for keeping in touch with what React dev team is working on. That's a great thing!

For example, when I create a new note with the title test and I already have search input with test, how react decide that the search result should be rerendered on the server? This thing is not clear to me 🤔️

quolpr commented 3 years ago

Like, the server component uses SQL query:

https://github.com/reactjs/server-components-demo/blob/main/src/NoteList.server.js#L20

And I don't see any subscription to the result of the query(so the server or client will not get known that the new rows appear in DB), and that's why I am curious, what is the logic of how React decides to refetch server component.

quolpr commented 3 years ago

Also, the question is not about the topic, but I am curious - will React have a mechanism to push(for example via WebSockets) server-rendered components to the client?

gaearon commented 2 years ago

The search field updates a piece of context:

https://github.com/reactjs/server-components-demo/blob/9285cbd2624c6838ebd2d05df1685df2c0f2f875/src/SearchField.client.js#L31-L34

Our root client shell component reads a (cacheable) server response according to that piece of context:

https://github.com/reactjs/server-components-demo/blob/9285cbd2624c6838ebd2d05df1685df2c0f2f875/src/Root.client.js#L26-L31

So when you change the field, effectively you tell React to refetch the server tree. Similar to navigating to another page.

So there are no subscriptions involved, it's more like refreshing the page. (But because it's built with React, the page doesn't "reset" during a refresh.)

Hope that helps.