I have an app working with SSR that loads a fixture from the server(“please wait”) , then replaces this fixture with reactive data from my collection.
The problem I experience is that the time to initialize and render the collection data on client side can be very long and actually depends a lot on the browser.
For example it renders my collection data very fast on Chrome but will take more than 10 seconds on Edge!
Do you know any strategy to mitigate this potentially bad user experience?
I was thinking of simply rendering the collection on server side instead of having fixtures being replaced by my collection, but this will not address the full problem. (Also I somehow didn’t manage to pass my collection data in the sink object of server-render package, reference or help appreciated)
I’m open to feedback here. Have you experienced similar issue? Is there a package to help? I was thinking about using fast render with SSR, but is it going to address this?
I’ve used similar technique as the one used in fast render package with a react app to speed up the load for returning visitors (those who are logged in).
When a request comes to the server, I render a page and inject initial data within the page based on login token cookie. And once the page is loaded on the client, the injected data is detected and passed immediately to the react component.
Then when the subscription is loaded, the react component will get the data again (this time for the pub/sub system) passed as props. This technique made the data visible immediately before the subscription is initialized.
The only issue I’m having is that if the html page is cached by the browser and the data is updated, the user might be presented with older data first then new data will be shown later, perhaps I can prevent the caching of that specific page or detect the time of rendering. There are also potential security concerns with the way cookies are handled, those are outlined in the fast render package.
The other approach is to render the page with the data at the server, so the user can see the data but can’t interact with the server since the JS is not loaded yet. However not all my components can be rendered on the serve, some packages don’t support SSR, and I had to do major refactoring to get this to work, so I didn’t do it that way.
No specific strategy to speed up meteor subscription client side ? As I said it varies wildly according to the browser so there may be some room for client side optimization?
How to fasten MongoDB rendering on client?
Well you can load less records and fields initially. But it seems that Meteor and react need at least 2 seconds to initialize, so even the best case would be more than 2 seconds (the time to load the html & JS and the time to render the html and evaluate the scripts).
On my machine, the best I got was 2.7 seconds initial paint without SSR and 0.6 initial paint with SSR).
I am happy with the initial time before javascript is active (so client side is initialized) but what takes so long is for minimongo to render the first item in my collection.(even a little collection of 2 items will take some time on edge)
And this highly depend on the browser in my tests…
That’s what I want to investigate, but no clue so far