React frameworks

24 January 2022

This blog assumes you know React basics and web rendering strategies.

React frameworks are the frameworks that are built on top of React.

Why not use React?

React can only do Client-Side Rendering (CSR). You can set up Server-Side Rendering (SSR) and other rendering methods, but it's hard.

Pros

• Easiest

Cons

• No SSR and other rendering methods by default
• No code-splitting by default
• Have to use a routing library like React Router which is harder than file-based routing

Next.js

Pros

• Next.js provides ISR, SSG, SSR, and CSR on a per-page basis. (Next.js provides ISR, and Gatsby provides DSG. They are similar but have minor differences.)
• Can build a full-stack app using API Routes.
• File-based routing (When you add a file to the pages directory, it's available as a route.)
• Can optimize images using the Next.js Image Component.

Cons

• A bit harder than Create React App
• Doesn't have plugins like Gatsby

Gatsby

Before Gatsby version 4, it only provided SSG. For large sites, the build time was very long. Starting from Gatsby version 4, it is now like Next.js.

Pros

• Gatsby provides DSG, SSG, SSR, and CSR on a per-page basis. You can even mix build time data with SSR.
• Has many plugins which can save you time and energy.
• Includes GraphQL by default.
• Can optimize images using the Gatsby Image Plugin.

Cons

• A bit harder than Create React App

There're other React frameworks too, but they are not as popular.

What to use

For beginners, I recommend Create React App. Otherwise, I recommend Next.js.