If you are a React.js developer or getting started with it then you must have heard the name Next.js. You might be wondering why we need an additional framework for a framework?
Ah! Frameworks loop.
Actually React.js is amazing frontend framework and it has changed the way we were building the web with repetitive HTML and CSS. If optimized well with better tech stack, React.js websites load content in a flash of time.
But, every framework comes with some downsides along with great features and the modern React.js framework has modern problems:(. The post is focused on Next.js so I will try to focus on that only illustrating the common React.js problems in short.
Problems with React.js
SEO
Search engines are developing to understand modern frontend frameworks better but the days are far away when they will be SEO friendly as prerendered pages.
React.js renders the content on client-side in browsers. But search engine crawlers are not very friendly with javascript. So in some cases, they may not read the content of the page.
Code splitting is a burden
If you are a React.js beginner then the common workflow you know is create-react-app->develop->build->publish on web->showoff :).
This is not bad but the React.js in production requires much more effort in code splitting such that only the required code for visible components loads.
Some components are hidden conditionally and their code is not required to load unless the user wants to visit them. Like a Comment component can be hidden and load only when the user clicks on the load component.
Code splitting can reduce the initial page size which leads to faster load time.
What is Next.js?
Next.js is a React.js framework which has inbuilt Node.js server that provides some amazing features like:
- Server-side rendering
- Automatic static optimization
- Static export
- Automatic code splitting
- File-based routing (can be advantage or disadvantage depending on scenarios)
- No need of separate server (if building a simple application)
- Free Hosting :)
In simple words, Next.js is React.js but with additional powers. If you are comfortable with React.js then it won't take much time to learn Next.js.
I learned the basics within 3 (full) days. You can visit the official Next.js tutorial , it is great to follow and learn by examples.
Now we can talk about the features offered by Next.js in detail.
Server-side rendering
Client-side rendering is not the best option for SEO, but what if all the rendering is done on the server-side and you get an HTML page with content even when Javascript is disabled.
Automatic static optimization
Next js automatically optimize the pages which do not have server-side data dependency. On build time Next.js checks the absence of getServerSideProps and getInitialProps and optimize the post during the build time.
Static export
Next.js observed the changing web and released an amazing static export feature. Now next js can export static HTML pages if it doesn't have server-side data dependency. This makes it an alternative to Gatsby.js (actually better due to SSR and other Feature). You can read an in-depth comparison between Next.js and Gatsby.js .
Automatic code splitting
This is an amazing feature because we don't have to configure anything for speed. Next.js automatically and intelligently do the code-splitting so that only necessary data get loaded initially. It also provides features like dynamic import which can be used manually to further optimize heavy components.
File-based Routing
I have personally felt this as a disadvantage rather than any benefits.
Routing is much better when they are logical in one place rather then nested heavily according to sites structures.
If you are building a complex application with dynamic routes then at some point you will definitely get stuck in dynamic routing limitation. The problem has the solution to use a custom server which is a problem in itself. OMG a problem loop, I hate dead ends.
Actually you can compromise with structure a little bit to get out of problems of dynamic routing.
No need of server for simple applications
Next.js already consists of a Node.js server which is good enough for simple use. However, if you are building a complex application it is better to separate server and Next.js and connect then via API like React.js applications.
The reason why I recommend this is that most probably you will need Express.js for server and modifying Next.js server is not a good option if you want to use automatic optimization and other performance optimization features.
Free Hosting
Vercel (the creators of Next.js) provides free hosting for Next.js applications. Note that custom servers are supported on Vercel hosting so if you have a custom Next.js server then consider DigitalOcean (free $100) for hosting.
Note that custom Next.js server and separate Node.js server for Next.js, are different things. If you modify default inbuilt Next.js server then it is called custom Next.js server.
Next.js applications are very powerful, but powerful things need careful planning.
Same applies with Next.js, you can choose specific features offered by Next.js in specific parts of your application.
Let's take a quick example. At average only 10% of pages on a website drive 90% of traffic. If the website has a large number of contents the static export might not be the best option due to the build time. We can harness the power of automatic static optimization for those special pages and SSR (server-side render) other pages.
Tip: Use getStaticPaths and getStaticProps with fallback option set to true.
That's all for this post. You can comment you query and suggestions. Found any mistake? Please let me know in comments.
If you like this article you can visit HolyCoders or get in My newsletter for more articles.