Why loading page twice?

[tinternet]

When we open some page for first time, the server renders and returns it. After all the client makes another request to download the same page again and it's being re-rendered on the client side. Any chance to skip that?

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[koistya]

@d0ntth1nc good catch! I'm going to fix that in one of the upcoming updates. But if you have a suggestion how to fix that, your PR is more than welcome.

[korczis]

👍

[korczis]

Any news?

[stphnclysmth]

One way to solve this is to mark React as an external dependency in the Webpack tools/config.js.

const appConfig = merge({}, config, {
  externals: [
    'react'
  ]
...
}

[chentaixu]

Ah! I didn't know it was mentioned before and opened another identical issue. I think the crux of this issue is the lack of relation between 'server-rendering' and 'browser-rendering'. For 'server-rendering', it is implemented in server.js. So, when this part is being executed, it should express in some sort of way that the server-rending is being done. For 'browser-rendering', the render function should try to learn about the previous fact. So I think a modification for those two parts would be most appropriate. I would try coming up with the solution. It shouldn't be hard. ; p

---

Edit:

Pfffffffffffffffttt. I eat my words. The difficult part is that React in the client side does not know about the DOM at the beginning. Even though the web page looks fine, the whole 'web app' is simply an HTML file. The event listeners are not attached on those React components sitting in the HTML file. So the current behavior which is 'load page twice' is actually the correct behavior. The React simply wants to know about the DOM information! The HTML page will not be re-rendered since it is exactly the same.

So the hard part ---> Mount the server-rendered string into client DOM

Possible solution 1: Parse the HTML back to react component and React.render it.

Possible solution 2: Somehow send the component together with the initial HTML file and load the component after boot.

Possible solution 3: Hack into React DOM and write your own 'render' function which is more like a 'mount' that takes the structure of the DOM nodes as input which attaches event listeners to the server-rendered string. This is the best solution yet the hardest one

Possible solution 4: Well, it's actually not that bad to make an identical API call...

[langpavel]

You can use feature/redux or another data backed.. See how translations are handled in feature/react-intl

[langpavel]

Good point. This is really unresolved yet!

But it really cannot be without transferring state to client and on master branch this cannot be achieved.

In feature/redux it can be, see how translations are passed in feature/react-intl branch.

[LorisTujiba]

this effects the page source, the page source that returned by the server is outdated or the old ones.
After that the server returned the initial data(the false one), client then reload the correct data, but the page source doesn't changed. How to correct this ?

[code-flu]

When wrapped with React.StrictMode (which is how [CRA template] are setup), on development, renders will be called twice. This is done to catch bugs that might occurs when some setState functions are not pure. You can read this for more detail.

Solutoin - Remove React.StrictMode from src/index.tsx

https://stackoverflow.com/questions/61193122/react-default-create-react-app-app-component-rendered-twice