How Nextjs is better than React- Comprehensive Analysis
Nextjs is a very amazing react framework, build and maintained by a company named Vercel. It is mainly used for Making SEO friendly websites, and it is used by companies like Netflix, Github, Uber and Starbucks.
When React is already so popular, Then why do all these companies use NextJS?
So, by using React application in this way, the search rankings drop greatly. The reason for this is it takes a lot of time for the first contextual paint to appear and according to core web vitals this is not a good thing. It does not give a good user experience. Nextjs solves this big problem by introducing page building strategies.
How Nextjs Works?
SSG and SSR in Next JS
There are many built-in utilities in NextJS. Now let’s talk about the most important feature of NextJS, which is page building strategies In Page Building Strategies. The first strategy is Static Site Generation. In SSG, NextJS converts your whole site into a static site beforehand. For example, you have written a blog which consists of one thousand posts, then your dynamic blog of one thousand posts will be converted into a static website, so that its delivery is fast and social media, bots and search engine bots can read your site properly.
For doing this, all pages can implement a method named getStaticProps( ), which will return some props, which will be passed to that page again. By doing this, whenever you will export the next time and try to build your whole website, then your whole NextJS website, which some way or the other uses React components only. It will be converted into a static site which you can convert into cache through a CDN, which means your content. Delivery will be very fast.
So often, if your data changes very quickly, then you can use another page building strategy whose name is Server Side Rendering. In Server Side Rendering every page can implement a method named getServerSideProps( ) and after implementing this, the resulting props, For example, in your getServerSideProps( ). You can request a fetch and you can get that data from fetchAPI or you can pass the same component as props. By doing this, whenever a user will visit your page, they will get the static page. After all, their work is done on the server, so the user will think your site is giving all the static HTML, but in reality, your site is doing some work on the server to fetch your content from the database. So, the users and the social media bots and the search engine bots will get the thing which they need, which makes them happy, and which makes your ranking good along with that, your user will also get satisfaction, because your core web vitals will be amazing.
Your first contextual paint time will be short and because your content is changing very fast, you can see all those changes implementing on the fly. If we talk about Static Site generation, until you build your site again, you won't be able to see the updated content, but by using this strategy you will always see the updated content. If you want your content to keep refreshing also, and along with that, you also want to build a static site, then you can use a page building strategy in between these two, in which you can pass a key named revalidate in getstaticprops. By doing this, whenever your server will receive a request, then your website will rebuild again after a certain period of time.
I hope I have explained it to guys what NextJS is and how does it make the powers of React more better.