Demystifying rendering of NextJS

Hello Guys today we ‘ll see about the rendering in Next.JS and also scenario of use case & advantage of these all rendering functionality provide by Next.JS so let see —

In Next.js, there are different rendering methods that determine how a page or component is rendered on the server and client side. These methods are Server-side Rendering (SSR), Client-side Rendering (CSR), Server-side Generation (SSG), and Incremental Static Regeneration (ISR). Let’s explore each of these rendering methods along with an example:

Server-side Rendering (SSR):

SSR renders the page on the server and sends the complete HTML to the client.

It is ideal when you want to deliver a fully rendered page with content populated from APIs and databases without relying on client-side JavaScript. It allows search engines to crawl and index pages effectively.

import axios from 'axios';

function HomePage({ data }) {
  return (
    <div>
      <h1>Welcome to the Next.js example!</h1>
      <p>{data}</p>
    </div>
  );
}

export async function getServerSideProps() {
  const response = await axios.get('https://api.example.com/data');
  const data = response.data;
  return {
    props: {
      data,
    },
  };
}

export default HomePage;

In this example, getServerSideProps is used to fetch data from an API on the server. The fetched data is then passed as props to the HomePage component, which is rendered on the server and sent to the client.

Client-side Rendering (CSR):

CSR renders the page on the client’s browser using JavaScript.
It is ideal when you have dynamic content that needs to be fetched and rendered after the initial render.
CSR can provide a better user experience by updating only the necessary parts of the page.

import { useState, useEffect } from 'react';

function HomePage() {
  const [data, setData] = useState('');

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.log(error));
  }, []);

  return (
    <div>
      <h1>Welcome to the Next.js example!</h1>
      <p>{data}</p>
    </div>
  );
}

export default HomePage;

In this example, the HomePage component uses useState and useEffect to make a request to the API on the client side. The fetched data is stored in the component’s state and rendered dynamically.

Server-side Generation (SSG):

SSG generates HTML pages at build time and serves them as static files.
It is ideal for content that does not change frequently or doesn’t require real-time data.
SSG offers excellent performance since pages are pre-rendered.
Example:

import axios from 'axios';

function HomePage({ data }) {
  return (
    <div>
      <h1>Welcome to the Next.js example!</h1>
      <p>{data}</p>
    </div>
  );
}

export async function getStaticProps() {
  const response = await axios.get('https://api.example.com/data');
  const data = response.data;
  return {
    props: {
      data,
    },
  };
}

export default HomePage;

In this example, getStaticProps is used to fetch data from the API at build time. The fetched data is then passed as props to the HomePage component, which is pre-rendered as a static HTML page.

Incremental Static Regeneration (ISR):

ISR combines the benefits of SSR and SSG by allowing pages to be statically generated at build time and then incrementally regenerated with new data as it becomes available.

It is ideal for content that needs to be frequently updated but doesn’t require real-time rendering.

import axios from 'axios';

function HomePage({ data }) {
  return (
    <div>
      <h1>Welcome to the Next.js example!</h1>
      <p>{data}</p>
    </div>
  );
}

export async function getStaticProps() {
  const response = await axios.get('https://api.example.com/data');
  const data = response.data;
  return {
    props: {
      data,
    },
    revalidate: 60, // regenerate every 60 seconds
  };
}

export default HomePage;

In this example, getStaticProps is used to fetch data from the API at build time. The fetched data is then passed as props to the HomePage component.

The revalidate property indicates that the page should be regenerated every 60 seconds to fetch new data.

These rendering methods in Next.js provide flexibility and control over how pages and components are rendered based on your specific requirements.

Now let see in which scenario we should use of this rendering functionality .

Here are some general scenarios for when to use each rendering method in Next.js:

Server-side Rendering (SSR):

1. Use SSR when you have content that needs to be populated dynamically at the time of the request, for example, personalized data or data from APIs and databases that will change frequently.
2. Use SSR when you want to deliver a fully rendered page with content populated from APIs and databases without relying on client-side JavaScript.
3. Use SSR when you need to improve search engine optimization.
4. Use SSR when you need to serve pages with sensitive or private data that should not be exposed to the client.

Client-side Rendering (CSR):

1. Use CSR when you have dynamic content that needs to be fetched and rendered after the initial render.
2. Use CSR when you want to provide a better user experience by updating only the necessary parts of the page.
3. Use CSR when you have content that can be cached and served from the client, for example, data that does not change frequently.
   Server-side Generation (SSG):
4. Use SSG when you have content that does not change frequently or doesn’t require real-time data, for example, blog articles or marketing pages.
5. Use SSG when you want to improve performance since the pages are pre-rendered as static HTML and delivered directly from a CDN.
6. Use SSG when you need to reduce server load and improve scalability since the pages do not require server resources to render.
   Incremental Static Regeneration (ISR):
7. Use ISR when you have content that needs to be frequently updated but doesn’t require real-time rendering, for example, stock prices or weather information.
8. Use ISR when you want to combine the benefits of SSR and SSG by allowing pages to be statically generated at build time and then incrementally regenerated with new data as it becomes available.
9. Use ISR when you need to balance performance and freshness since the pages can be generated quickly and updated frequently.

Server-side Generation (SSG):

1. Use SSG when you have content that does not change frequently or doesn’t require real-time data, for example, blog articles or marketing pages.
2. Use SSG when you want to improve performance since the pages are pre-rendered as static HTML and delivered directly from a CDN.
3. Use SSG when you need to reduce server load and improve scalability since the pages do not require server resources to render.

Incremental Static Regeneration (ISR):

1. Use ISR when you have content that needs to be frequently updated but doesn’t require real-time rendering, for example, stock prices or weather information.
2. Use ISR when you want to combine the benefits of SSR and SSG by allowing pages to be statically generated at build time and then incrementally regenerated with new data as it becomes available.
3. Use ISR when you need to balance performance and freshness since the pages can be generated quickly and updated frequently.

These are general scenarios, and the choice of rendering method also depends on your specific use case and requirements.

Conclusion : Next.js provides different rendering methods such as Server-side Rendering (SSR), Client-side Rendering (CSR), Server-side Generation (SSG), and Incremental Static Regeneration (ISR), which offer flexibility and control over how pages and components are rendered based on specific needs.

SSR is ideal when you have content that needs to be populated dynamically at the time of the request, while CSR is suitable for dynamic content that needs to be fetched and rendered after the initial render. SSG provides pre-rendered pages and delivers them directly from a CDN, making it ideal for content that does not change frequently or doesn’t require real-time data. In contrast, ISR is best for frequently updated content that doesn’t need real-time rendering and combines the benefits of SSR and SSG.

Choosing the appropriate rendering method depends on the specific use case and requirements. However, these rendering methods in Next.js offer excellent performance, improved SEO, better user experience, and scalability, leading to faster page loads, reduced server load, and improved search engine rankings .

Thanks to learn this blog happy coding .