React, a widely used JavaScript library is embraced by millions of developers worldwide...

This article provides an overview of the new SSR server side components introduced in the Next.js framework.

Understanding React Server-Side Components

React (next.js) Server-Side Components

Client-side rendering refers to the process of using JavaScript to render content in the browser. Instead of fetching all the content from the HTML document itself, an initial bare-bones HTML document with a JavaScript file is loaded. This JavaScript file then handles the rendering of the remaining site content within the browser.

With client-side rendering, the initial page load might be slightly slower. However, subsequent page loads are significantly faster. In this approach, communication with the server primarily occurs for fetching runtime data. Furthermore, there is no need to reload the entire user interface (UI) after each server call. The client-side framework efficiently updates the UI by re-rendering only the specific DOM element that has changed.

Client-side rendering

Server-side rendering (SSR) in React.js involves rendering a React application on the server before delivering it to the client. Unlike client-side rendering (CSR), which relies on rendering in the browser, SSR generates the initial HTML on the server and sends it as a fully rendered page to the user's browser.

By implementing SSR, React applications can offer faster initial page loads, improved search engine optimization (SEO), and an enhanced user experience. When a request is made to the server, it retrieves the necessary data and renders the React components, producing the complete HTML. This HTML is then transmitted to the client, enabling immediate display without waiting for JavaScript to load and render the page.
Server-side rendering in React.js is commonly achieved using frameworks like Next.js or by configuring customized server-side rendering setups utilizing Node.js.

Server-side rendering

Client-side and server-side development also have different purposes. The primary goal of client-side development is to create visual effects and elements for websites, including layouts and user interfaces. Server-side development focuses on the actual content of a webpage, involving tasks like interacting with databases and retrieving information from a web server.

Why do we use client-side and/ Or server-side components

If your UI part is totally about interaction with users like storing states, click handles, event execution, and hooks usage, and not related to API fetching, make sure to use client components. Because server component states will not be available to any CRUD operations. No event execution, click handlers and hooks, etc.

import { Suspense } from "react";

async function fetchBlogPosts() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");

  if (!res.ok) {
    throw new Error("Error occurred when fetching posts");
  }
  return res.json();
}
async function BlogPosts({ apiCall }) {
  const posts = await apiCall;
  return (
    <div className="flex flex-col items-center w-full h-full p-10 ">
      <div>Blog Posts</div>
      <ul className="space-y-10">
        {posts.map((post: any) => (
          <li key={post.id}>
            <h1 className="text-2xl font-bold">{post.title}</h1>
            <p className="text-lg">{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default async function Page() {
  const postsApiFunc= fetchBlogPosts();

  return (
    <div className="grid grid-cols-2">
      <Suspense fallback={<div>Loading blog posts..</div>}>
        <BlogPostsComponent promise={postsPromise} />
      </Suspense>
    </div>
  );
}

Server components are mostly used for dynamic data (API Fetching). In this example, we are creating an API function to get blog data from API and call it in blog components which is a server-side component by default due to the Next.js feature.

The data will be fetched on the server side and once the data is ready to inject into the UI, the User can interact with it. We are also using Suspense here to display something like a loader to the user while data is fetching from the server. So that users don’t just get a blank screen.

On the other hand, we can also choose whether the component is on the client side or the server side. The main purpose of this is, that when there is no dynamic data population or any dynamic action required in the component we can use a client component that can serve fast on the user end, and for other dynamic actions like API calling or data storing we can use server-side components.

This example clarifies which types of components can be used as clients and which types on the server side.

When to use client-side and/ Or server-side components

According to the official Create React App documentation, it is advised not to utilize a basic Create React App setup for your business web applications. Instead, employing it primarily for educational purposes is recommended to gain a fundamental understanding of React.js. Looking ahead, Next.js emerges as the promising future of web application development when React.js is the technology of choice.

Next.js provides numerous features that can enhance your web application performance and Server Side Rendering is one of the core features that can be a game changer for web applications.

Conclusion

React, a widely used JavaScript library is embraced by millions of developers worldwide for creating efficient and highly performant user interfaces (UIs) in web applications. It aims to enhance speed and improve user interactions, resulting in more effective user experiences.

The team leveraged the React library to develop the Next.js framework, specifically designed for web applications. Next.js offers a robust framework that enables developers to adhere to proper architecture principles and construct stable web applications.

In the past, React.js/Next.js predominantly relied on client-side rendering. However, the Next.js team has recently introduced an update called Server-Side Components. This update is a game-changer for the user interfaces (UIs) of web applications, offering significant advancements in terms of reusable components, Fast UI interactions, and Site Speed.

Before driving into the server-side component let’s take a look at what client-side rendering was doing to create impact on web applications UI interface.

Yes, there is a way to add server-side components in the latest Create React app, but as the feature is still in experimental mode, it is suggested not to use it for core features. Instead, you can migrate your React app to Next.js if possible, else use the server-side components to create React app for minor features that will not affect your core functionality.

Yes, prerendering and data fetching on the server can improve your application in various aspects like faster initial render, reduced JavaScript payload, optimized data fetching, improved SEO, and accessibility.

There are several aspects to choose between server-side rendering on frontend or backend. If your main focus is to optimize the SEO of an application, server-side rendering from the backend is more suitable, But if you want to enhance the user experience, it is better to choose server-side component(rendering) on the frontend.

Frequently Asked Questions

What’s up with Turing?
Get the latest news about us here.

Press

Know more about remote work.
Checkout our blog here.

Blog

Have any questions?
We’d love to hear from you.

FOR DEVELOPERS

React (next.js) Server-Side Components

Author

Zain Ahmed

How to Debug React Code: Tips and Tricks for Developers

Best Practices for Securing Your ReactJS Application

How to Build a Next.js App With Server-Side Rendering

How to Build Web Apps With Next.js: A Step-By-Step Next.js Tutorial

Ways to Implement Redirects in Next.js

Frequently Asked Questions

Press

Blog

Contact

Hire remote developers