Mastering Next.js: Decoding Server-Side and Client-Side Components

HARSH SINGH — Sun, 04 Aug 2024 21:12:56 +0000

Hi Guys! Welcome back to my blog with mastering nextjs with me.
Today we'll get to know about Server-Side and Client-Side Components in Next.js. It is a particularly fun topic to do some research about as the concept is rather simple but hides many complexities behind the simple use of these components.

Understanding the key differences and where to use these components will help you to building optimized, performant, and SEO-friendly applications and fully utilize the powerfull features that Next.js provide. In this blog, we’ll dive deep into these two types of components, explore their key differences, and discuss when to use each.

What are Server-Side Components?

Every Component that is made in Next.js is by default is a Server-Side Component

//  app/page.jsx

async function getData() {
  const res = await fetch('https://api.example.com/...')
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.

  if (!res.ok) {
    // This will activate the closest `error.js` Error Boundary
    throw new Error('Failed to fetch data')
  }

  return res.json()
}

export default async function Page() {
  const data = await getData()
 if(data){
  return <main></main>
 }
 else{
 notFound()
 }

}

Next.js provide the native fetch feature in which there are many options to revalidate the cache or do not store the cache at all. You can read more about it here. Link.

In the Server-Side Component, the component is rendered on the server and whatever data needs to be fetched or API calls needed to be made happens on the server side. Complete HTML data is generated on the server and sent to the browser to load.
Once the HTML is loaded, JavaScript takes over to "hydrate" the page, making it interactive by attaching event listeners and enabling any dynamic client-side functionality.

Advantages

Improved SEO: Since the content is pre-rendered on server, makes it easier for search engines to crawl and index the page.
Faster Initial Load Time:Users receive a fully-rendered page immediately, which reduces the time it takes for them to see and interact with the content.
Better Performance on Slow Networks:Since the HTML is pre-rendered, users on slower networks can see the content faster, even if the client-side JavaScript takes longer to load.

Some Limitations

Increased Server Load: Since the server handles rendering, it can become a bottleneck under heavy traffic.
Slower Interactions: After the initial page load, interactions might be slower compared to fully client-rendered applications, especially if frequent server round-trips are required.

What are Client-Side Components?

Every component in Next.js is Server Component but after adding "use client" on top of the component it becomes a Client component.

After making it a client component, it will have access to all the browser functionalities like the window object, setTimeOut etc.

"use client"

import { useEffect, useState } from 'react';

