From Garden Shop to Web Apps

The Beginning: A Gardener with a Vision

Imagine you own a small garden shop. Every day, people visit you for plants — some want instant pick-ups, others want something fresh, and a few enjoy growing plants themselves.

You quickly realize:
How you deliver plants makes a big difference in customer happiness.

Similarly, when building websites with Next.js, how you deliver content to visitors is crucial. Developers refer to these strategies as CSR, SSR, SSG, and ISR. But in your garden shop, they’re just different ways of handing over plants.

---

CSR — “Do-It-Yourself Plant Kits”

In the garden, you give customers soil, seeds, and a pot, and they grow the plant themselves.

On the web, the server sends only a blank page + JavaScript, and the browser builds everything.

// pages/dashboard.js (CSR in Next.js)
import { useEffect, useState } from "react";

export default function Dashboard() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Fetching happens in the browser
    fetch("/api/user")
      .then(res => res.json())
      .then(setData);
  }, []);

  if (!data) return <p>Loading...</p>;
  return <h1>Welcome back, {data.name}</h1>;
}

Best for dashboards, chats, and private apps.
First load is slower, but once loaded, it’s very interactive.

---

SSR — “Freshly Picked Plants on the Spot”

In the garden: a customer asks for basil, you pick it fresh from the greenhouse, and hand it over.

On the web, the server builds HTML on request and sends it fresh every time.

// pages/news.js (SSR in Next.js)
export async function getServerSideProps() {
  const res = await fetch("https://api.example.com/news");
  const articles = await res.json();
  return { props: { articles } };
}

export default function News({ articles }) {
  return (
    <div>
      <h1>Fresh News</h1>
      {articles.map(a => <p key={a.id}>{a.title}</p>)}
    </div>
  );
}

Great for news sites, stock tickers, or e-commerce product pages.
Heavy load if many people visit at once, since the server works all the time.

---

SSG — “Plants Prepared in Advance”

In the garden, you prepare 100 pots of mint in the morning and place them in the shop. Customers get them instantly.

On the web, pages are pre-rendered at build time and served instantly.

// pages/blog/[id].js (SSG in Next.js)
export async function getStaticPaths() {
  const res = await fetch("https://api.example.com/posts");
  const posts = await res.json();
  const paths = posts.map(p => ({ params: { id: p.id.toString() } }));
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();
  return { props: { post } };
}

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

Perfect for blogs, documentation, and landing pages.
Content updates only when you rebuild the app.

---

ISR — “Restocking the Shelves”

In the garden: instead of preparing mint only once, you set a rule — restock every few hours to keep them fresh.

On the web, pages are pre-rendered once, then regenerated after a set time.

// pages/jobs.js (ISR in Next.js)
export async function getStaticProps() {
  const res = await fetch("https://api.example.com/jobs");
  const jobs = await res.json();

  return {
    props: { jobs },
    revalidate: 60, // Rebuild every 60 seconds
  };
}

export default function Jobs({ jobs }) {
  return (
    <div>
      <h1>Job Listings</h1>
      {jobs.map(j => <p key={j.id}>{j.title}</p>)}
    </div>
  );
}

Best for job boards, catalogs, and event listings.
New content may take a short time to appear.

---

The Balanced Garden Shop

Running your garden shop taught you something: there’s no single “best” way.

• DIY kits for plant lovers → CSR

• Fresh picks for special requests → SSR

• Prepped plants for speed → SSG

• Regularly restocked plants → ISR

In the same way, Next.js lets you mix and match. Some pages are static, some are dynamic, some refresh on a schedule, and some are built entirely by the browser.

---

🌼 Closing Thought

Your garden isn’t just about plants — it’s about how you deliver them.

Your website isn’t just about content — it’s about how you render it.

With Next.js, you can balance CSR, SSR, SSG, and ISR like a skilled gardener balancing DIY kits, fresh picks, prepped plants, and restocks. The result: a website that’s fast, fresh, and tailored to what each visitor needs.