Jeff Bruchado
Back to blog

Server-First Web Development: The New Architecture Dominating in 2025

The web development paradigm is changing radically. After years of Single Page Applications (SPAs) dominating the market, we're witnessing a return to the server - but not the old way. Server-First development combines the best of both worlds: the speed and SEO of the server with the interactivity of the client.

Next.js App Router, Astro Islands, SvelteKit, Qwik - all are betting on this architecture. But what exactly is Server-First and why should you care?

The Problem with Traditional SPAs

SPAs revolutionized the web, but brought serious problems:

1. Explosive Bundle Size

// Traditional SPA - All JavaScript sent to client
// Typical Create React App
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import App from './App';

// Resulting bundle: ~300-500kb just frameworks
// Before even your code!

const queryClient = new QueryClient();

ReactDOM.render(
  <QueryClientProvider client={queryClient}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </QueryClientProvider>,
  document.getElementById('root')
);

// Problem: User downloads JavaScript that could be HTML

2. Slow Loading Time

// Traditional SPA flow:
// 1. Download HTML (empty, just <div id="root"></div>)
// 2. Download JavaScript bundle (300kb+)
// 3. Parse JavaScript
// 4. Execute JavaScript
// 5. Fetch data from API
// 6. Render content
// Total: 3-5 seconds on 3G

// Server-First:
// 1. Download HTML (already with rendered content)
// 2. Download JavaScript (only interactivity, ~50kb)
// Total: 0.5-1 second

3. Problematic SEO

// Google bot sees this in poorly configured SPA:
<html>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
  </body>
</html>

// Zero content to index

What is Server-First?

Server-First means the server does the heavy lifting initially, sending ready HTML. JavaScript is added progressively only where needed for interactivity.

React Server Components (RSC)

The most ambitious implementation comes from React:

// app/blog/[slug]/page.jsx - React Server Component
// This code NEVER goes to the client
async function BlogPost({ params }) {
  // Direct database access on server
  const post = await db.posts.findUnique({
    where: { slug: params.slug },
    include: {
      author: true,
      comments: true
    }
  });

  // Fetch internal APIs
  const relatedPosts = await fetch(`${process.env.INTERNAL_API}/related/${post.id}`)
    .then(res => res.json());

  return (
    <article>
      <h1>{post.title}</h1>
      <AuthorCard author={post.author} />
      <div dangerouslySetInnerHTML={{ __html: post.content }} />

      {/* Client Component only where interactivity needed */}
      <LikeButton postId={post.id} initialLikes={post.likes} />

      <CommentList comments={post.comments} />

      <RelatedPosts posts={relatedPosts} />
    </article>
  );
}

export default BlogPost;

// Benefits:
// - Zero JavaScript for static content
// - Direct database access (no intermediate API)
// - Perfect SEO (complete HTML)
// - Incredible performance

Compare with traditional SPA:

// pages/blog/[slug].jsx - Traditional SPA
function BlogPost() {
  const { slug } = useParams();
  const [post, setPost] = useState(null);
  const [relatedPosts, setRelatedPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Everything on client, everything async
    async function fetchData() {
      const postData = await fetch(`/api/posts/${slug}`).then(r => r.json());
      const relatedData = await fetch(`/api/posts/${postData.id}/related`).then(r => r.json());

      setPost(postData);
      setRelatedPosts(relatedData);
      setLoading(false);
    }

    fetchData();
  }, [slug]);

  if (loading) return <div>Loading...</div>;

  return (
    <article>
      <h1>{post.title}</h1>
      <AuthorCard author={post.author} />
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
      <LikeButton postId={post.id} initialLikes={post.likes} />
      <CommentList comments={post.comments} />
      <RelatedPosts posts={relatedPosts} />
    </article>
  );
}

// Problems:
// - All code goes to client
// - Multiple async requests
// - Blank screen or initial loading
// - JavaScript needed even for static content

Islands Architecture (Astro)

Astro takes the approach to the extreme: zero JavaScript by default.

---
// pages/blog/[slug].astro
// Everything here runs on server
import { getPost, getRelatedPosts } from '../lib/db';
import LikeButton from '../components/LikeButton.svelte';
import CommentForm from '../components/CommentForm.react';

const { slug } = Astro.params;
const post = await getPost(slug);
const relatedPosts = await getRelatedPosts(post.id);
---

