Frontend Weekly
Published in

Frontend Weekly

Comparing various types of react-based web apps and how to analyze their performance

Different types of react based web-apps

There are basically three types of react based web-apps:

  • Static web-app
  • Single Page Application (SPA) with client-side only rendering
  • SPA with server-side rendering

Static web-app

Static pages are the oldest form of web pages. After all, “a static webpage simply means that all the HTML content has been created already and served from static server”.

When to use static web-app

  • If you only need a very basic web-app where content doesn’t change often and where you also have no dynamic (e.g. user-specific) content, then a static page could be all you need.
  • Static web-apps are best for building small-scale websites and blogs.
  • Static web-app are great for search engine optimization (SEO) and are also incredibly performant and accessible.

Gatsby.js can be used to build static sites that are also Progressive Web Apps, follow the latest web standards, and are optimized to be highly performant.

Limitations of static web-app

As static web-apps can’t allow users to interact dynamically, without having to ask the server for the entire rendering of a new page, there comes the need of SPA’s where data boots on demand while the entire page has previously been loaded, hence no page reloads are required.

SPA with client-side only rendering

The most modern way of building a website is SPA. It is basically inspired by mobile apps, where we click around and things happen instantly we never have to wait for a new page to load. SPA is a way to bring that experience to browsers as well.

Why SPAs

  • “In SPA, the server returns one single, pre generated HTML page which in turn contains JS code that changes the page dynamically in the browser”.
  • SPAs are on the rise because they provide such an amazing and fast user experience and there is no page load waiting time. React.js, Angular or Vue.js are the most popular choices.

Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React.

Limitations of SPAs

As the first page load of SPA with client-side only rendering is slow and performing SEO is not easy, there comes the need of SPA with server-side rendering.

SPA with server-side rendering

“Server-side rendering (also known as SSR) is the ability of a Javascript application to render the page server-side, rather than in the user’s browser”.

Major advantage

The major advantage it has over client-side only rendering is that it’s great for SEO and the first page load is faster.

Next.js is a popular framework that can be used for server-side rendering.

What’s the best choice

At last what’s the best choice. There is no best or worst approach! All approaches can be fine — it depends on what you are building.

Comparing Gatsby.js, Next.js and CRA (create react app) on the basis of their performance

Analyze the performance of your web-app

If you don’t know how to evaluate the performance of your web-app, then google chrome’s light house tool is for you. Lighthouse is an open source, automated tool for improving the quality of web pages. It tells you in every possible way that you could improve your web-app’s function performance, loading, SEO, accessibility, PWA (progressive web app).

How to use lighthouse tool

  • Start with opening incognito window as you probably have a lot of google chrome extensions or other things running in the background, those can drastically change the scores of your audits.
  • Go to developers tool, open up the audit tab right there, now this is Google’s light house tool running in the browser.
  • Right up at the top you can start by choosing what kind of device you want to run it on. If you choose mobile it will change the screen size to a mobile screen size and same case with desktop.
  • Underneath that you can choose kind of tests you want to run for and after that you have throttling, throttling is going to emulated slower device connection, if you choose simulated and applied you are going to get slower wifi.
  • Underneath that you have clear storage option, now this is going to emulate what’s is like when someone visit your page for the first time.
  • Hit the run audit button and its going.

After it’s done loading you are going to get the lighthouse report. At top it’s telling us how all your test did and everything about your web-app’s performance. Lighthouse tool is super easy to use and really helpful to determine the performance of your web app.

Happy coding 😊

--

--

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