Next Js Server Side or Client Side Rendering

In this article, we will learn how to render components server-side or client-side in Next.js. While developing applications with React, we often need Server-Side Rendering (SSR) to render pages on the server, making the content easily crawlable by search engines like Google, which is essential for SEO.

To implement SSR in React, we can use hydrateRoot (as described in the React documentation: React hydrateRoot) to render content on the server side. However, to make the process easier and more streamlined, Next.js was introduced. It simplifies managing both server-side and client-side rendering (CSR), providing a flexible framework for SEO-friendly pages and optimized performance.

Render content in view source in next.js serverside rendering,Also learn how to impliment SSR in nextjs

So in previeus version on next js 13 or les then that we use a mathod getServerSideProps withing our component , In Next.js, you can perform Server-Side Rendering (SSR) or Client-Side Rendering (CSR) depending on your use case. Next.js provides a flexible framework that can handle both types of rendering, or even Static Site Generation (SSG). Let’s break down SSR and CSR in Next.js, along with when and why to use each.

Server-Side Rendering (SSR) in Next.js

You use the getServerSideProps function to fetch data server-side on each request.

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

  return {
    props: { data }, // This will be passed to the component as props
  };
}

export default function HomePage({ data }) {
  return (
    <div>
      <h1>Server-Side Rendered Page</h1>
      <p>{JSON.stringify(data)}</p>
    </div>
  );
}

In version above 13 you can use “useClient” on the top of your component code so it will render on client side and for the pages in you next app you can remove that useClient

"use client"
import React from "react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { SettinIcon ,BitCoin , EthIcon , UsdIcon } from "@/app/elements/icons";

function ElasticSearch() {
  
  return (
    
    <div className="search-container w-full container">
  
    </div>
  );
}

export default ElasticSearch;

In Above code, "use client" is a directive placed at the top of the file. This directive is part of React Server Components (RSC) in Next.js, which allows you to control how the component is rendered—whether it should be rendered on the client side or server side.

Why is "use client" needed?

Next.js supports both server-side rendering (SSR) and client-side rendering (CSR). With React Server Components, parts of the app can be rendered on the server while others are rendered on the client. If you need a particular component to use client-side JavaScript (e.g., event handlers, state management, etc.), you need to ensure that it’s rendered on the client side, which is what "use client" enforces.

How Does "use client" Work?

• If "use client" is specified, the component will be hydrated on the client side, meaning it will have access to browser APIs, event listeners, and client-specific logic (like state hooks, effects, etc.).
• Without this directive, Next.js might treat the component as a server-side component by default, and this could lead to issues if the component relies on client-side JavaScript or state.

In next js13 and above it is recommended to use Layout.js without “useClient” otherwise nothing will render from server side