I'm currently trying to understand the concepts behind SSR in a ReactJS application and cannot seem to understand one of the key concepts.
The official ReactJS documentation explains that when hydrating, the content rendered on the client must be identical to the one rendered on the server.
React expects that the rendered content is identical between the server and the client. It can patch up differences in text content, but you should treat mismatches as bugs and fix them. In development mode, React warns about mismatches during hydration. There are no guarantees that attribute differences will be patched up in case of mismatches. This is important for performance reasons because in most apps, mismatches are rare, and so validating all markup would be prohibitively expensive.
This is clearly possible by sharing components between the server and the client but somehow seems to defeat the idea to do the heavy lifting on the server side. If for example a page requires loading a large amount of data from a database to be rendered and this is done on the server side, the client would now need to load all the data over to the client just to render the exact same page and hydrate it.
What am I missing?