The Problem with Server-side Data Fetching
If you have an SSR-enabled React app, either by manually enabling it, for example, in a Vite-based project, or by using a framework like Next.js, your React component functions get executed on the server. Thus, any data required by those components should be fetched on the server.
But as explained in the previous chapter, in the Server-side Data Fetching Is Not Trivial section, sending HTTP requests with the help of useEffect() or trying to update the UI via useState() does not work when using SSR. On the server, React only calls the component functions once—it does not re-execute them when the state changes. It also doesn’t call your effect functions.
This is a serious limitation since many React apps need to fetch data from some backend or a database. Not being able to fetch and render that data on the server means that website visitors will again receive incomplete HTML documents (and wait for the data to be fetched...
