0

There is a website, the front is written by ReactJS. For the correct operation of the CEO, SSR is used. The algorithm is like:

1 page load

  1. the browser opens / foo;
  2. SSR checks if is in the cache /foo does not find it;
  3. SSR renders on the server and executes the react application on request / foo;
  4. SSR puts in the cache HTML, which turned out as a result of the render process / foo;
  5. SSR gives to the browser an HTMLL, which was the result of the render process / foo;
  6. The browser performs asynchronous requests, which are HTML, which is the result of the / foo render (CSS, JS, favicon ...);
  7. the loaded application react "understands that the page has already been drawn and that it's not necessary to perform routing and so on";
  8. The react processes the user's further actions (as in a regular SPA).

Subsequent Updates

  1. the browser opens / foo;
  2. SSR checks if is in the cache /foo does not find it;
  3. SSR renders on the server and executes the react application on request / foo;
  4. SSR puts in the cache HTML, which turned out as a result of the render process / foo;
  5. gives to the browser an HTMLL, which was the result of the render process / foo;
  6. The browser performs asynchronous requests, which are HTML, which is the result of the / foo render (CSS, JS, favicon ...);
  7. the loaded application react "understands that the page has already been drawn and that it's not necessary to perform routing and so on";

The react processes the user's further actions (as in a regular SPA). The problem is at the front that every time the page is refreshed, routing is started and the entire application is drawn anew, and thus “flicker” appears, that is point 7 does not work.

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

1 Answer 1

0

You can use lifecycle method shouldComponentUpdate. You can set your own logic in the method for the component to be re-rendered or not. shouldComponentUpdate class method has access to the next props and state before running the re-rendering of a component. That's where you can decide to prevent the re-render by returning false from this method. If you return true, the component re-renders.

Sign up to request clarification or add additional context in comments.

3 Comments

method shouldComponentUpdate starts when a props or state changes, but I need the ability to stop routing when the page reloads
Did you try to store your current route path in local storage?
can u explain what do you mean ?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.