Server render and the flashing problem


#1

Hey there,

I recently started to use the server render. I’m using react and my client side state is handled in a redux store. Although the subscribed data is only kept in my minimongo and not stored in the redux store. I got it to work so far, but currently I’m struggling a bit with the “flashing” Problem because of subscriptions. The following situation:

  1. Client requests site from the Server
  2. Server is rendering the application and sends the complete markup to the Client
  3. Client displays the application correctly
  4. Then the js files are loaded and the client side rendering starts
  5. The .subscribe is called and since the required data is not yet available in the client side collection the application gets rerendered where a loading icon is shown
  6. As soon as the data is in the client side collection the correct markup from before is shown

What is the best way to approach this issue?

I had the following idea:

  1. Server renders the application and sends the data to the client
  2. As soon as the client has the js files available it hydrates the minimongo collections
    -> So far my approach was working. Unfortunately the client also receives the same data shortly after from the server and I receive the following error message: “Uncaught Error: Expected not to find a document already present for an add […]”. It makes sense, since the data is indeed already there. Is there an option to catch these errors?

Would you somehow differently approach the flashing problem? Other options I might think of:

  • Delay the render
  • Store the collection data in the redux store

Would be great to hear about your solutions.

Best regards,

HK


#2

I have a website built with this Meteor and ssr. It works well and SEO is ok.


#3

And how does your answer help me with my specific problem? :thinking:


#4

If you see my example, there is no flashing issue. I used this boilerplate: https://github.com/minhna/meteor-react-ssr