4 Main Advantages of Using Next.js
Hello everyone, if you are familiar with React in web development, maybe you have also heard about Next.js. In that blog, I am going to write some advantages of using Next.js in your projects. Let’s start.
What is Next.js?
Next.js is a react framework which also provides server side rendering and static site generation which result in better search engine operation (SEO) and user experience. To learn more, you can check the official site.
1- Better Search Engine Optimization
Next.js provides better SEO since it supports server side rendering (SSR), static site generation(SSG) and client side rendering(CSR). Thanks to that, written code can be executed both in client side and server side according to the developer preference. If written code is executed on the server-side, it means that when Google Crawler request your html file, the server will deliver pre-rendered html so that the crawler can see a context when enters the website. Since there is a pre-rendered html, crawler can easily parse your html and do optimization for google. If you write your application with React only, the context of your html will be ready after javascript is executed on the client side. Therefore, there is a blank page when the browser gets the html file from the server until the javascript code is executed. (When you enter a website, right click the page and select the view source code, if you see some context in the body, it is better for SEO).
2- Faster Loading Time
When a client visits your website, your browser sends a get request to the server in order to get html file. When browser gets that html file, it starts parsing the file and when it encounters with <script> tag, it fetches the javascript file from the server. After that, it executes the javascript file and finally it renders the context on your screen. In that case, if your browser fetches a larger javascript file, it will take time to load that file from the server. For single page applications, browser loads larger javascript file often. Thanks to next.js, your written javascript code is splitted into small javascript bundles and those bundles are loaded according to relative path. In addition, your react code is executed on the server first, and the html is rendered on the server side. Thanks to getStaticProps and getServerSideProps functions which are provided by Next.js, you can determine whether your code will be executed on built time or run time. If your data is changing frequently, you should fetch that data inside the getServerSideProps as it will be executed on the runtime (each request).
3- Better User Experience
Since your react code is executed first on the server side, there is a pre-rendered html file waiting for the request. When a browser request that html file, the server will provide that file and user will see a pre-rendered html immediately instead of waiting javascript code to be executed on the client side. Remember that, not all your code can be executed on the server. For example, your server can’t understand some client side terms such as window or localStorage. Therefore, you should use these terms inside the functions which are executed on the client side like useEffect.
4- Routing Support
Normally, you can use react-router-dom for your routes in the react applications. Thanks to Next.js, you can easily route your application by creating files below the pages folder in the next.js folder structure.There is file-based routing which provides better performance while routing
CONCLUSION
If you want to create an application which is important for SEO and load time optimization, you should use Next.js but if you do not want to deal with SEO, you can keep doing client side rendering. For example, dashboards or admin panel applications are generally rendered in the client side since those things don’t need SEO so much. Therefore, rendering those applications on client side will provide better UX but users will load a larger javascript file at the beginning. Remember, next.js also provides other valuable developer supports like routing or etc.