React, Next.js or Flutter: Picking a Frontend

Frontend choices are usually argued in the abstract and decided by habit. It is a more tractable decision than it looks, because three questions settle most of it: does this need to rank on Google, does it need to run on a phone as an installed app, and how long does the team have to learn something new?

React for anything a person stares at all day

Dashboards, admin consoles, schedulers and back-office tools are stateful and long-lived. Users keep them open for hours and expect data to move without a page reload. React fits because the component model matches the way these interfaces are actually built: a table, a filter bar and a detail pane that all read from the same state.

It is worth being honest about the cost. React is a library, not a framework, so routing, forms, data fetching and state management are all decisions you have to make and then document. On internal tools that is acceptable, because search engines never see them and the first load happens once a day.

Next.js when the page has to be found

The moment a page needs to rank, be shared with a preview card, or load fast on a mid-range phone over patchy mobile data, server rendering stops being optional. Next.js renders on the server, ships less JavaScript, and gives you per-page control over what is static, what is cached and what is dynamic. Marketing sites, product catalogues, listings and content platforms belong here.

// Rendered on the server: crawlers get real HTML,
// and the page is cached and revalidated every 10 minutes.
export const revalidate = 600;

export default async function ServicePage({ params }) {
  const service = await getService(params.slug);

  return (
    <article>
      <h1>{service.title}</h1>
      <p>{service.summary}</p>
    </article>
  );
}

Flutter when it has to be an app

If the requirement involves an icon on a home screen, push notifications, a camera, offline use or a barcode scanner, you need a real app, and Flutter gives you Android and iOS from one codebase with genuinely native performance. Field-force apps, delivery apps and patient-facing apps are the usual cases.

What Flutter is not is a shortcut for a website. Building a marketing site in Flutter produces something that loads slowly and ranks badly.

"Ask where the user opens the screen. A browser tab, a search result and a home-screen icon are three different products, however similar the mockups look."

A note on Angular

Angular still makes sense in one situation, and it is a real one: a large team that wants opinions enforced rather than agreed. Everything from HTTP to forms to dependency injection ships in the box, so ten developers write code that looks the same. If your organisation already runs Angular, that consistency is worth more than a migration.