DEV Community

Cover image for CSR vs SSR vs SSG
Jayant
Jayant

Posted on

4 1

CSR vs SSR vs SSG

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

Downside

  • Not SEO Optimized, web-crawler only reads an empty html file with no info
  • Users sees a flash before page renders
  1. Server Side Rendering

Upside

  • Rendering happens on Server Side
  • SEO Optimization

Server Side Rendering

Downside

  • Expensive since every request needs to be rendered on server
  • Harder to scale , can't user CDN
  1. Static Side Generation

Upside

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

Example -

// 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>
    );
}
Enter fullscreen mode Exit fullscreen mode

Ways to update the page

  1. using revalidate Updating Every 10 seconds
const res = await fetch("https://sum-server.100xdevs.com/todos", {
    next: { revalidate: 10 },
});
Enter fullscreen mode Exit fullscreen mode
  1. Tagging the fetch and then using server action to revalidate
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");
}
Enter fullscreen mode Exit fullscreen mode
  1. 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 -

   // 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(),
    }));
   }
Enter fullscreen mode Exit fullscreen mode

Also make sure to modify the next.config.js

   const nextConfig = {
    output: "export",
   };
Enter fullscreen mode Exit fullscreen mode

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

Code - 1

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>
    );
}
Enter fullscreen mode Exit fullscreen mode

Code -2

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>
    );
}
Enter fullscreen mode Exit fullscreen mode

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (1)

Collapse
 
leandro_nnz profile image
Leandro Nuñez •

There’re are a lot of terms that can confuse readers. Please refer to this article to fully understand ssr csr and ssg HERE

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more