J
J
Juniorrrrr2020-04-24 10:23:12
React
Juniorrrrr, 2020-04-24 10:23:12

How to properly suspend react routing in SPA?

There is a website, the front is written in ReactJS. For the SEO to work correctly, SSR is used.
The algorithm is something like this:
1 page load

  1. the browser opens /foo;
  2. CSR checks if there is /foo in the cache - does not find it;
  3. The CCP on the server renders and executes the React app on request /foo;
  4. CSR caches the HTML that is the result of rendering /foo;
  5. The CCP gives the browser the HTML that is the result of /foo being rendered;
  6. the browser makes asynchronous requests, which is the HTML that resulted from rendering /foo (CSS, JS, favicon...);
  7. loaded React application "understands that the page has already been rendered and there is no need to perform routing and all that";
  8. React handles further user actions (just like in a normal SPA).

Future updates
  1. the browser opens /foo;
  2. CCP checks if /foo is in the cache - finds it;
  3. The CCP gives the browser the HTML that is the result of /foo being rendered;
  4. the browser makes asynchronous requests, which is the HTML that resulted from rendering /foo (CSS, JS, favicon...);
  5. loaded React application "understands that the page has already been rendered and there is no need to perform routing and all that";
  6. React handles further user actions (just like in a normal SPA).


The problem is at the front that every time the page is refreshed, routing is started and the entire application is redrawn, and thus a "flicker" appears, that is, point 7.

Question: Is it possible to somehow stop this rendering at a certain moment? Tell the route that it is not necessary to draw right now. Maybe there is some popular solution?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question