Nextjs, the future of Reactjs for web development
Sanjay Adlakha
Vice President – Cloud Engineering and App Modernization at CitiusTech
Borrowing the phrase from its website – “The React Framework for Production”, Nextjs is truly awesome…..For someone who loves the freedom React provides, Nextjs is a natural next step. Do a right click on a react rendered page and you will find no useful <HTML> tags. This is because React is client side rendering (CSR) based architecture. Due to this, it suffers from poor search engine optimization (SEO), which is a lifeline for public facing websites like ecommerce, SaaS/B2B products, blogs, digital marketing etc. Initial page load speeds suffer too (this problem is mitigated thru techniques like lazy loading, suspense etc. but that requires more packages to be installed) . That’s where Nextjs steps in with many native features to solve these real world problems.
By default Nextjs pre-renders HTML for every page on server side itself. There are two types of pre-rendering – static site generation (SSG) and server side rendering (SSR). In SSG, HTML generation happens during build time. And in SSR, HTML is generated on each call to server. And you can choose and combine different rendering types for each page/component. This flexibility delivers a punch in page load performance. The same flexibility is extended over data fetch (API/DB) situations as well. So even if there are DOM components which are dependent on external data or user defined routes, there are methods (getStaticProps, getStaticPaths) available in Nextjs that can be used to pre-fetch static data (SSG) from external sources and/or pre-determine browser routes (/home/user1, /home/user2……./home/userN). Another method that’s useful is getServerSideProps. This one comes handy when you want to fetch data that’s frequently changing (like news feed, total # of COVID cases or something else) from an external source and cannot rely on static pre-generation of it (SSR).
Below is an example code snippet of getStaticProps method.
That brings me to the best part of Nextjs. One that will surely blow your mind away. Let me begin with the problem statement.
There would still be some situations where part of the DOM tree is dependent on user input data (like live image search, add item to cart list etc.) and therefore one cannot rely completely on SSG or SSR. For these situations, Nextjs allows you to couple SSG/SSR with CSR. So, basically pre-render maximum possible HTML and then rely on client side JavaScript to do the rest, making it a single page architecture (SPA) at the same time. This is a very potent combination to make any complex and heavily interactive, internal and public facing web application run blazingly fast and not even compromise on SEO.
Recommended by LinkedIn
Another cool feature I liked in NextJs is dynamic routing. The <Link> component from next/link package uses default file-system based routing to make this happen. It almost makes you think as to why one was writing complex code using multiple packages (BrowserRouter, Switch, NavLink, Router dom and what not) in Reactjs, when it’s a breeze with Nextjs. Below is a comparison between the two.
{Left view is Reactjs, Right view is Nextjs}. Count the highlighted LOC on both sides !!!
In conclusion, if I could just make a wish to Nextjs creators it would only be to improve one-way data binding and complex state management due to it, a problem that originated in Reactjs, in the next versions of Nextjs. But still, there are multiple other features in Nextjs in addition to above (like SWR, image optimization, fast refresh, debugging, free hosting on Vercel domain) that do make me believe in the growing community behind it when they say, “Nextjs is the future of Reactjs”.
[SWR: is stale-while-revalidate is a hook in Nextjs that utilizes internal HTTP cache-control extension which allows cache to immediately return a stale response while it revalidates it in the background, thereby hiding latency from client]
Vice President @ Wipro | Healthcare and Life Science Sales Leader
3yWow! Need to check this out.