Web Rendering

Multi-Page Applications (MPA)

MPAs reload the page on every navigation.

Pros:

Simple architecture.
Full HTML is delivered on first load.
When pages are mostly static, they can be effectively cached and delivered by a CDN.

Cons:

Navigation is slower due to full page reloads.
Dynamic updates require complete page refreshes.

Single-Page Applications (SPA)

SPAs load content dynamically on the client. This means the initial HTML is essentially empty.

Diagram
React Diagram
Code

function App() {
  const [data, setData] = React.useState(null);
  const [query, setQuery] = React.useState("default");
  const [input, setInput] = React.useState("default");
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    setLoading(true);
    fetch(
      `https://api.example.com/data?query=${encodeURIComponent(query)}`
    )
      .then((response) => response.json())
      .then((result) => {
        setData(result);
        setLoading(false);
      })
      .catch((error) => {
        console.error(error);
        setLoading(false);
      });
  }, [query]);

  const handleSubmit = (e) => {
    e.preventDefault();
    setQuery(input);
  };

  return (
    <div>
      <h1>Data Fetch Tutorial</h1>
      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Enter query"
        />
        <button type="submit">Search</button>
      </form>
      {loading ? (
        <p>Loading data...</p>
      ) : (
        <pre>{JSON.stringify(data, null, 2)}</pre>
      )}
    </div>
  );
}

const DataContext = React.createContext();

function DataProvider({ children }) {
  const [data, setData] = React.useState(null);
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState(null);
  const [query, setQuery] = React.useState("default");

  React.useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;

    async function fetchData() {
      setLoading(true);
      setError(null);
      try {
        const response = await fetch(
          `https://api.example.com/data?query=${encodeURIComponent(query)}`,
          { signal }
        );
        if (!response.ok) throw new Error("Network response was not ok");
        const result = await response.json();
        const processedData = result.map((item) => ({
          ...item,
          processed: true,
        }));
        setData(processedData);
      } catch (err) {
        if (err.name !== "AbortError") setError(err);
      } finally {
        setLoading(false);
      }
    }
    fetchData();
    return () => controller.abort();
  }, [query]);

  return (
    <DataContext.Provider value={{ data, loading, error, query, setQuery }}>
      {children}
    </DataContext.Provider>
  );
}

function DisplayData() {
  const { data, loading, error, query, setQuery } = React.useContext(
    DataContext
  );
  const [input, setInput] = React.useState(query);

  const handleSubmit = (e) => {
    e.preventDefault();
    setQuery(input);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Enter query"
        />
        <button type="submit">Search</button>
      </form>
      {loading && <p>Loading data...</p>}
      {error && <p>Error: {error.message}</p>}
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
}

function App() {
  return (
    <DataProvider>
      <h1>Advanced SPA Data Fetching Example</h1>
      <DisplayData />
    </DataProvider>
  );
}

function DataComponent({ query }) {
  const { data, isLoading, error } = useQuery(
    ["fetchData", query],
    () =>
      fetch(
        `https://api.example.com/data?query=${encodeURIComponent(query)}`
      ).then((res) => res.json())
  );
  if (isLoading) return <p>Loading with React Query...</p>;
  if (error) return <p>Error loading data</p>;
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

function App() {
  const [query, setQuery] = React.useState("default");
  const [input, setInput] = React.useState("default");

  const handleSubmit = (e) => {
    e.preventDefault();
    setQuery(input);
  };

  return (
    <div>
      <h1>SPA using React Query</h1>
      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Enter query"
        />
        <button type="submit">Search</button>
      </form>
      <DataComponent query={query} />
    </div>
  );
}

Pros:

Fast in-page navigation.
Dynamic interactivity.

Cons:

Minimal initial HTML.
Heavy reliance on client-side JavaScript.

SPA-influenced Isomorphic

Initial HTML is rendered on the server for SEO and fast first paint, then hydrated on the client to enable interactivity.

Diagram
React Diagram
Code

export const metadata = {
  title: "SPA-influenced Isomorphic Rendering Example",
  description: "An isomorphic rendering example with SEO metadata.",
  keywords: "rendering, isomorphic, react, SEO, server components",
};

// Assume MutationManager is dynamically imported for client-side behavior.
export default async function Page({ searchParams }) {
  const query = searchParams.query || "default";
  const res = await fetch(
    `https://api.example.com/data?query=${encodeURIComponent(query)}`,
    { cache: "force-cache" }
  );
  const data = await res.json();
  return (
    <div>
      <h1>Isomorphic Page - Results for: {query}</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
      <MutationManager />
    </div>
  );
}

export default function Loading() {
  return <p>Loading...</p>;
}

"use client";
export default function Error({ error, reset }) {
  return (
    <div>
      <h1>Error Loading Page</h1>
      <p>{error.message}</p>
      <button onClick={reset}>Try again</button>
    </div>
  );
}

"use client";
import { useState } from "react";
import { useMutation, useQueryClient } from "react-query";

async function updateData(newValue) {
  const res = await fetch("/api/update", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ value: newValue }),
  });
  if (!res.ok) throw new Error("Update failed");
  return res.json();
}

