Speed Optimization (React + React Router DOM + SSR + Semantic UI)

help
1

I’m trying to get the fastest configuration possible when using React with React Router DOM, React Helmet and SSR - The goal is to serve pre-rendered HTML to the browser so that it’s spiderable for SEO and Social Media sharing - currently I am using helmet but the render happens client side and so the meta tags are either static (one for the whole site) or load after the initial render and so are not visible to social media platforms.

I have tried using two SSR packages, meteor server-render (server-render | Meteor API Docs) and React Router SSR (GitHub - Meteor-Community-Packages/react-router-ssr: Simple isomorphic React SSR for Meteor with subscribed data re-hydration)

The Meteor server-render package didn’t seem to do much, the React Router SSR package does work although there isn’t much of a speed increase.

What is the best practice here to get render-blocking down, should I use webpack or what can be done so that the site loads quickly?

Is there a way to cache the subscriptions so that it’s loaded from memory instead of the mongo server on the initial load and have a TTL on that like memcache or something? Or do I need to figure that out for myself. Usually I would cache everything from the database so it’s a memory load and not actually hitting the db. This is my first Reactive app that’s actually gone live to production and got investment so I am breaking into fresh territory and wanted to share my experiences and hopefully can figure out the best way to get a fast site here.

From what I have garnered using appcache is now deprecated so maybe no point using it - although I am still running it and caching is built in so maybe using a varnish reverse proxy isn’t worth the hassle of setup. I am running everything through cloudflare pro and argo routing - it’s helped alot but still too slow really and not spiderable.

Thanks in advance to anyone who can shed light on this. I love meteor and want to use it for all my apps - it’s just figuring this one pitfall currently and I am sure there must be a way around it. Thanks!

2

You can check this packages:

1 Like
3

thank you @rjdavid appreciate the help here, didn’t see this one on my travels

4

Most of the speed issue that you are seeing is probably due to the size of the JavaScript bundle being downloaded and the initial parsing of the code on page load.

To reduce the parsing time on page load without a whole lot of work, you could utilize nested imports, which are feature that is unique to Meteor. This would delay the parsing and execution of large parts of your codebase, thus speeding up the initial load of the page. This however would leave your bundle size untouched and more stuff to download.

To fully optimize your bundle size and initial parsing, you can use dynamic imports. This will split each module into its own bundle which will only be downloaded, parsed, and executed at the time the module is imported. This will require a bit more work and this package though.

1 Like
5

thanks man!! Really helpful!

6

This really helped man you rock thanks again

1 Like