Ultra-Fast websites with modern frameworks: Next.js, astro, and remix

Performance is no longer a nice-to-have for B2B websites — it is a direct revenue driver. Google's Core Web Vitals are a confirmed ranking factor, and research from Portent shows that a site loading in one second converts three times better than one loading in five seconds. For businesses investing in their web presence, choosing the right rendering framework is one of the highest-leverage decisions a development team can make.

Next.js, Astro, and Remix represent three distinct philosophies for building fast, modern web experiences. Each solves the performance problem differently, and understanding those differences is essential before committing to a stack.

Why Traditional WordPress and Static Sites Are No Longer Enough

For years, the web development landscape for B2B companies was fairly binary: either a WordPress site with a page builder, or a fully static HTML/CSS site. Both approaches have served their purpose, but neither is optimized for the performance and developer experience demands of 2024 and beyond.

The WordPress Performance Ceiling

WordPress powers over 43% of all websites on the internet, and for good reason — it offers unmatched flexibility, a vast plugin ecosystem, and a content management experience that non-technical teams can navigate without training. However, WordPress has a structural performance ceiling that is difficult to overcome without significant engineering investment.

The default WordPress rendering model is server-side PHP, meaning every page request triggers a database query, PHP execution, and HTML assembly. Even with aggressive caching layers like WP Rocket or Redis, a WordPress site is fighting against its own architecture to achieve sub-second load times. Add WooCommerce, ACF, and a handful of plugins, and Time to First Byte (TTFB) frequently climbs above 400ms before a single byte of CSS is parsed.

The Limits of Pure Static Sites

On the opposite end, fully static sites built with older generators like Jekyll or basic HTML are fast — but brittle. They cannot handle personalization, real-time data, authenticated user states, or dynamic content without bolting on JavaScript-heavy client-side solutions that negate the performance gains. For B2B companies with product catalogs, gated content, or client portals, a purely static approach is architecturally insufficient.

What Modern Frameworks Actually Solve

Next.js, Astro, and Remix sit in a purpose-built middle ground. They offer:

• Granular rendering control — choose between static generation, server-side rendering, or client-side rendering on a per-route or per-component basis
• Edge-ready deployment — native support for Vercel, Netlify Edge, and Cloudflare Workers, putting responses physically closer to users
• JavaScript optimization — techniques like code splitting, tree shaking, and partial hydration reduce the amount of JavaScript shipped to the browser
• Built-in image and font optimization — automatic lazy loading, modern format conversion (WebP, AVIF), and font subsetting without manual configuration
• Developer experience — hot module replacement, TypeScript-first APIs, and file-based routing reduce the time between writing code and seeing results

For B2B development agencies, these capabilities translate directly into faster project delivery, more predictable performance budgets, and sites that score in the 90+ range on Google PageSpeed without heroic optimization efforts.

Next.js: The Enterprise Default for React Applications

Next.js, maintained by Vercel, has become the de facto standard for production React applications that require both performance and flexibility. Its adoption among Fortune 500 companies and high-traffic SaaS products is not accidental — it is the result of a framework that genuinely solves enterprise-scale problems.

Rendering Strategies in Next.js

The most powerful feature of Next.js is its hybrid rendering model. Within a single application, different pages can use different rendering strategies:

// Static Site Generation (SSG) — rendered at build time
export async function getStaticProps() {
  const data = await fetchProductCatalog();
  return { props: { data }, revalidate: 3600 };
}

// Server-Side Rendering (SSR) — rendered on each request
export async function getServerSideProps(context) {
  const user = await getAuthenticatedUser(context.req);
  return { props: { user } };
}

With the App Router introduced in Next.js 13, this model became even more granular. React Server Components allow developers to render components on the server with zero client-side JavaScript overhead, while Client Components handle interactivity only where needed. The result is dramatically smaller JavaScript bundles.

Next.js and the App Router Architecture

The App Router uses a file-system-based routing convention that maps directory structure to URL paths. Layouts, loading states, error boundaries, and streaming are all first-class primitives:

