Server-Side Rendering

As we discussed in Chapter 1, Why React?, the React library is remarkably flexible in terms of how our components can be transformed into various target formats. One such target format, as you might have guessed, is standard HTML markup, presented as a string and generated on the server. In this chapter, we will delve into how server-side rendering (SSR) works in React and the advantages it offers both users and developers. You will learn why this approach can be valuable for your application and how it enhances the overall user experience and performance.

The following topics are covered in this chapter:

• Working on the server
• Using Next.js
• React Server Components

Technical requirements

You can find the code files of this chapter on GitHub at https://github.com/PacktPublishing/React-and-React-Native-5E/tree/main/Chapter13.

Working on the server

Web technologies have come a long way or, more precisely, have come full circle. It all started with static web pages prepared by a server. Servers were the foundation of all website and application logic, as they were entirely responsible for their functioning. Then, we tried to move away from SSR in favor of rendering pages in the browser, which led to a significant leap in the development of web pages as fully fledged applications, now comparable to desktop ones. As a result, browsers became the core of application logic, while servers merely provided data for applications.

Currently, the development cycle has brought us back to SSR and server components, but now we have a unified logic and code for both the server and the client. Why this happened and what conclusions and experiences we have gained with the evolution of technologies are what we will try to understand in this section, and we will simultaneously learn about the types of work our applications...

Using Next.js

After familiarizing ourselves with the theory of SSR, let’s see how we can implement all this in practice using the Next.js framework.

Next.js is a popular React-based framework specifically designed to simplify the process of SSR and static site generation. It offers powerful and flexible capabilities for creating high-performance web applications.

The features of Next.js:

• An easy-to-use API that automates SSR and static generation: You just need to write code using the provided methods and functions, and the framework will automatically determine which pages should be rendered server-side and which can be rendered during the project build process.
• File-based routing: Next.js uses a simple and intuitive routing system based on the folder and file structure in the project. This greatly simplifies the creation and management of routes in the application.
• The ability to create comprehensive full-stack applications, thanks to API routes...

React Server Components

React Server Components represent a new paradigm for working with components in Next.js that eliminates isomorphic JavaScript. The code of such components runs only on a server and can be cached as a result. In this concept, you can directly read the server’s filesystem or access the database from the components.

In Next.js, React Server Components allow you to categorize components into two types: server-side and client-side. Server-side components are processed on a server and sent to the client as static HTML, reducing the load on the browser. Client-side components still have all the capabilities of browser JavaScript but with one requirement: you need to use the use client directive at the beginning of the file.

To use server-side components in Next.js, you will need to create a new project. For routing, you still use files, but now, the main folder for the project is the app folder, and route names are based solely on folder names. Inside...

Summary

In this chapter, we explored SSR in the context of React applications. We discussed approaches such as SSR, SSG, and ISR, learning the advantages and disadvantages of each approach.

Then, we learned how to apply these approaches in an application using Next.js and the Pages Router. Finally, we introduced a new technology called React Server Components and the updated Next.js architecture called the App Router.

In the next chapter, we will learn how to test our components and applications.