React SSR with Next.js #1. Concept of Server Side Rendering & basics of routing

JavaScript

This entry is part 1 of 2 in the React SSR with Next.js

In recent years, the popularity of client-side Single Page Applications skyrocketed, for various reasons. Following its principles, we build pages with the amount of interactivity that we didn’t have before. When using React to render the page the “regular” way, the server sends a blank page and the JavaScript files. By doing that, the browser can render the content on its own. The significant advantage of that is that we release our server from the above responsibility. That comes with some drawbacks too, because putting too much strain on the browser can worsen the experience of your users. Another reason that might make you worried is Search Engine Optimization (SEO). Google, in its docs, states that it’s difficult to process JavaScript and not all search engine crawlers are able to process it successfully or immediately.

Introduction to React Next.js Server-Side Rendering

While the above might improve in the future, we can take matters in our own hands and add the Server-Side Rendering (SSR). Applications like that are sometimes referred to as isomorphic because they render both on the server and the client side. To visualize the behavior that we want to change, we use Create React App.

Let’s inspect the outcome in the browser.create react app

We can see the fully rendered page. If we look into what the webpack-dev-server serves us, we can see that it is just a blank page with JavaScript.

Introducing Next.js

As you can see above, the browser does all the work of rendering the content. To change the above behavior, we can use the Next.js framework. By adding SSR, we change the initial response of the server so that the browser can display something right away.

Please note that we don’t use Create React App here. Those are two seperate project and while probably we could make them work together, it is not working out of the box

The first concept to cover is the   directory in the root of our project. Any file that you put there becomes a new entrypoint for our application. Let’s start with the first two components:

/pages/index.js

/pages/about.js

Add those scripts to your package.json:

and run  . The above creates two pages for us:   and  and it is the most basic routing that we can implement with Next.js.

When we look into the DevTools, we can see that the components are already rendered when served for us.

What about interactive content?

In a typical React application, we can see something like that:

With the  , we render a React element into the DOM in the supplied container. But in our situation the div that we want to use to render our application isn’t empty: it has a pre-rendered view. Let’s try something interactive:

/pages/index.js

When you open the page prepared by Next.js you can observe that the above code works without issues.

First, the client receives the prerendered view. Then, the React attaches itself to it using a   function that is similar to , but it is suitable to use with the SSR content. Thanks to that, the user can interact with the page.

The basics of routing

The Next.js framework comes with its routing solution, and we use it instead of React Router. To create an anchor to another page, we use the Link component.

/pages/index.js

All pages are lazy loaded. It means that once we click on the link, the new page is fetched and rendered in the browser. It also includes a proper code splitting, so that the user does not have to download code that unnecessary at the moment. An example of that is the fact that when we visit the main page, the code of the   page is not yet loaded.

The above means that additional data is loaded when the user clicks on a link, what can cause the need for the extra content to load. Fortunately, Next.js gives us an easy way to prefetch the content of multiple pages.

If we use the   prop in production, Next.js adds the   tag to make sure that the JavaScript that additional pages need is fetched before the user needs it.

Since Next.js 8, it can even detect 2G internet and disable the prefetch on slower network connections

Using the router programmatically

Aside from using the Link component, we can also change routes manually using the Router.

As you might have already noticed, it is quite similar to the React Router. You might wonder what about prefetching – it can be achieved with the   function of the router. The only issue with it is that you need to watch out not to use it on the server side of your JavaScript code. To ensure that, we can use the   Higher Order Component and call   in the   lifecycle method.

With the above code, the browser prefetches the   page as soon as the Home component is mounted.

Our code runs in two different environments

One of the challenges when writing an application with Server Side Rendering is taking into account that our code runs in two different environments.

The first of them is the browser – when we interact with a page, the browser runs our JavaScript code.
The second is the Node.js on the server side. When the user makes an initial request, the server renders the view for him in the Node.js environment.

If you would like to know more about Node.js in general, check out my Node.js TypeScript series

Let me illustrate it for you:

/pages/index.js

/pages/about.js

The first time we try to load the   page, we do it by clicking on a link. By doing that, the JavaScript code of the   page runs in the browser. The second time we load the   page is by refreshing and since it is an initial page request, our JavaScript code runs in Node.js. Since there is no global window object there, we experience an error. Keep that in mind and watch out for such pitfalls.

Summary

Today we covered the very basics of React Next.js Server-Side Rendering. We learned about both the benefits and disadvantages of that solution. While doing that, we’ve covered the basic of how does the Next.js framework works. We’ve learned how to implement the routing and what to watch out for when starting to learn Next.js.

Series NavigationReact SSR with Next.js #2. Prefetching the data with getInitialProps >>
avatar
  Subscribe  
Notify of