app/
  layout.tsx          → root layout, shared across all routes
  page.tsx            → homepage
  products/
    layout.tsx        → products section layout
    page.tsx          → /products
    [slug]/
      page.tsx        → /products/[slug] dynamic route

This architecture enables Partial Prerendering (PPR), currently in experimental release, which allows a page to serve a static shell instantly from the CDN edge while streaming dynamic content into placeholders — achieving the best of both static and dynamic rendering simultaneously.

When to Choose Next.js for B2B Projects

Next.js is the right choice when:

• The project requires complex authentication flows and user-specific data
• The team is already working in React and wants to avoid a context switch
• The client needs an integrated CMS experience via headless WordPress, Contentful, or Sanity
• The application includes e-commerce functionality with real-time inventory and personalized pricing
• API routes are needed within the same codebase, reducing infrastructure complexity

For B2B SaaS landing pages, marketing sites with a CMS backend, and client portals, Next.js delivers consistent 90+ Lighthouse scores when architected correctly — and its ecosystem maturity means solutions to edge cases are well-documented.

Astro: The Performance-First Framework for Content-Driven Sites

Astro takes a fundamentally different approach to performance. Where Next.js optimizes React's rendering model, Astro starts from the premise that most web pages do not need JavaScript at all — and ships none by default.

Islands Architecture Explained

Astro's signature innovation is the Islands Architecture, a pattern where the majority of a page is rendered as static HTML, and interactive components — called islands — are hydrated independently and only when necessary.

---
// This component runs only on the server
import HeroSection from '../components/HeroSection.astro';
import InteractiveCalculator from '../components/Calculator.jsx';
import TestimonialSlider from '../components/Slider.svelte';
---

<HeroSection title="Enterprise Solutions" />

<!-- This island hydrates only when visible in the viewport -->
<InteractiveCalculator client:visible />

<!-- This island hydrates immediately on page load -->
<TestimonialSlider client:load />

The client: directives give developers precise control over when and how JavaScript is loaded. client:idle waits until the browser is idle. client:media hydrates only when a CSS media query matches. This granularity is unmatched in any other framework.

Framework Agnosticism as a Business Advantage

Astro's component model is framework-agnostic. A single Astro project can render React, Vue, Svelte, Solid, and Preact components side by side. For agencies working with multiple client teams or inheriting legacy codebases, this flexibility eliminates the all-or-nothing migration problem. A team can migrate a WordPress site to Astro incrementally, replacing high-traffic pages first while keeping existing component libraries intact.

Astro also ships with first-class support for:

• Content Collections — a type-safe API for managing Markdown and MDX content with schema validation
• View Transitions — native page transition animations without a single line of custom JavaScript
• Image optimization — automatic format conversion, lazy loading, and responsive srcset generation
• SSR mode — for pages that require server-side logic, Astro can switch individual routes to SSR while keeping the rest static

Real-World Performance Numbers

Astro sites routinely achieve Total Blocking Time (TBT) scores of 0ms on content pages because there is no JavaScript to block the main thread. Largest Contentful Paint (LCP) times under 1.2 seconds are achievable without a CDN on modest hosting. For B2B marketing sites, documentation portals, and landing page campaigns where conversion rate is directly tied to performance, Astro's zero-JS-by-default philosophy produces measurable business results.

Astro is the right choice when:

• The site is primarily content-driven — blogs, documentation, marketing pages, case studies
• SEO performance is a primary business objective
• The team wants to use multiple UI frameworks without committing to one
• The client is migrating away from a slow WordPress site and needs a dramatic performance improvement quickly
• Budget constraints require maximizing performance per engineering hour invested

Remix: Full-Stack Web Standards for Dynamic Applications

Remix, acquired by Shopify in 2022, represents a third philosophy: rather than abstracting away web fundamentals, it embraces and enhances them. Remix is built on top of the Web Fetch API and works with native browser behaviors — forms, HTTP semantics, progressive enhancement — rather than replacing them with JavaScript abstractions.