<article>
  <h1>{post.title}</h1>
  <p>By {post.author.name}</p>

  <!-- Static HTML, zero JavaScript -->
  <div set:html={post.content} />

  <!-- "Island" - JavaScript only here -->
  <LikeButton client:visible postId={post.id} initialLikes={post.likes} />

  <!-- Another "Island" - different framework! -->
  <CommentForm client:idle postId={post.id} />

  <!-- Static list, no JavaScript -->
  <ul>
    {relatedPosts.map(related => (
      <li><a href={`/blog/${related.slug}`}>{related.title}</a></li>
    ))}
  </ul>
</article>

<!-- Result:
     - Complete HTML sent
     - JavaScript ONLY for LikeButton and CommentForm
     - Rest is pure HTML
     - Can mix frameworks (Svelte + React + Vue)
-->

Astro hydration directives are powerful:

<!-- client:load - Hydrates immediately -->
<HeavyComponent client:load />

<!-- client:idle - Hydrates when browser idle -->
<Newsletter client:idle />

<!-- client:visible - Hydrates when visible in viewport -->
<LazyVideo client:visible />

<!-- client:media - Hydrates based on media query -->
<MobileMenu client:media="(max-width: 768px)" />

<!-- client:only - Never renders on server -->
<ClientOnlyWidget client:only="react" />

server first architecture

SvelteKit - Progressive by Nature

SvelteKit offers full flexibility:

// +page.server.js - Runs on server
export async function load({ params }) {
  const post = await db.post.findUnique({
    where: { slug: params.slug }
  });

  return {
    post
  };
}

// +page.svelte - Component
<script>
  export let data;

  // Code here runs on server AND client
  $: post = data.post;

  // Client interactivity
  let likes = post.likes;

  async function handleLike() {
    likes += 1;
    await fetch(`/api/posts/${post.id}/like`, { method: 'POST' });
  }
</script>

<article>
  <h1>{post.title}</h1>
  <div>{@html post.content}</div>

  <button on:click={handleLike}>
    ❤️ {likes}
  </button>
</article>

<!-- Svelte compiles to minimal JavaScript
     No Virtual DOM overhead
     Interactivity with tiny bundle
-->

Real Performance Comparison

I tested the same applications (blog with 50 posts) in different architectures:

Time to First Byte (TTFB)

# SPA (Create React App)
TTFB: 120ms (empty HTML)
First Contentful Paint: 2800ms

# Next.js App Router (RSC)
TTFB: 180ms (complete HTML)
First Contentful Paint: 220ms

# Astro (Islands)
TTFB: 95ms (complete HTML)
First Contentful Paint: 150ms

# SvelteKit
TTFB: 110ms (complete HTML)
First Contentful Paint: 180ms

JavaScript Bundle Size

# Traditional SPA
Initial: 347kb (gzipped)
Total: 892kb (after code splitting)

# Next.js App Router
Initial: 89kb (hydration only)
Total: 234kb (with all islands)

# Astro
Initial: 12kb (only necessary islands)
Total: 67kb (progressive hydration)

# SvelteKit
Initial: 34kb (minimal runtime)
Total: 123kb (optimized compiled)

Implementing Server-First in Existing Project

Gradual Migration: Next.js Pages → App Router

// 1. Install Next.js 14+
npm install next@latest react@latest react-dom@latest

// 2. Create app/ folder next to pages/
// Both coexist during migration

// 3. Migrate route by route

// pages/blog/[slug].jsx - Old
export async function getServerSideProps({ params }) {
  const post = await fetchPost(params.slug);
  return { props: { post } };
}

export default function BlogPost({ post }) {
  return <article>{post.title}</article>;
}

// app/blog/[slug]/page.jsx - New (RSC)
async function BlogPost({ params }) {
  const post = await fetchPost(params.slug);
  return <article>{post.title}</article>;
}

export default BlogPost;

// 4. Identify components that need interactivity

// app/blog/[slug]/like-button.jsx
'use client'; // Client Component directive

import { useState } from 'react';

export function LikeButton({ postId, initialLikes }) {
  const [likes, setLikes] = useState(initialLikes);

  async function handleLike() {
    setLikes(likes + 1);
    await fetch(`/api/posts/${postId}/like`, { method: 'POST' });
  }

  return <button onClick={handleLike}>❤️ {likes}</button>;
}

// 5. Use Client Components only where necessary

