Client-Side Rendering (CSR) vs. Server-Side Rendering (SSR) in Next.js

Tiempo de lectura: 2 minutos

If you use Next.js, you can perform client-side rendering (CSR) or server-side rendering (SSR).

Next, we will analyze the difference between Client-Side Rendering and Server-Side Rendering:

Client-Side Rendering (CSR):

• How It Works:
  • In client-side rendering (CSR), the initial HTML is sent empty or with a basic skeleton from the server.
  • Then, the client’s browser downloads and executes JavaScript, which in turn requests data and updates the page content on the client side.
• Advantages:
  • Quick responses for the user.
  • Fast interactivity, as content can be updated without reloading the page.
• Disadvantages:
  • Slower initial load time, as it requires downloading and interpreting JavaScript.
  • Can affect SEO if not handled properly.

Server-Side Rendering (SSR):

• How It Works:
  • In server-side rendering (SSR), the server generates the complete HTML with the required data for each request.
  • The browser receives pre-rendered HTML, ready to display, meaning there’s no additional wait time for data fetching.
• Advantages:
  • Faster initial load time, as the HTML is pre-rendered.
  • Better SEO, as search engines can see the content directly in the initial HTML.
• Disadvantages:
  • Slower response times for the user if HTML generation is resource-intensive.
  • Higher server load, especially with a large volume of requests.

Data Fetching Functions in Next.js

getStaticProps:

• Description:
  • Used to generate static pages during build time.
  • Executes only on the server during the build and does not run on the client.
• Usage:
  • Ideal for static content or content that changes infrequently.
  • Can call external APIs, access databases, etc.
• Example:

  export async function getStaticProps() {
    // Logic to fetch data
    return {
      props: {
        // Fetched data
      },
      revalidate: 60, // Optional, re-generate the page every 60 seconds
    };
  }

getStaticPaths:

• Description:
  • Used along with getStaticProps for dynamic routes.
  • Defines the paths for which getStaticProps should generate static pages.
• Usage:
  • Specifies the dynamic routes to pre-render.
• Example:

  export async function getStaticPaths() {
    // Logic to fetch dynamic routes
    return {
      paths: [
        // List of dynamic routes
      ],
      fallback: false, // Optional, controls behavior for unspecified routes
    };
  }

getServerSideProps:

• Description:
  • Used to generate pages on the server during each request.
  • Executes on the server for each request, allowing for real-time data fetching.
• Usage:
  • Ideal for content that changes frequently or requires real-time data.
• Example:

  export async function getServerSideProps() {
    // Logic to fetch real-time data
    return {
      props: {
        // Fetched data
      },
    };
  }