Earlier we talked about how we managed to embarked on a journey which resulted in Orange Gas CMS, you can read it here
Right now, we want talk about why we decided to render on server instead of rendering on client.
When we started with Orange Gas we wanted to set up something really quick and thus we decided to go with Solid JS , Which was a perfect design decision, SolidJS is probably the finest piece of front-end web technology out there along with Sveltekit, We feel very excited that we have a tech stack we can control this granularity.
However as the app started to get big and we started pushing a lot of Blog posts and Documentations posts and we saw we were getting very less traction from search engine, primarily because we are completely client side rendered. There are a lot of speculation about how Google and other search engine bots can now read client side rendered page but we had our client side version online for one month and we hardly got any URL to be cached by the search engine.
Also when we started the development of OrangeGas Solidstart was in beta version and only 3 weeks ago it became production ready. So we thought lets port our existing SolidJS app to SolidStart, how hard it can be? (It was not hard). Most of the work was Changing config based routing to File based routing and setting context, it took us(team of one person working on front-end) 3 weeks to completely port our application to SolidStart and We are not completely Server Side Rendered.
What Changed
We gained instant boost in performance(Yes) and our google search console stopped throwing missing page errors because now it was able to find each and every page of website, which it could not find earlier because everything was client side rendered. We feel more confident about our application structure, With using bare SolidJS you can do a lot of stuff but as your app grow you have to make sure your design patterns grow with app, most of the issues come with side of routing, and code splitting.
Solid Start provides code splitting out of the box and with primitives like Async, Suspense we were able to cache the data, show user instant feedbacks and load data in parallel, avoind waterfalls in front-end. These are the benefits we are noticing just now, but as the application start to grow I think we will appreciate more and more how SolidStart is designed, it is really what React wanted to be and I can totally see a lot of react/next project migrating to Solid/SolidStart and We will be there when it happens.
Show me some numbers
This is our current Lighthouse score on one of our article.
This is what client side rendered version performance was you can still check it here
I mean these are huge gain, especially for SEO and that is exactly what we were aiming for and there are a lot of hidden advantage mostly in terms of developer experience.
this article was created in OrangeGas CMS tool and is part of a technical series written by our team, read it here.
