Web performance is not a checklist of optimizations applied before launch. It is an architectural contract established in the very first commit.
When we engineered the digital presence for Bacancy and client platforms like Forma, our benchmark was uncompromising: zero layout shifts (CLS: 0), instantaneous First Contentful Paint (<0.4s), and total blocking time below 50ms across cellular connections worldwide.
Here is how modern Next.js 15 and React 19 architectures make this achievable at enterprise scale.
Partial Prerendering (PPR): The Best of Both Worlds
Historically, web engineering forced an architectural compromise:
- **Static Site Generation (SSG)**: Blazing fast initial loads served directly from edge CDN caches, but stale data and impossible personalisation. - **Server-Side Rendering (SSR)**: Completely fresh, personalized content, but penalized by cold server boots, database latency, and slower Time to First Byte (TTFB).
Next.js 15 Partial Prerendering resolves this dilemma. During the build phase, Next.js pre-generates a static shell containing the layout, navigation, hero headings, and structural cards.
When a user requests the page: 1. The CDN immediately delivers the static HTML shell in under 30ms. 2. Dynamic holes (such as personalized user data, real-time live metrics, or authentication states) are wrapped in React 19 `<Suspense>` boundaries and streamed over the same continuous HTTP/3 connection.
The result is instant perceptual loading with zero content flashes or cumulative layout shifts.
Eliminating Hydration Overhead with React Server Components
In legacy client-side frameworks, the browser downloaded megabytes of JavaScript, parsed it, and reconstructed the entire DOM hierarchy in client memory.
With React Server Components (RSC): - Data-fetching libraries, markdown compilers, date formatters, and utility functions execute entirely on the server. - The client receives pure, pre-rendered HTML along with a lightweight JSON wire protocol. - Only genuinely interactive leaf nodes (like our theme toggle button or interactive sliders) ship JavaScript to the user's browser.
By auditing component trees to keep client boundaries strictly at the visual leaves, we reduced client JavaScript bundles by over 68% compared to traditional React SPAs.
Stale-While-Revalidate at the Global Edge
For public data surfaces like case studies and technical articles, we combine edge middleware with granular `revalidateTag` calls.
Rather than invalidating whole URLs on content updates, we tag cache entries semantically: ```typescript fetch('https://api.bacancy.internal/v1/articles', { next: { tags: ['articles', 'engineering-hub'] } }) ```
When a new article is published or an errata is fixed, a webhook fires a revalidation trigger that purges only the relevant edge cache slices worldwide in milliseconds, ensuring that global readers always receive fresh content without ever waiting on a cold database query.