Server-Side Rendering

The next step in building React applications is learning how server-side rendering (SSR) works and what benefits it can give us. By implementing SSR, we can create universal applications that are better for search engine optimization (SEO) and enable knowledge-sharing between the frontend and the backend. They can also improve the perceived speed of a web application, which usually leads to increased conversions. However, applying SSR to a React application comes at a cost, and we should think carefully about whether we need it or not.

In this chapter, you will see how to set up a server-side-rendered application, and by the end of the relevant sections, you will be able to build a universal application and understand the pros and cons of the technique.

In this chapter, we will cover the following topics:

• Understanding what a universal application is
• Figuring out the reasons why we may want to enable SSR
• Creating a simple static...

Server-Side Rendering

The next step in building React applications is learning how server-side rendering (SSR) works and what benefits it can give us. By implementing SSR, we can create universal applications that are better for search engine optimization (SEO) and enable knowledge-sharing between the frontend and the backend. They can also improve the perceived speed of a web application, which usually leads to increased conversions. However, applying SSR to a React application comes at a cost, and we should think carefully about whether we need it or not.

In this chapter, you will see how to set up a server-side-rendered application, and by the end of the relevant sections, you will be able to build a universal application and understand the pros and cons of the technique.

In this chapter, we will cover the following topics:

• Understanding what a universal application is
• Figuring out the reasons why we may want to enable SSR
• Creating a simple static...

Technical requirements

To complete this chapter, you will require the following:

• Node.js 19+
• Visual Studio Code

You can find the code for this chapter in the book’s GitHub repository at https://github.com/PacktPublishing/React-18-Design-Patterns-and-Best-Practices-Fouth-Edition/tree/main/Chapter12.

Understanding universal applications

A universal application is an application that can run both on the server side and client side with the same code. In this section, we will look at the reasons why we should consider making our applications universal, and we will learn how React components can be easily rendered on the server side.

When we talk about JavaScript web applications, we usually think of client-side code that lives in the browser. The way they usually work is that the server returns an empty HTML page with a script tag to load the application. When the application is ready, it manipulates the DOM inside the browser to show the UI and interact with users. This has been the case for the last few years, and it is still the way to go for a huge number of applications.

In this book, we have seen how easy it is to create applications using React components and how they work within the browser. What we have not seen yet is how React can render the same components on...

Reasons for implementing SSR

SSR is a great feature, but we should not jump into it just for the sake of it. We should have a real, solid reason to start using it.

Adopting SSR without a clear purpose can introduce unwarranted complexities and issues into your application. The intricacies of SSR can complicate aspects such as managing states, data fetching, and routing, among others. Additionally, SSR puts an increased load on the server as it is responsible for rendering HTML for each request. If not carefully optimized, this can result in slower response times and higher server costs.

Moreover, the added complexity that SSR brings to an application can slow down the development process, complicate debugging, and require maintenance of specific tools and configurations. Furthermore, if your application does not have a significant amount of public content, the SEO benefits that often drive the adoption of SSR may not be substantial.

In essence, while SSR can offer benefits...

Creating a basic example of SSR

We will now create a very simple server-side application to look at the steps that are needed to build a basic universal setup. It is going to be a minimal and simple setup on purpose because the goal here is to show how SSR works rather than providing a comprehensive solution or a boilerplate, even though you could use the example application as a starting point for a real-world application.

This section assumes that readers have a basic understanding of Node.js and are familiar with the concepts related to JavaScript build tools, such as webpack and its loaders.

The application will consist of two parts:

• On the server side, where we will use Express to create a basic web server and serve an HTML page with the server-side-rendered React application.
• On the client side, where we will render the application, as usual, using react-dom.

Configuring our project from scratch with webpack

Both sides of the...

Implementing data fetching

The example in the previous section should clearly explain how to set up a universal application in React. It is pretty straightforward, and the main focus is on getting things done. However, in a real-world application, we will likely want to load some data instead of a static React component, such as App in the example.

Let’s assume, for example, we want to load Dan Abramov’s gists on the server and return the list of items from the Express app we just created.

In the data fetching examples in Chapter 12, Managing Data, we looked at how we can use useEffect to fire the data loading. That wouldn’t work on the server because components do not get mounted on the DOM and the life cycle Hook never gets fired.

Using Hooks that were executed earlier will not work either because the data fetching operation is async, while renderToString is not. For that reason, we have to find a way to load the data beforehand and pass it to the...

Using Next.js to create a React application

You have looked at the basics of SSR with React, and you can use the project we created as a starting point for a real app. However, you may think that there is too much boilerplate and that you are required to know about too many different tools to run a simple universal application with React. This is a common feeling called JavaScript fatigue, as described in the introduction to this book.

Luckily, Meta developers and other companies in the React community are working very hard to improve the DX and make the lives of developers easier. You might have used create-react-app at this point to try out the examples in the previous chapters, and you should understand how it makes it very simple to create React applications without requiring developers to learn about many technologies and tools.

Now, create-react-app does not support SSR yet, but there’s a company called Vercel that has created a tool called Next.js, which makes...