NextJs: React framework for Production

Tram Ho

What is Nextjs?

According to the official documentation, Next.js is a flexible React framework that gives you the building blocks for creating fast web applications.

Why Nextjs?

Multiple rendering techniques

Server Side Rendering is a technique when you want to get new data from the server, the client will pass the necessary parameters to the server and get all the html from the server. With this approach, our application is not reactive. When you search something, filter something, click something, it will reload the whole html. It is not very friendly when you have a lot of data and users need to spend time looking at a blank screen while your site is loading data. But it’s good for SEO because it always returns html and google bot knows what your site is about.

Client Side Rendering is a technique when you pass param to the server from the client, you will receive json data from the server. For that reason, you’ll save bandwidth, your pages will load faster, and be more responsive. Nowadays, good frameworks like React, Vue, Angular do these things very well. It also handles or at least, gives you a tool or a transpiler with clear instructions to work with old browser, bundle, minify, split. It will make your application faster and more compatible. However, the big disadvantage of this method is that it is difficult to SEO. Why? When you load a page, in case of React, you only have one html element with the id as root, which React will then process to render the rest. And google bot only see html element before React renders the rest so it only see your page with html element with id as root. For that reason, it doesn’t know what your site is about and lowers your page rank.

Static page generation is a technique of generating html files during build time. For example, you finish your rollout deployment, you build your project, it will generate the trailer html file and store it in your project. So when the user wants to see your referrer page, the website will return that file instead of calling data from the server. Then it will be much faster. It’s fine if you don’t have a lot of changes to your site. Like about page, login page, landing page, … you won’t change often or don’t often have new data, so these pages use SSG very well.

Usually you don’t have all these techniques in your application because there is no framework that supports all these rendering techniques until Nextjs. Before Nextjs, if you wanted SSR, you could use pure PHP, Laravel + Blade or Symfony + Twig. If you want CSR, definitely use React, Vue or Angular and SSG would be where you want to use gatsby. In Nextjs, you can choose the rendering technique you want. Thus, you can have site A with SSR, site B with CSR, site C with SSG. How cool is that?

Efficiency

To speed up your website faster, you need to take care of many things like code splitting, file minification, image optimization, how to get content and many more. Thankfully, with Nextjs, you don’t need to care much about this. If you use the right component provided by Nextjs, it will do all the heavy lifting for you. A small example is when you have an image on your website, you need to take care of 2 basic things. First of all you need to have different size of that image for different view. Second, you want your page to load that image only when the user is near it, so you will have a very long page and of course you don’t want to load the image at the bottom of the page without the user seeing it when the page is on. loaded. When the user scrolls down near the bottom, that image will be loaded. Therefore, to solve these two problems, you need to add srcset and apply lazy loading to your image. With the simple Image component, it automatically handles these two things.

Routing

In Nextjs, it routes based on the file. In my opinion, it’s more user-friendly to route based on files. In case I want to find the component for the /posts/ route, I can easily know that I need to go to the index file in the posts directory. No need to see which component is used for that route.

SEO

Nextjs provides the Head component. With this component you can always add description, title, meta tag on title in Nextjs. For that reason, it will be better for SEO.

Conclusion

It’s a short introduction to nextjs. In short, it provides us with many ways to render the page, helps us to improve performance, file based routing, provides us with SEO and more.

Share the news now

Source : Viblo