From the course: Learning Full-Stack JavaScript Development: MongoDB, Node, and React
Unlock the full course today
Join today to access over 24,800 courses taught by industry experts.
Sharing data between server and client
From the course: Learning Full-Stack JavaScript Development: MongoDB, Node, and React
Sharing data between server and client
- In index dot tsx, we're rendering the contests with an empty array. So let me demonstrate what's going on. In contest list, I'm going to put a debugger line here. So every time React renders a contest list, it's going to stop for us in the browser and let's test. The first time we hit this debugger, note how we already have the initial markup coming from the server even before React renders any components. Then we render the contest list and we render it with an empty array. So basically React wiped the initial markup that we got from the server, rendered the naming contests with an empty array, and it then goes to the server again to get the data and renders the application again with that data. So that's not ideal. We don't need to do that. This is an extra API call and also wasteful re-rendering. We don't need React to re-render. It already has the same application rendered in the browser. It does not need to wipe…
Contents
-
-
-
-
-
Creating a mock API endpoint5m 52s
-
(Locked)
Using an API endpoint from the browser9m 2s
-
(Locked)
Rendering a list of items8m 47s
-
(Locked)
React’s key for items in a list4m 29s
-
(Locked)
Fetching data while React is rendering8m 5s
-
(Locked)
Server-side rendering of the root path7m 41s
-
(Locked)
Sharing data between server and client5m 1s
-
(Locked)
Fetching data from MongoDB6m 17s
-
-
-