export default function MutationManager() {
  const [input, setInput] = useState("");
  const queryClient = useQueryClient();
  const mutation = useMutation(updateData, {
    onSuccess: () => queryClient.invalidateQueries("fetchData"),
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    mutation.mutate(input);
  };

  if (mutation.error) {
    return (
      <div>
        <p>Error updating data.</p>
      </div>
    );
  }

  if (mutation.isLoading) {
    return (
      <div>
        <p>Updating...</p>
      </div>
    );
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Enter new value"
        />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

Pros:

SEO-friendly full HTML is delivered initially.

Cons:

Requires coordination between client and server.
More complex setup.

MPA-influenced Split Execution

Mostly/Fully HTML rendered on the server using server actions.

Diagram
React Diagram
Code

export const metadata = {
  title: "Server-Rendered Page with Actions",
  description:
    "A server-rendered page that handles mutations using server actions and revalidates paths.",
  keywords: "rendering, server actions, Next.js, MPA",
};

export default async function Page({ searchParams }) {
  const query = searchParams.query || "default";
  const res = await fetch(
    `https://api.example.com/data?query=${encodeURIComponent(query)}`,
    { cache: "force-cache" }
  );
  const data = await res.json();

  async function handleMutation(formData) {
    "use server";
    const res = await fetch("https://api.example.com/update", {
      method: "POST",
      body: formData,
    });
    revalidatePath("/");
  }

  return (
    <div>
      <h1>Server-Rendered Page with Actions</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
      <ErrorBoundary fallback={<p>Error updating data.</p>}>
        <Suspense fallback={<p>Updating...</p>}>|
          <form action={handleMutation}>
            <input name="value" type="text" />
            <button type="submit">Submit</button>
          </form>
        </Suspense>
      </ErrorBoundary>
    </div>
  );
}

export default function Loading() {
  return <p>Loading...</p>;
}

"use client";
export default function Error({ error, reset }) {
  return (
    <div>
      <h1>Error Loading Page</h1>
      <p>{error.message}</p>
      <button onClick={reset}>Try again</button>
    </div>
  );
}

Pros:

CDN-friendly HTML delivery.
Minimal client-side code.
Excellent SEO.

Cons:

Client-side interactivity may require additional handling.
Increased server CPU consumption.

📊 Rendering Strategy Comparison

Property	MPA	SPA	SPA Isomorphic	MPA Split Execution
SEO Friendly	✅	❌	✅	✅
Fast Navigation	❌	✅	✅	✅
Interactive Experience	❌	✅	✅	✅
CDN Friendly	✅	❌	✅	✅
Simple Architecture	✅	❌	❌	✅
Lightweight Client JS	✅	❌	✅	✅
Low CPU Usage	❌	✅	✅	❌
Low Server Costs	❌	✅	❌	✅

🚀 Live Example: NextFaster

To see these rendering strategies in action, check out NextFaster — a real-world project that blends server components, React islands, and split execution for optimal performance and SEO.

What makes NextFaster interesting?

⚙️ React Server Components with minimal client-side JS
🔄 Server Actions and Edge revalidation
💸 Exceptionally low hosting cost while high performance
🔍 Excellent SEO and performance balance

Ideal for studying modern rendering techniques in Next.js 14+ with App Router.

📺 Recommended Videos

Comparing Data Fetching Strategies

Why I don't use React-Query and tRPC in Next.js

Watch on YouTube

Data Loading in Next.js 15

Watch on YouTube

Why Server Components Matter

React Server Components Change Everything

Watch on YouTube

SSR vs CSR: SEO Pitfalls

Server Side Rendering Vs. Client Side Rendering. SEO Pitfalls!

Watch on YouTube

📚 Further Reading

🧠 Final Thoughts

Each rendering strategy has its strengths. MPAs are straightforward and, when mostly static, can be effectively cached via a CDN; SPAs deliver dynamic interactivity entirely on the client (resulting in minimal initial HTML); SPA-influenced Isomorphic approaches combine SEO and dynamic updates by server-rendering the initial HTML and hydrating on the client; and MPA influenced Split Execution offers performance with server-handled mutations using server actions.

Guides & Best Practices

MappTech Standards

Articles & Talks

Tutorials & Guides

Multi-Page Applications (MPA)

Single-Page Applications (SPA)

SPA-influenced Isomorphic

MPA-influenced Split Execution

📊 Rendering Strategy Comparison

🚀 Live Example: NextFaster

📺 Recommended Videos

Comparing Data Fetching Strategies

Data Loading in Next.js 15

Why Server Components Matter

SSR vs CSR: SEO Pitfalls

📚 Further Reading

🧠 Final Thoughts

​Multi-Page Applications (MPA)

​Single-Page Applications (SPA)

​SPA-influenced Isomorphic

​MPA-influenced Split Execution

​📊 Rendering Strategy Comparison

​🚀 Live Example: NextFaster

​📺 Recommended Videos

Comparing Data Fetching Strategies

Data Loading in Next.js 15

Why Server Components Matter

SSR vs CSR: SEO Pitfalls

​📚 Further Reading

​🧠 Final Thoughts

Multi-Page Applications (MPA)

Single-Page Applications (SPA)

SPA-influenced Isomorphic

MPA-influenced Split Execution

📊 Rendering Strategy Comparison

🚀 Live Example: NextFaster

📺 Recommended Videos

📚 Further Reading

🧠 Final Thoughts