# 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**.

```plaintext
// 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.

```plaintext
// 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.

```plaintext
// 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**.

```plaintext
// 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.