CSR vs SSR vs SSG
Tags: nextjs, react, rendering
Published: 2024-05-15 20:15:44

## CSR vs SSR vs SSG

1. **Client Side rendering**

`Upside`

- Rendering of webpage happens in the browser
- Used with CDN's as rendering happens on the Client Side
- Example - React

![Client side Rendering](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4378jzzr2qvikzgo3pny.png)

`Downside`

- Not SEO Optimized, web-crawler only reads an empty html file with no info
- Users sees a flash before page renders

2. **Server Side Rendering**

`Upside`

- Rendering happens on Server Side
- SEO Optimization

![Server Side Rendering](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3a0iagwvrw23tidgk1nw.png)

  `Downside`

  - Expensive since every request needs to be rendered on server
  - Harder to scale , can't user CDN

3. **Static Side Generation**

`Upside`

- Page is generated at build time.
- Same page is reused on every request
- Saves Money by dec. operations

Example -

```tsx
// Build statically by default
export default async function Blog() {
	const res = await fetch("https://sum-server.100xdevs.com/todos");

	const data = await res.json();
	const todos = data.todos;

	console.log("todos");
	return (
		<div>
			{todos.map((todo: any) => (
				<div key={todo.id}>
					{todo.title}
					{todo.description}
				</div>
			))}
		</div>
	);
}
```

**Ways to update the page**

1.  using `revalidate`
    Updating Every 10 seconds

```tsx
const res = await fetch("https://sum-server.100xdevs.com/todos", {
	next: { revalidate: 10 },
});
```

2. Tagging the fetch and then using server action to revalidate

```tsx
import { revalidateTag } from "next/cache";

const res = await fetch("https://sum-server.100xdevs.com/todos", {
	next: { tags: ["todos"] },
});

// ServerAction.ts

// Now we can call this function and our data will get refreshed
("use server");

import { revalidateTag } from "next/cache";

export default async function revalidate() {
	revalidateTag("todos");
}
```

3. Using `generateStaticParams`
   This can be used to statically generate the Dynamic Routes
   `generateStaticParams` is a function that generates a list of params for dynamic routes.

   For Ex -

   ```tsx
   // This code should be in your Dynamic Route component file and is exported.
   export async function generateStaticParams() {
   	const response = await fetch("https://jsonplaceholder.typicode.com/posts");
   	const posts = await response.json();

   	// A list of params is returned
   	return posts.map((post) => ({
   		postId: post.id.toString(),
   	}));
   }
   ```

   Also make sure to modify the `next.config.js`

   ```ts
   const nextConfig = {
   	output: "export",
   };
   ```

🎯 **Bonus** - What is difference b/w below 2 codes

`Code - 1`

```tsx
export default async function Blog() {
	const res = await fetch("https://sum-server.100xdevs.com/todos");

	const data = await res.json();
	const todos = data.todos;

	console.log("todos");
	return (
		<div>
			{todos.map((todo: any) => (
				<div key={todo.id}>
					{todo.title}
					{todo.description}
				</div>
			))}
		</div>
	);
}
```

`Code -2`

```tsx
export default function Blog() {
	const [todos, setTodos] = useState([]);
	useEffect(() => {
		const res = fetch("https://sum-server.100xdevs.com/todos")
			.then((res) => res.json())
			.then((data) => setTodos(data.todos));
	}, []);
	console.log("todos");
	return (
		<div>
			{todos.map((todo: any) => (
				<div key={todo.id}>
					{todo.title}
					{todo.description}
				</div>
			))}
		</div>
	);
}
```

**Code - 1** will run on Server Side & is used in NextJS while **Code - 2** will run on Client Side & likely to used in ReactJS.

Happy Coding.