When to use SSR and SSG in Next.js

Shohanur Rahman Sabber — Fri, 03 Jan 2025 15:37:32 +0000

SSR (Server-Side Rendering):

Runs on every request to the server.
Each time a user visits the page, the server fetches the data, renders the HTML, and sends it to the client.
This ensures that the content is always fresh, but it can be slower due to the overhead of server-side processing.

Example Timeline for SSR:

Request 1: User A visits → Server fetches data, generates page dynamically, and responds.

Request 2: User B visits → Server fetches data again, generates page dynamically, and responds.

export async function getServerSideProps(context) {
  const res = await fetch(`https://api.example.com/data`)
  const data = await res.json()

  return {
    props: { data }, // Will be passed to the page component as props
  }
}

function Page({ data }) {
  return <div>{data. Content}</div>
}
export default Page;

SSG (Static Site Generation):

Runs at build time (when you execute next build).
The HTML and data are pre-rendered and saved as static files. These files are served directly to users, making it super fast.

Optional: If you use revalidate, Next.js will rebuild the page in the background after the specified time interval, ensuring updated content is available.
Example Timeline for SSG with revalidate: 60:

Build time: The page is pre-rendered with the data available at build time.

Request 1 :(after build): User A visits → Static HTML is served.

Background regeneration (after 60 seconds): Next.js fetches fresh data and regenerates the page.

Request 2 : (after regeneration): User B visits → The updated static HTML is served.

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts')
  const posts = await res.json()

  return {
    props: { 
      posts 
    },
    // Optional: Regenerate the page at most once every 60 seconds
    revalidate: 60 
  }
}

function BlogPage({ posts }) {
  return (
    <div>
      {posts. Map(post => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  )
}

SSR: Fetches fresh data and generates the page on every request.

SSG: Pre-renders the page once at build time (or during scheduled revalidate intervals), and serves the same pre-built page to all users until it's regenerated.

Use SSR when:

You need real-time, up-to-date content (e.g., dashboards, user-specific data).
The content changes frequently and cannot be cached effectively.

Use SSG when:

The content doesn't change often (e.g., blog posts, marketing pages).
Speed and performance are critical.

Mastering Git: How to Delete Local, Merged, and Remote Branches

Shohanur Rahman Sabber — Thu, 12 Sep 2024 14:32:45 +0000

In the world of software development, effective version control is crucial for ensuring smooth collaboration and project management. Git is one of the most widely used version control systems, and knowing how to handle branches efficiently can save time and prevent mistakes.

In this article, we'll explore how to manage local, merged, and remote Git branches, focusing on the commands that help streamline your workflow.

Deleting a Local Git Branch

When working on a project, it's common to create local branches for specific features, bug fixes, or experiments.

However, once a branch has served its purpose, keeping it around can clutter your repository. Here's how to delete a local Git branch:

git branch -d <branch-name>

This command deletes the specified branch, but only if it has been fully merged into another branch (e.g., main). If Git detects that the branch has unmerged changes, it will prevent deletion to avoid losing work.

If you are sure you want to delete an unmerged branch, you can use the -D flag:

git branch -D <branch-name>

This force-deletes the branch, even if it contains unmerged changes. Use this option carefully.

Deleting a Merged Git Branch

After merging a feature branch into the main codebase, you may want to delete the branch locally to keep your working environment clean. Use the same command as above:

git branch -d <branch-name>

This ensures that the merged branch is removed from your local environment, allowing you to focus on active tasks without unnecessary clutter.

Deleting a Remote Git Branch

A remote branch is a branch that exists on a shared remote repository, such as GitHub or GitLab. While local branches only exist on your machine, remote branches are available for anyone who has access to the repository.

To delete a remote branch, the following command is used:

git push origin --delete <branch-name>

This command instructs Git to delete the specified branch from the remote repository (origin). This is especially helpful for cleaning up old feature branches that are no longer needed after merging them into the main branch.

What is a Remote Git Branch?

A remote branch refers to a branch that is hosted on a remote repository. Remote branches are often used for collaboration in teams, allowing everyone to push and pull changes to and from the repository.

When you clone a Git repository, you're also downloading references to all the branches from the remote repository. You can view both your local and remote branches using this command:

git branch -a

This lists:
Local branches (e.g., main, feature-branch)
Remote branches (e.g., remotes/origin/main, remotes/origin/feature-branch)

Understanding how to manage both local and remote branches is crucial for maintaining a clean, organized workflow, especially when working with larger teams.

By mastering these Git commands, you'll improve not only your own productivity but also your team's efficiency when managing project branches.

Forem: Shohanur Rahman Sabber

When to use SSR and SSG in Next.js

Mastering Git: How to Delete Local, Merged, and Remote Branches