search

foxhound87 / rfx-stack

RFX Stack - Universal App
MIT License
419 stars 42 forks source link

Strange initial redraw for routes with System.import in Chrome #36

Closed infernalmaster closed 7 years ago

infernalmaster commented 7 years ago

To reproduce it:

  1. start prod server yarn run web:prod
  2. go to some route with imported component with System.import
  3. reload this Chrome tab
  4. You should see page renders 2 times

It looks like browser draws server generated DOM and then, when component is loaded with ajax, react clears root container then draws new DOM. Maybe this is issue of react-router, but it's good to know if someone else can produce this.

http://recordit.co/2ur8zsuxnh

Was trying ff and safari and didn't saw that flickering.

Chrome: Version 55.0.2883.75 beta (64-bit) MacOS: 10.11.6

foxhound87 commented 7 years ago

I noticed it also on chrome, I still can't find the cause.

foxhound87 commented 7 years ago

Now I just noticed that some pages has this warning:

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting

This occurs if there is something wrong with the server side rendering, and some code is different from the client and server.

I will fix this and the flickering should go away, but It's strange that it doesn't occurs on other browsers except chrome.

foxhound87 commented 7 years ago

It is related to System.import and react-router, I'm going to fix it.

foxhound87 commented 7 years ago

Fixed, Thank you for your support.

infernalmaster commented 7 years ago

It's I should thank you, you did awesome job 👏