Server Components in Next.js

NextJS is a popular and powerful React Framework that simplifies building modern web applications was created by Vercel (formerly Zeit), and NextJS simplifies the process of building modern web applications by providing a robust framework.

In this post, we will explore the Server Components in NextJS.

What are Server Components?

NextJS, a popular React Framework for building web applications, server-side rendering (SSR). NextJS 13 introduces several changes to the way components are created and rendered, including the introduction of React Server Components. Server Components are those components that perform server-side rendering. By default, In next.js all components are server components.

Syntax:

export default function ServerComponents(){
    return (
        <div>
              Hey I am Server Component
        </div>
    )
}

How are server components rendered?

In NextJS server component are rendered on the server-side, meaning that it initial rendering of the component happens on the server side rather than the client’s browser. There are the two steps in Next.js for rendering the Server component in the server side.

• React renders Server Components into a special data format called the React Server Component (RSC Payload).
• NextJS uses the RSC Payload and client Component for rendering the HTML on the server.

Static Rendering:

In NextJS, Static rendering refers to the process of pre-rendering pages at buld time, generating HTML files for each page that are served statically. This approach is beneficial for improving performance, SEO and user experience on the web application.

Dynamic Rendering:

In NextJS Dynamic rendering typically refers to rendering content dynamically on the server side in response to user request. It is different than static rendering. In this rendering HTML files generates content dynamically at runtime, often fetching the data from a external server or external API (Application Programming Interface).

Streaming:

In NextJS, Streaming enables you to progressively render UI from the server. It means it split into chunks and streamed to the client as its becomes ready. This allows the user to parts of the page immediately, before the entire content has finished rendering.

It is by default in NextJS App Router.

Benefits of Server Rendering:

There are the many benefits of Server Side Rendering. I have explained some common Server Side Rendering.

• Data Fetching: In server side rendering, data fetching is closer to your data source. This can improve performance by reducing time it takes to fetch data needed for rendering.
• Reduce Server Load: By pre-rendering pages on the server, It reduce the burden away from the client’s browser. This can be especially beneficial in scenarios with high traffic, as it helps in distributing the workload and maintaling a smoother user experience.
• Security: Server Components Provide more secure as compare to CSR(Client Side Rendering). It hs more control over what is sent to the client, reducing the risk of certain client-side attacks.
• Search Engine Optimization (SEO): SSR helps in delivering fully rendered HTML to search engine crawlers, making it easier for them to understand and index the content. This can positively impact a webiste’s search engine rankings.

Steps to Create the Project:

To run the server component, we need to create Next.js Project. For the purpose of demonstration.

Step 1: Create a project folder and move into it by using the below command in the terminal.

mkdir folderNamecd folderName

Step 2: In the foldername, create your project by using the the below command in the terminal or command prompt.

npx create-next-app@latest project_name

Step 3: After creating the folder, type the server component code in page.js file.

Folder Structure:

Example: In this example, we will fetch the data from “jsonplaceholder” for rendering the dynamic data in the client component.

JavaScript

"use client";
import { useState, useEffect } from "react";

function Posts() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    // Fetch data from an API
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((response) => response.json())
      .then((data) => setPosts(data));
  }, []);

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default Posts;

Output: