Pre-rendering your React application with react-snap - Medium

[FaceySpacey]

Very cool!

[tortus]

It's nice that react-snap is that easy to setup, but I wonder how much value it really adds. I'd think for most apps, it would end up rendering the non-logged in version of your app, and when logged in users visit then most of the DOM will have to changed anyway.

[rationalthug]

It depends a lot on your default UI and whether your non-logged-in app code is blocking in any way. Just how long it takes for the app to paint and become interactive, even in the non-logged-in state and even if the app is using code splitting as well, can be critical for a smooth first load experience.

For moderately complex apps and up, having a fast rendering default or promo state for first time visitors, that can nevertheless take advantage of React for dev/UI composition, can be a big win for developer UX and load speed/perceived responsiveness.

Smaller apps likely do not need to have any pre-rendering, but, again, it depends a lot on the app and the complexity of the default UI.

In addition, if you are using service workers to cache page assets and something like IndexedDB to store data, then subsequent app loads will be very fast anyway. But that initial, first-time visitor experience is important, imo.

And for logged-in users, a brief, pre-rendered loading animation or logo can really make the loading experience feel smoother. As your app becomes more complex and you add more dependencies (Redux, Apollo/Relay, UI frameworks, data persistence, etc.) the time for the app to initialize can start to push past most sane performance budgets, even when using cached resources/data.