How We Optimized Next.js App Router for Sub-Second Loading

Speed is a feature. In modern web commerce, a 100ms delay in response time can drop customer conversion rates by 7%. When building rsio.in and our client applications, we set a strict limit of under 1 second for Time to Interactive (TTI). Here is how we achieved it using the Next.js App Router.

1. Leveraged Server Components (RSC) By Default By building pages as React Server Components, we keep the bulk of our dependencies on the server. The client browser receives pre-rendered HTML with zero JavaScript overhead for standard layouts. Client files like headers, cards, and calculators are marked with "use client" only when interaction is required.

2. Implemented Aggressive Image Optimization Large unoptimized image assets are the number one cause of layout shift and page bloat. We use the Next.js <Image /> component combined with a global CDN. We specify strict sizes and use WebP compression to ensure assets stay under 80KB.

3. Dynamic Cache Revalidation Rather than building entirely static sites or querying databases on every request, we use incremental static regeneration (ISR). By revalidating pages every 10 minutes, users get instant static files, and updates populate automatically without slow rebuilds.

1. Leveraged Server Components (RSC) By Default By building pages as React Server Components, we keep the bulk of our dependencies on the server. The client browser receives pre-rendered HTML with zero JavaScript overhead for standard layouts. Client files like headers, cards, and calculators are marked with "use client" only when interaction is required.

2. Implemented Aggressive Image Optimization Large unoptimized image assets are the number one cause of layout shift and page bloat. We use the Next.js <Image /> component combined with a global CDN. We specify strict sizes and use WebP compression to ensure assets stay under 80KB.

3. Dynamic Cache Revalidation Rather than building entirely static sites or querying databases on every request, we use incremental static regeneration (ISR). By revalidating pages every 10 minutes, users get instant static files, and updates populate automatically without slow rebuilds.