export default function ClientSideComponent() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then((res) => res.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Loading...</p>;

  return (
    <div>
      <h1>Client-Side Component Example</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

In this when request is made to the server, it responds with the minimal amount of HTML or HTML shell like a div which happens in react and that gets loaded after that all the javasript files are loaded and executed and all the API calls and rendering of the jsx components occurs at this time and we will get a fully interactive page.
User can interact with the page with reloading it.

Advantages

Rich Interactivity: Ideal for building highly interactive user interfaces. They enable real-time updates, animations, and smooth transitions without requiring a full page reload.
Better User Experience for Single-Page Applications (SPAs): Since the content is rendered on the client, users experience a seamless flow as they navigate through different parts of the application. This is a common approach in SPAs, where only a portion of the page updates in response to user interactions.
Reduced Server Load: By offloading rendering tasks to the client, CSR reduces the server's workload.
Flexibility in Data Fetching: CSR allows developers to fetch data on-demand, meaning you can load data only when needed, based on user interactions.

Some Limitations

Slower Initial Load Time : Slower load time as the page is rendered on the browser after the javascript is loaded on to the browser.
SEO Challenges: As you have guessed it, Since the page is not pre-rendered hence it is difficult for search engines to crawl and index the pages.
Potential for Poor User Experience on Slow Networks: Users on slow networks may experience delays while waiting for JavaScript to load and execute, leading to a suboptimal user experience.

Key Differences Between Server-Side and Client-Side Components

Rendering:

Server-Side:Rendered on the server before the HTML is sent to the client's browser.
Client-Side:Rendered directly in the client's browser after the initial HTML is loaded.

Initial Load Time

Server-Side: Typically faster,server sends pre-rendered HTML page to browser.
Client-Side: May have slower initial load, JS files are downloaded and then executed.

SEO

Server-Side: Better, as easy to crawl pre-rendered HTML pages.
Client-Side: Challenging, as content is rendered dynamically on browser.

Interactivity

Server-Side: Initial page is fully rendered and static, with interactivity added after the page is hydrated by JavaScript.
Client-Side: Highly interactive from the start, with dynamic content that can change based on user actions or real-time data.

Data Fetching

Server-Side: Fetched on the server, component rendered with complete content.
Client-Side: Fetched on the Client/Browser, may lead to performance issues on slower network.

Many Client components can contain Server Components and Vice versa

Use Cases

Server-Side Components: Ideal for content-heavy, SEO-focused applications where initial load time is critical, such as blogs, e-commerce sites, and marketing pages.
Client-Side Components: Best for highly interactive applications, single-page applications (SPAs), or scenarios where content needs to be frequently updated or personalized.

Mastering Next.js: My Journey from SSG to SSR Through Trial and Error

HARSH SINGH — Mon, 29 Jul 2024 19:38:33 +0000

Hi Guys! In this blog i wanna share with you the next new project that I've been working on for a good amount of time. It really takes me back to when i started my journey with MERN stack when i used to struggle in every project that I made but after having gone through all that hardships I can still say that getting stuck on some topics still freaks me out a little bit.

I want to share with all of you about the difference between SSG and SSR.
I was doing a minor project of making a blog site and i wanted to generate the blogs on the build time but It was not genrating and after 1 week of searching and wandering on internet learning about the difference I finally understood what is the difference.

Introduction

Next.js is a powerfull React framework developed by vercel. It has several built-in features to enhance development and user experience.
Some of the features are:

Hybrid Static & Server Rendering : It supports both SSR and SSG, allowing developers to choose best of any according to their use-case.
API Routes : It allows you to build API endpoints in the nextjs app itself eliminating the need for a separate backend service for simple API tasks.
Automatic Code Splitting and Optimization : It splits the code and only send necessary javasript to browser and has many built-in optimization like Image optimization, faster builds etc.
File-system Routing : It has a file sytem routing(whichever you are using app or page router) automatically creates routes.
TypeScript Support : It is recommended to code in typescript as it catches many errors in the runtime only which if not used may cause problems in build time.

SSG VS SSR

Server Side Generation (SSG)

SSG generates static HTML pages at the build time. The content is pre-rendered which means it doesn't change until you rebuild the site.
It is best for pages that doesn't change too frequetly like the Marketing pages or documentation which doesn't change too frequently.
It basically is generated during the build time and are static so they load extremely quickly.

In this to get the Dynamic path that you want to render on build time you can use the getStaticParams. You can read more about this here. Link

Server Side Rendering(SSR)

SSR generates HTML pages on each request. The server renders the HTML dynamically for each incoming request. It is best for pages that need to be dynamic and up-to-date on every request. This includes user dashboards, news feeds, and other content that changes frequently or is user-specific.
Since HTML is generated on each request so it is slower than SSG but it ensures that the content is always fresh and up-to-date.

Final Thought

My journey with Next.js, SSG, and SSR has been filled with learning opportunities. Each error and challenge has deepened my understanding and improved my problem-solving skills. I encourage you to experiment with both SSG and SSR in your projects to see how they can best serve your needs.

Thank you for reading! I hope my experiences help you in your Next.js journey. Feel free to share your own experiences or ask questions in the comments below. Let's continue learning and growing together as a community. Happy coding!

Forem: HARSH SINGH

Mastering Next.js: Decoding Server-Side and Client-Side Components

What are Server-Side Components?

Advantages

Some Limitations

What are Client-Side Components?

Advantages

Some Limitations

Key Differences Between Server-Side and Client-Side Components

Rendering:

Initial Load Time

SEO

Interactivity

Data Fetching

Use Cases

Mastering Next.js: My Journey from SSG to SSR Through Trial and Error

Introduction

SSG VS SSR

Server Side Generation (SSG)

Server Side Rendering(SSR)

Final Thought