This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the privacy & cookie policy.

Modern Frameworks and Server Side Rendering

Modern Frameworks and Server Side Rendering

Software EngineeringDevelopmentFramework

I’m a big fan of Separation of Concerns (SOC), yet the modern era of Web Development is made of really lazy developers who do not want to maintain their project in a long run.

But we are where we are. Your write CSS in JS, you write html jsx in js and build your dynamic landing page.

This is super cool but you now have a couple of serious problems.

The Elephant in the room SEO!

You know that all those javascript libraries are rendered on the front-end right? Yet search engine crawlers work with server-side rendered content, you’re in luck nowadays most major search engines added their javascript engine in their crawlers so you have a good chance to get indexed. Although I would not rely on it completely and just push it to the limits. My business is my feeder, I want my feeder to be well and easily found, also it should not rely on experimental tech.

The other major problem, 1MB of bundled JavaScript

How much is your javascript bundle? Yeah that thing, transpiled by your babel into necessary code. You might say but gzipped is only 500kb! Well, my friend if you believe that your average user would like to stare at a white screen for the next 3seconds until they manage to download your 500kb worth of javascript then you’re wrong. Nobody wants to wait for your site to be loaded for a long time, especially google. You get a lower score if your site loads slow,

The Solution

Well, gladly there are a bunch of solution for this.

The easy way: Reconsider if you need to build your application in Javascript, maybe a server-side rendered language is a better fit? Criteria you should always keep in mind:

  • Is this an application that will require a lot of UI updates in real-time?
  • Is this an application that will cover your stories? Like a blog?
  • Is this an application that will eventually transform into a mobile app?
  • Are you choosing this tech for the hype around it?

There are many criteria that particular from project to project, but you should think before you make a decision.

The not so easy but I’m too deep to reconsider using a different framework way: I’ve been like many of you in situations where I should’ve gone for an SSR framework but I realized that too late. 6 months after we’ve started developing our project we were given a new requirement, and that was server-side rendering, we had to come with a fast solution, that wouldn’t cost 1 month of re-development and re-testing. The solution was React Snap. It’s a small npm package that is set-up on post-build as a part of the deployment process. In a nutshell, it launches a headless chrome engine, crawls your site and renders as HTML all your pages as HTML files, then you updated your index file to hydrate or render your app as necessary and you’re done. Highly recommend if you don’t want to go for the hard way (see below).

The not so easy way: Before you begin your project start building it with some frameworks that have that out of the box. My prefference here has Next.js, but you should definitely consider alternatives like Gatsbyjs, Nuxt.js. These are the main alternatives and the best out there that you should definitelly consider.

The hard way: If you are a badass developer and think the best way is to build it on your own, and you should not consider the experience thousands of other developers you could always go your own way and build your small node.js server that will handle all your requests, render your pages on the fly and then make your react hydrate with necessary content when your javascript bundle finally loads.

Final words

If you should always consider your options and the tech stack that you’re going for. It doesn’t matter what are you building, it matters what you want to achieve. Here at Emerald Solutions, we consider very well our options and our client’s desire and we build what is the best for our clients. In case you want to say hi to us, feel free to use the link below.

Published on Mar 6, 2020

Feeling inspired?

Let's talk