Server Side Rendering with Next.js

Server Side Rendering (SSR) is a method of generating app directly on the server. One of its benefits is a high performance because when a user sends a request to get code, the HTML and CSS part is already available and displayed immediately. Javascript is downloaded afterward, and that's when our app is fully interactive. 

Thanks to SSR, the app is also better visible for search engines, which is great for SEO and Google indexing. In this article, we will look at a few software frameworks, namely Next.js, React framework for building Server Side Rendered apps.

Let's get started!

When we are trying to learn new technology, it's a good idea to start by looking for documentation. Next.js provides rich docs about every aspect of the framework. Starting from setting up a new project, through all of the core features: generating pages, fetching data, CSS tools, and Typescript support, routing, and deployment. Each section is clear and provides helpful examples.

Another great thing in documentation is an interactive tutorial, which will lead you through all base concepts needed to feel comfortable using Next. Throughout it, you will create a simple app that will use that framework’s most important features. Moreover, in the Github repository, you can find the “examples” folder with code showing how to use Next with additional tools: Redux, Chakra UI, many different CMS, etc. All of these things provide great Developer Experience, so working with Next is fun and fast!

How to setup Next

Setup is maximally simplified, thanks to npx. You can use “npx create-next-app” to get the default starter, or you can use the “--example” flag to get one of the examples from the Github repository mentioned above. Everything is configured out of the box, and you can immediately start development. If you want to, you can create a new project from scratch, which is also very simple. All you have to do is to install a few dependencies, add a start script, and you are good to go. Things like adding Typescript or SASS are limited to installing required packages and creating config files.

If you were using Create React App for your React apps, you know that changing config isn't easy. You have to eject the app or use something like react-app-rewired to overwrite configuration files. You don't have to worry about it in Next! If you, let's say, want to change something in babel, you simply create new .babelrc and put in it new config options. After you restart the dev server, your config will have precedence over the default one. Next.js also comes in a package with a simple CSS-in-JS solution and CSS modules.

Creating the first page

In a classic React app, you have a lot of freedom when it comes to structuring. Next inherits a lot of that, but there is one change. To make any page visible, you have to put it in the pages directory. When you create, for example, `login.ts` in pages, Next will automatically create a new page out of it, so if you visit `localhost:3000/login`, you will see the contents of the login.ts file.

Let's imagine that you want to create a nested route with a dynamic page, something like that: `localhost:3000/products/some_product_name`. Nested routes can be created by adding a new directory to pages, and the dynamic part is resolved by wrapping the name of the file in square brackets. So whole structure for that route would like like this: `pages/products/[name].ts`

It's great that you don't have to handle routing yourself! One of the drawbacks of that approach is that except dumb and smart components, you also have pages, so you have to keep attention to creating good structure in your app.

Server Side and Static Generated pages

As I said at the beginning of the post, Next supports Server Side rendering of pages. Next.js 9.3 introduced another type of rendering: Static. You can learn more about it in my other post about Gatsby.js). So now, you have full control over how you want your pages to be rendered. Some of your pages may be rendered on the server, some statically, and some on the client. It makes Next.js a very flexible solution.

To generate a page on the server side, you have to use the `getServerSideProps` function inside the page you want to server side render:

Now your fetched items are available as props in the given page:

If you would like to fetch data on build time, using statically generated pages, you just have to use the `getStaticProps` function. Rest is the same.

As you can see, Next provides an easy way of controlling how each page should be generated. It gives flexibility and a lot of possibilities of how we can create our app. Thanks to that, we can provide excellent User Experience, SEO, and optimization.

Extra great features available in Next.js

Besides the topics covered above, Next also provides many different things that can be very helpful:

• Code splitting: Next.js optimizes bundles using a special splitting algorithm created by the Google Chrome team
• Preloading pages: Typically, the page is downloaded when you click on <a> link. Still, when you use <Link> component, Next.js prefetches page, so by the time you navigate to that page, it's probably already downloaded. It makes the app way faster!
• Simple deployment: Creators of Next.js are also responsible for creating Vercel, an "all-in-one platform with Global CDN supporting static & Jamstack deployment and Serverless Functions," making deployment really easy. You just need to sign up to Vercel, push your app to GitHub, GitLab, or BitBucket. Then on Vercel, you import the app from the selected Git provider, and it's all done. Plus, every time you push changes to the remote repository, a new deployment will be automatically created.

So, what is the verdict on Server Side Rendering with Next.js?

As you can see, Next.js provides a great, complex solution for Server Side Rendered apps. If you want, you can also leverage the power given by Static pages. Thanks to the fact that Next comes with many features out of the box, we can focus on creating excellent and fast applications instead of spending time on configuration!

If you have any questions about Next.js or server side rendered applications, please feel free to get in touch with us! Write to us: hello@startup.house