Forem: Aghiles Lounis

Why Next.js Beats React + Vite for SPAs (It’s Not Just About SEO)

Aghiles Lounis — Wed, 22 Jan 2025 10:37:57 +0000

Let’s debunk a persistent myth: Next.js isn’t just for SEO-obsessed marketing sites. Many teams assume React + Vite is better for single-page applications (SPAs) or highly interactive apps. But Next.js solves critical performance issues that React + Vite can’t address efficiently. Here’s why:

The Double Round-Trip Problem

How React + Vite Fails

In a typical React + Vite setup:

Client downloads JavaScript bundle first
Bundle parses → triggers client-side data fetching
User waits again for data → content renders

This creates a network waterfall:

Download JS → Parse JS → Fetch Data → Render.

Even with lazy loading:

// React + Vite lazy loading example
const Dashboard = lazy(() => import('./Dashboard'));

Client still fetches route JS first before data requests
Double round-trips persist for every lazy-loaded route

Next.js’s Server-Side Solution

// Next.js Server Component (zero client JS)
async function Dashboard() {
  const data = await fetchData(); // Server-side fetch
  return <Chart data={data} />;
}

Initial fetch on server: HTML + data sent in one round-trip
No client-side waterfalls: Server-rendered HTML arrives ready-to-display
Bundle size reduced by ~30-60% (server components don’t ship JS)

Streaming & Progressive Hydration

Wrap slow components in :

export default function Page() {
  return (
    <>
      <Header /> {/* Instantly visible */}
      <Suspense fallback={<SkeletonLoader />}>
        <Dashboard /> {/* Streams when ready */}
      </Suspense>
    </>
  );
}

Progressive loading: Users interact with static UI while dynamic parts load

Partial Prerendering (PPR) & Caching

// app/page.js
export const dynamicParams = false; // SSG for static parts
export const revalidate = 3600; // ISR every hour

async function DynamicSection() {
  const data = await fetchPersonalizedData(); // SSR
  return <UserProfile data={data} />;
}

Edge caching: Frequently accessed data stored at CDN edge nodes
RSC Payloads: Serialized server components cached between navigation

It means you're getting better: FCP, TTFB, TTI basically for FREE.

The Bottom Line

Next.js isn’t just a framework—it’s a performance-first architecture that rethinks how data and components load. Use it for almost any modern web app unless your environment strictly forbids server-side logic (like Chrome extensions). In those rare cases, React + Vite becomes the pragmatic choice.

TL;DR:

Next.js for 95% of web apps (better UX, performance, scalability, and much more...)
React + Vite in edge cases like Chrome extensions, embeddable widgets or ANY client-only execution environment

Found this helpful? Consider sharing it with your network! 🚀

A Simple Boilerplate for React.js Projects

Aghiles Lounis — Mon, 28 Dec 2020 18:42:38 +0000

Brief description

This boilerplate focuses on simplicity, speed and ability to choose a structure that fit your project, maybe you won't need if its a simple portfolio for example. This is a simple boilerplate for React.js projects with no specific structure, if you want a structured react boilerplate using typescript, i wrote a complete article about it https://bit.ly/2Mib1yJ

Files structure

Git clone: https://github.com/axibord/react-webpack-template

Supported features

Sass/Scss compilation and normal css is supported without any configuration (make sure to have local compiler for Sass on your computer)
The amazing TailwindcssV2 pre-configured with Postcss
Eslint with strict Airbnb style to enforce consistency and clean code
Code formatting using prettier
Using cutting edge Webpack 5 to compile everything

To run a build for production with minimal bundle size make sure to follow the steps in the repository.

Feel free to git clone the repository, play with it and tell me what you think and what need to be improved/added, make a pull request or reach out to me and have a discussion.

If you find this helpful, please follow my Twitter profile

Boilerplate for React-Typescript projects

Aghiles Lounis — Mon, 21 Dec 2020 06:41:24 +0000

Brief description

Starter for React projects following Atomic design structure, i found it clear and intuitive to use and works for most projects.

Files structure

If you are new and want to learn more about atomic design i suggest reading this blog post: https://medium.com/@WeAreMobile1st/atomic-design-getting-started-916bc81bad0e

Git clone here: https://github.com/axibord/react-typescript-starter

What is included in this boilerplate ?

Support for both JSX and TSX
Support for SASS/SCSS using sass-loader
Support for TailwindcssV2 with the help of postcss-loader
Strict linting with Eslint and Prettier configured for typescript
Finally everything is compiled with Webpack 5

To run a build for production with minimal bundle size possible make sure to follow the steps in the repository.

Future improvements

Support for scoped css and sass/scss in each component
Better Eslint rules by following Airbnb style for exemple
Improve tsconfig.json file for better compilation and debugging
Tslint instead of Eslint (not sure its an improvement)

If you find this helpful, please follow my Twitter profile

Feel free to git clone it and tell me what you think, if you have any suggestions and want to contribute just fork it and make a request or reach out to me.