Aquileo | Server Components in Next.js

Server Components in Next.js are rendered on the server, reducing the JavaScript sent to the browser and improving performance with faster initial page loads.

Rendered entirely on the server.
Reduce client-side JavaScript.
Improve performance and user experience.

Syntax:

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

Note: Server components were introduced in Next.js version 13

Rendering of Server Components

In Next.js, Server Components are rendered on the server during the initial request, allowing efficient HTML generation with minimal client-side JavaScript.

React renders Server Components into a React Server Component (RSC) payload.
Next.js combines the RSC payload with Client Components to generate HTML on the server.

Static Rendering

Static rendering in Next.js pre-renders pages at build time, generating static HTML files for faster and more efficient delivery.

Pages are generated at build time.
Improves performance and SEO.
Enhances overall user experience.

Dynamic Rendering

Dynamic rendering in Next.js renders pages on the server at request time, generating HTML dynamically based on the latest data.

Rendering happens at runtime for each user request.
Content is generated dynamically instead of pre-built HTML.
Data is often fetched from external servers or APIs.

Streaming

Streaming in Next.js progressively sends UI from the server so content appears faster.

UI is rendered and streamed progressively from the server.
Users can see parts of the page before full rendering completes.
Enabled by default in the Next.js App Router.

Benefits of Server Rendering:

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

Faster Data Fetching: Server-side rendering fetches data closer to the source, improving performance.
Reduced Client Load: Pre-rendering shifts work from the browser to the server, improving performance under high traffic.
Better Security: More control over what is sent to the client reduces exposure to client-side attacks.
Improved SEO: Fully rendered HTML helps search engines crawl and index content effectively.

Steps to Create the Project

To run the server component, we need to create Next.js Project.

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

mkdir folderName
cd 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

projectstructure

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 :

Server Components in Next.js