You Don’t Need SSR (frameworks)

Introduction

What is Server-Side Rendering?

  • Computation is now mostly done in browser, freeing a lot of load from back-end, reducing their usage costs and increasing the amount of traffic they can handle.
  • It is possible to create fully interactive pages, with a much more deep user experience than with static pages while avoiding successive reloading.
  • As pages are not sent once generated, search engines and crawlers won’t index anything valuable (although this statement may be obsolete now, as all modern crawlers are able to execute JavaScript and wait for the page to be rendered before indexing its content).
  • Performance/UX: the fact that pages are not sent back ready to be displayed to end user makes it potentially longer to load. Especially when network connection is bad, or device computation resource is limited. We’ll come back to that point later.

Challenges brought by SSR

  • Dynamic data fetching from an API or any web service before rendering
  • Using a front-end router, or internationalization (i18n) utilities
  • Using HMR for development
  • Lazy loading components
  • Using a state manager like redux or diox

SEO

Performance & User Experience

Web app with SSR
Web app without SSR
  • With SSR, page takes much more time to load because API calls are performed on back-end, before sending any response to the client. During that time, end-user is just waiting in front of an white screen. However, once everything is loaded, useful content is displayed sooner than without SSR. Regarding TTFI, as all assets are required and DOM must be hydrated, user sees a complete page, but he cannot interact with it for 2.5 seconds. It makes the app feel cumbersome, laggy, and can generate frictions.
  • Without SSR, page is loaded way faster (twice, actually), but is only displaying a loader / splash screen / whatever is in the HTML page at first, for 2.5s until the JavaScript has been completely loaded and interpreted. At that moment, user can really interact with the UI, but no interesting content is displayed. Meaningful content appears 2.5 seconds later than with SSR. Nonetheless it gives you a window to let your user know the app is still waiting for the payload, by displaying relevant UI elements.

Costs & Complexity

  • Enabling SSR requires to rewrite a large part of your app so it is 100% isomorphic (although you never completely achieve that). It takes a huge amount of time, that you could have spent improving other aspects of the app or focusing on other ways to increase performance.
  • You will definitely need a more powerful and complex infrastructure, as making an app work on back-end has many implications in terms of security and features.
  • Your servers will be able to handle much less traffic than before (because of the computational resource it takes to render pages), increasing your costs.

Conclusion — About simplicity

  • NextJS, for the React ecosystem
  • NuxtJS, for the VueJS community

--

--

--

VP Engineering at KivFinance, Inc.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Build Slack Applications in Golang using Socket Mode — Setting Up

Gophers (Golang) Setting up a music stage

The Challenges of Outsource Software Development

Sales tech we can’t live without

How to avoid code review pitfalls that slow your productivity down

Personalized Fishbowl Recommendations with Learned Embeddings: Part 1

Secure Deployments from Gitlab to Google Cloud Platform

Build your first REST API in Go language using the Gin framework

How Custom Retail Software Solutions Can Help Retailers? — Software Development Company UK

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Matthieu Jabbour

Matthieu Jabbour

VP Engineering at KivFinance, Inc.

More from Medium

Dropdown problem with using UI Scaling

What is React And Why it is So Popular in 2022 ??

Frontend Insider #5

The Essential Meta Tags for Social Media in examples