// app/blog/[slug]/page.jsx
import { LikeButton } from './like-button';

async function BlogPost({ params }) {
  const post = await fetchPost(params.slug);

  return (
    <article>
      {/* Server Component - no JavaScript */}
      <h1>{post.title}</h1>
      <div>{post.content}</div>

      {/* Client Component - minimal JavaScript */}
      <LikeButton postId={post.id} initialLikes={post.likes} />
    </article>
  );
}

Cache and Revalidation Strategies

// Next.js App Router - Cache strategies

// 1. Static Generation (generated at build)
export default async function StaticPage() {
  const data = await fetch('https://api.example.com/data');
  return <div>{JSON.stringify(data)}</div>;
}

// 2. Revalidation with ISR (Incremental Static Regeneration)
export default async function ISRPage() {
  const data = await fetch('https://api.example.com/data', {
    next: { revalidate: 3600 } // Revalidate every 1 hour
  });
  return <div>{JSON.stringify(data)}</div>;
}

// 3. Dynamic data (no cache)
export default async function DynamicPage() {
  const data = await fetch('https://api.example.com/data', {
    cache: 'no-store'
  });
  return <div>{JSON.stringify(data)}</div>;
}

// 4. Cache with tags (on-demand revalidation)
export default async function TaggedPage() {
  const data = await fetch('https://api.example.com/data', {
    next: { tags: ['posts'] }
  });
  return <div>{JSON.stringify(data)}</div>;
}

// Revalidate via API route
export async function POST(request) {
  revalidateTag('posts'); // Invalidates all pages with 'posts' tag
  return Response.json({ revalidated: true });
}

Use Cases: When to Use Server-First?

Ideal For:

  1. Content-heavy sites: Blogs, documentation, e-commerce
  2. Critical SEO: Sites that depend on organic traffic
  3. Mobile performance: Users on slow networks
  4. Sensitive data: Business logic that shouldn't expose to client
// Example: Dashboard with sensitive data
async function AdminDashboard() {
  // Runs on server, never exposes credentials
  const users = await db.user.findMany({
    where: { role: 'ADMIN' },
    include: { permissions: true }
  });

  // Filters and sensitive logic on server
  const sensitiveMetrics = calculateMetrics(users);

  return (
    <div>
      <h1>Admin Dashboard</h1>
      {/* Data already processed, client doesn't see logic */}
      <MetricsDisplay data={sensitiveMetrics} />
    </div>
  );
}

Avoid For:

  1. Highly interactive applications: Games, editors, real-time dashboards
  2. Offline-first apps: Apps that need to work without connection
  3. Client-heavy logic: Drawing tools, complex calculators
// SPA still makes sense here
function InteractiveCanvas() {
  const [drawing, setDrawing] = useState([]);
  const canvasRef = useRef();

  // All logic needs to be on client
  const handleMouseMove = (e) => {
    // Process movement in real-time
    setDrawing(prev => [...prev, { x: e.clientX, y: e.clientY }]);
  };

  return <canvas ref={canvasRef} onMouseMove={handleMouseMove} />;
}

// Server-First adds no value here

The Future: Resumability (Qwik)

Qwik takes Server-First to the next level with "Resumability":

// Qwik doesn't hydrate, it "resumes"
// Zero JavaScript executed on initial load

import { component$, useSignal } from '@builder.io/qwik';

export default component$(() => {
  const count = useSignal(0);

  return (
    <div>
      <h1>Count: {count.value}</h1>
      {/* JavaScript downloaded ONLY when user clicks */}
      <button onClick$={() => count.value++}>
        Increment
      </button>
    </div>
  );
});

// Benefit: 0ms Time to Interactive
// Disadvantage: Ecosystem still immature

If you want to master modern architectures and build performant applications, I recommend: Modern Web Application Architecture where I explore advanced patterns and practices.

📚 Want to Deepen Your JavaScript Knowledge?

This article covered server-first architectures, but there's much more to explore in modern development.

Developers who invest in solid, structured knowledge tend to have more opportunities in the market.

Complete Study Material

If you want to master JavaScript from basics to advanced, I've prepared a complete guide:

Investment options:

  • $4.90 (single payment)

👉 Learn About JavaScript Guide

💡 Material updated with industry best practices

Comments (0)

This article has no comments yet 😢. Be the first! 🚀🦅

Add comments