SSG and SSR

Static Site Generation (SSG)

Static site generation (SSG) is a type of pre-rendering that generates HTML at build time. This means that the HTML is generated at build time and sent to the client. This is different from dynamic rendering, where the HTML is generated on the server at request time.

Server-side Rendering (SSR)

Server-side rendering (SSR) is a type of pre-rendering that generates HTML on each request. This means that the HTML is generated on the server at request time. This is different from static generation, where the HTML is generated at build time.

Next.js pre-renders pages on the server, which means that the HTML is generated on the server and sent to the client. This is different from traditional server-side rendering (SSR), where the HTML is generated on the server and sent to the client.

How it works

Next.js pre-renders pages on the server, which means that the HTML is generated on the server and sent to the client. This is different from traditional server-side rendering (SSR), where the HTML is generated on the server and sent to the client.

Benefits of Pre-rendering

• SEO: Pre-rendering improves search engine optimization (SEO) by providing fully rendered HTML to search engines, which can improve the page's ranking.

• Performance: Pre-rendering can improve page load times by reducing the amount of JavaScript needed to render the page.

Static Generation

Static generation is a type of pre-rendering that generates HTML at build time. This means that the HTML is generated at build time and sent to the client. This is different from dynamic rendering, where the HTML is generated on the server at request time.

_getStaticProps

• getStaticProps is a function that is used to generate static pages. It is a function that returns an object with the props for the page.

import fs from "fs";
export async function getStaticProps() {
  const data = fs.readFileSync("data.json", "utf8");
  return {
    props: {
      data: JSON.parse(data),
    },
  };
}

Incremental Static Regeneration (ISR)

• ISR is a feature of Next.js that allows pages to be pre-rendered on the server and then updated in real-time without requiring a full rebuild.

revalidate

• revalidate is a feature of Next.js that allows pages to be pre-rendered on the server and then updated in real-time without requiring a full rebuild.

export async function getStaticProps(context) {
  const res = await fetch("https://api.github.com/repos/vercel/next.js");
  const data = await res.json();
  return {
    props: {
      data,
    },
    revalidate: 1, // revalidate every 1 second
    notFound: false, // if the page is not found, return 404
    redirect: false, // if the page should redirect to another URL, return the URL
  };
}

• context: contains information about the current request, such as query parameters, HTTP headers, and more.
• revalidate: number of seconds after which the page should be re-generated.
• notFound: boolean value that determines if the page should return 404 if it is not found.
• redirect: boolean value that determines if the page should redirect to another URL if it is not found.

getStaticPaths

• getStaticPaths is a function that is used to generate dynamic pages. It is a function that returns an array of paths that will be pre-rendered.

export async function getStaticPaths() {
  const res = await fetch("https://api.github.com/repos/vercel/next.js");
  const data = await res.json();
  const paths = data.map((repo) => `/repos/${repo.name}`);
  return {
    paths,
    fallback: false, // fallback to false means that if a path is not found, the page will return 404
                    // fallback to true means that if a path is not found, the page will render the fallback page, will load the data on the client side, and then update the page with the fetched data.
                    // fallback to blocking means that the fallback page will be rendered until the data is fetched.
  };
}

• paths: an array of paths that will be pre-rendered.
• fallback: boolean value that determines if the page should return 404 if it is not found.

Server Side Rendering

Server side rendering is a type of pre-rendering that generates HTML on each request. This means that the HTML is generated on the server at request time. This is different from static generation, where the HTML is generated at build time.

_getServerSideProps

• _getServerSideProps is a function that is used to generate dynamic pages. It is a function that returns an object with the props for the page.

import { getSession } from "next-auth/client";

export async function getServerSideProps(context) {
  const session = await getSession(context);
  if (!session) {
    return {
      redirect: {
        destination: "/login",
        permanent: false,
      },
    };
  }
  const data = await fetchDataFromAPI();
  return {
    props: {
      data,
    },
  };
}

• context: contains information about the current request, such as query parameters, HTTP headers, and more.
• redirect: object that determines if the page should redirect to another URL if the user is not authenticated.

Client-side Data Fetching

useSWR is a React hook that allows you to fetch data from an API and update the UI in real-time without a full page reload.

import useSWR from "swr";

function Profile() {`
const { data, error } = useSWR("/api/user", fetcher);

  if (error) return <div>Failed to load</div>;
  if (!data) return <div>Loading...</div>;
  return <div>Hello {data.name}!</div>;
}

• fetcher: a function that fetches data from an API.
• data: the data returned by the fetcher function.
• error: an error object that is returned if the fetcher function throws an error.