Nested Routing and Parallel Data Loading

Remix's most distinctive architectural feature is its nested routing system. Routes in Remix are not just URL segments — they are UI components that own their own data loading, error handling, and mutation logic. When multiple route segments are active simultaneously (a common pattern in dashboard UIs), Remix loads their data in parallel rather than in sequence.

// routes/dashboard.tsx — loads user data
export async function loader({ request }) {
  const user = await requireUser(request);
  return json({ user });
}

// routes/dashboard.analytics.tsx — loads analytics in parallel
export async function loader({ request }) {
  const metrics = await getMetrics();
  return json({ metrics });
}

This parallel loading eliminates the waterfall data fetching problem that plagues single-page applications. In a traditional React SPA, a dashboard might make sequential API calls — first fetch the user, then fetch the user's organization, then fetch the organization's data. Remix resolves all of these simultaneously, reducing perceived load time significantly.

Progressive Enhancement and Form Handling

Remix's <Form> component and action functions work with or without JavaScript. A Remix form submits correctly even if the user's JavaScript fails to load, because Remix generates standard HTML form actions that the server handles natively. When JavaScript is available, Remix intercepts the submission and handles it as a fetch request, providing optimistic UI updates.

This approach has concrete business implications for B2B applications:

• Forms in low-connectivity environments (trade shows, remote offices) continue to function
• Accessibility compliance is simpler because the underlying HTML is semantically correct
• Server-side validation is the default, reducing the surface area for client-side manipulation

Error Boundaries and Resilience

Remix's nested routing model means error boundaries are also nested. If a data loader for a secondary panel on a dashboard fails, only that panel renders an error state — the rest of the page continues to function normally. This granular error isolation is a significant reliability advantage in complex B2B applications where partial failures are common.

export function ErrorBoundary() {
  const error = useRouteError();
  return (
    <div className="error-panel">
      <p>Analytics data unavailable. Other features remain active.</p>
    </div>
  );
}

Remix is the right choice when:

• The application involves complex user interactions, mutations, and real-time state
• Progressive enhancement and accessibility are non-negotiable requirements
• The team values web standards and wants to reduce framework-specific abstractions
• The project involves multi-step forms, shopping workflows, or transactional interfaces
• Shopify Hydrogen is in scope — Remix is the foundation of Shopify's headless commerce framework

Choosing the Right Framework for Your B2B Project

The decision between Next.js, Astro, and Remix is not about which framework is objectively best — it is about which framework's strengths align with your project's primary constraints and goals. A useful mental model is to categorize projects by their dominant characteristic:

Decision Framework by Project Type

Performance Benchmarks to Set Client Expectations

When scoping a project using any of these frameworks, the following performance targets are realistic and should be written into the project brief:

• Lighthouse Performance Score: 90+ on mobile, 95+ on desktop
• Largest Contentful Paint (LCP): under 2.5 seconds on a 4G connection
• Total Blocking Time (TBT): under 200ms
• Cumulative Layout Shift (CLS): under 0.1
• Time to First Byte (TTFB): under 200ms with edge deployment

These are not aspirational targets — they are achievable defaults when the framework is chosen correctly and the architecture is not compromised by unnecessary third-party scripts.

Infrastructure Considerations

All three frameworks deploy natively to Vercel, Netlify, and Cloudflare Pages. For B2B clients with compliance requirements around data residency, Remix's standard Web API compatibility makes it the most portable — it runs on Cloudflare Workers, Deno Deploy, and traditional Node.js servers without modification. Next.js and Astro both support self-hosted Node.js deployments as well, though some edge-specific features require platform-managed infrastructure.

For agencies managing multiple client sites, a standardized deployment pipeline using one primary framework reduces operational overhead. Establishing Next.js as the agency default for application projects and Astro as the default for marketing sites covers the majority of B2B use cases without requiring teams to context-switch between three different mental models simultaneously.