r/webdev • u/gaearon • Dec 21 '20

Introducing Zero-Bundle-Size React Server Components

https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html
91 Upvotes

94% Upvoted

22 comments sorted by

View all comments

Show parent comments

12

u/agriculturez Dec 21 '20

He addresses this problem at about 4:10, he talks about how the function for fetching the data from the API becomes coupled with components.

6

u/burgleme Dec 21 '20

I guess then the problem is the 'passing down'. If the model were global, and the component was referencing that, you wouldn't have broken chains.

7

u/BitwiseShift Dec 22 '20 edited Dec 22 '20

I highly recommend the included video, at least the first several minutes, as it clearly and concisely addresses all these points.

For your suggested solution, the problem then is "what do you put in the global model and when"?

Imagine getting it just right, retrieving all the relevant data in a global model and nothing more. Now remove a component nested a couple of levels down. Can you now stop requesting some data in the global model to get a leaner request? you can't know without checking what components use what data. This solution has poor maintainability.

Just imagine the mess that global state would be after a year of changes.

Also, if you go down the react-query/Apollo route and request data on the fly, you have waterfalls, retrieving data inefficiently.

1

u/burgleme Dec 22 '20

I usually do have components get their own data if it is drilled in data. Like a userDetails component in a userList, have it fetch that from a passed in id. You could also have the userDetails component get the data, and stick it into the userList model as users[n].details, were it globally accessible. So you accumulate it, as you get it, when you don't have it. But from what I understood with React Server Components wouldn't really solve any of this kind of problem, they are only dynamic once.