Next.JS

Next.js is a framework that leverages all of React's mechanics with the addition of a backend routing, compilation, and rendering system, making it a complete tool for web development.

1. Page Architecture

Next.js adopts a page-based architecture, where each file inside the /pages folder becomes a route in the application. For example: - pages/index.js becomes the / route - pages/about.js becomes the /about route

This automatic routing approach simplifies the project structure and facilitates navigation between different parts of the application.

2. Rendering

Next.js offers different rendering methods to optimize performance and user experience:

Using Server-Side Rendering (SSR)

1. SSR Definition

Server-Side Rendering (SSR) refers to the technique where the page's HTML is generated on the server, allowing the content to be sent to the client already rendered. This is especially useful for SEO and for improving the user experience, as the content is available immediately when the page loads.

2. How to Use SSR in Next.js

To implement SSR in Next.js, you use the getServerSideProps function. This function is exported from a page component and is called by Next.js on the server side before rendering the page.

SSR Example

// pages/example.js
export async function getServerSideProps(context) {
  // Here you can fetch data from an API or database
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  // Return the data as props to the component
  return { props: { data } };
}

const Example = ({ data }) => {
  return (
    <div>
      <h1>Data Loaded from the Server</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default Example;

3. SSR Workflow

• When a user accesses the /example route, Next.js calls the getServerSideProps function.
• The server makes the request to the API, gets the data, and returns it as props.
• Next.js renders the page on the server with the received data and sends the complete HTML to the client.
• The client sees the already rendered page, improving initial load time and user experience.

Distinguishing SSR from Client-Side Rendering (CSR)

1. CSR Definition

Client-Side Rendering (CSR) is a technique where most of the processing to render the page is done in the user's browser. This means the initial HTML sent by the server is minimal, and the content is loaded dynamically through API calls after the page has loaded.

2. How CSR Works

• The server sends a basic HTML file with a JavaScript file containing the application's logic.
• The JavaScript is downloaded and executed in the browser, which makes additional requests to fetch data and render the interface.
• The content is displayed only after the JavaScript has been executed, which can result in a less efficient user experience, especially on slow connections.

CSR Example

// pages/csr.js
import { useEffect, useState } from 'react';

const Csr = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch('https://api.example.com/data');
      const jsonData = await res.json();
      setData(jsonData);
    };

    fetchData();
  }, []);

  return (
    <div>
      <h1>Data Loaded from the Client</h1>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : <p>Loading...</p>}
    </div>
  );
};

export default Csr;

3. Comparison between SSR and CSR

| Feature | SSR | CSR | |