How to send a page with data from the database to the client [2020 React SSR with Hook]?

Question

JavaScript

Good day. I'm taking the first steps (well, not quite the first, I got hooked on this topic for about a month) With a server-side react application editor. For my project, I did not use NEXT.js (there I could solve my problem with receiving data and issuing a page to the client already with data, right out of the box using the built-in next method.) But I did not go this route. To render a react application on the server side, I use the RAZZLE library. I liked it very much, it can be used with CRA without any problems at all. Customize as you wish.
Safely screwed react-router, Helmet , Redux. Using the renderTostring method, I get the finished html and transfer it to the client, everything is great.

I'm stuck with the data. I don't know if I understood correctly. But the logic should be like this. First, the Server sends the markup without data. Then on the client side there is a request to receive data. After that, the server, using the renderToNodeStream method, must perform 2 renders on the server side and issue an html page with data. And my problem is that I don't understand how to trigger 2 server side render. I saw a couple of examples of how this is done using react class components - they declare a static method to the component, which is then called on the server. But the trouble is, I use hooks and useEffect does not work on the server (. In general, I got stuck with this. And I can’t find an article or example anywhere. A working application using hooks

Answer 1

ssr should produce complete markup containing all the necessary information. Otherwise, it simply makes no sense. Requests to the database are asynchronous operations, and react rendering is not. Calling render is comparable to calling a regular function that will return the result on execution. Of course, it will launch asynchronous calls to the database, but it will not wait for their completion. Therefore, hooks that are not services, but are intended to imitate the body of a class, will not be able to solve your problem. Hooks are designed to separate the logic of working directly with the template between components. You must build the application in such a way that the render is performed with all the necessary data. In simple words, work with data should be placed on the service layer, which, upon completion of initialization, is used by the react to obtain the necessary data.