Introducing

Do we seriously need React Frameworks ?

Recently i had an opportunity to start a new React project from scratch at my team at Linkedin, so i hopped onto React official documentation and to my surprise Create React App was missing in getting started blog by React team, instead it is been suggested to use a React Frameworks like Next js, Remix or Gatsby.

• React is unopnionated

  React is often described as un-opinionated, meaning it does not enforce strict guidelines or impose a specific way of structuring code. Instead, it provides developers with the flexibility to choose their preferred tools, libraries, and architectural patterns based on the requirements of their projects. It relies on a lot of libraries for state management, data fetching, routing, linting and testing. This un-opinionated nature of React might look good for hobby projects as it will give you more freedom, but when it comes to creating a production ready application you might spend time evaluating which libraries to pick and choose, onboarding new members to a non standardized react project might take longer

  But most importantly as a developer, we would want to spend less time evaluating and managing dependencies and focus more on implementation, while still taking advantage of these latest advancements.Teams utilizing React frameworks can prioritize the development of components and business logic while relying on proven open-source solutions. Frameworks would make a lot of these decisions for you, as well as provide you with tools and components to solve common problems on the web.

• Improved Asset and Data Loading

  Performance is not just related to rendering solutions but also to the way your application loads assets and data from the server and how much of these requests can be parallelized. Alot of our React applications succumb to it.

  The network waterfall effect refers to a series of sequential network requests that can significantly degrade user experience, especially on slow networks or devices. In a traditional React application without a framework like Remix, the process typically involves sending a basic HTML file along with multiple JavaScript bundles to the client browser. These JavaScript bundles then recreate the required HTML and render it on the client browser. During this rendering process, a component might realize it needs additional data or another assets from the server, triggering another server request. This can lead to a chain of network requests, where each request depends on the completion of the previous one, resulting in multiple round trips to the server. Here is an interesting blog if you interested to know more about it google-needs-9x-more-time-to-crawl-js-than-html

  For the first page request Remix generates all the required HTML on the server by fetching all the required data and assets on the server and just sends the final HTML to the user. For subsequent pages (when user is navigated to another page) Remix knows all the dependencies for a page (JavaScript modules, data, CSS) just from the URL, allowing it to run all queries and load resources in parallel.This approach eliminates the need for multiple round trips and reduces the dependency on the clients network speed. This design significantly improves performance and user experience by minimizing the network waterfall effect.

• Want to design for scale?

  React performs client side rendering, which means its calculates the final rendered html by fetching assets (css, js files etc) and data on client side. Client side rendering is not a preferred option for users with limited network bandwidth or lower end devices. Even for better SEO ranking, Client side rendering is not preferred since there are few search engine crawlers like Baidu and Yandex are still not indexing client side rendered websites well. Even for Google, indexing of Client side rendered websites takes a lot of time. Here is a blog which says that google took 36 hours to index a static site whereas client side rendered similar site took 313 hours, such indexing delays might be crucial for some use cases.

  In such scenarios developers tend to resort to Server Side Rendering (SSR), Static Site Generation (SSG) or React Server Components. I think explaining the difference between all of them and how it helps in performance, deserves its own blog. NextJs and Remix both support SSG and SSR out of the box. Currently NextJs is the only framework to support React Server Components.