Many of us know that React is the most used library by developers to build web applications. It's because of its easily maintainable folder structure and its focus on what to show on the UI(it is view based) with the help of its friend Virtual DOM. And it follows component-based ui to render onto the browser so that we can reuse these components later.
So what are the drawbacks of this particular library from not using this library directly for a website? Let's discuss that.
The main problem with this library is that the production build of this project does not provide SEO optimization. Let's understand more about this.
Whenever we create a website, to make this appear on the search results, what these search engines do is that they give page rankings to all these websites.
Depending upon these page rankings the results appear on the search results. These search engines see only the HTML/CSS, not the javascript. And the content present on the page is used as the keywords to show the relevant search results.
We know that initially, the react server is going to send an empty page with a div element with an id root. Then the javascript code is executed and prepares the final output and then renders the output into that root element. This happens the same in the development mode and production mode.
So when the Search Engine crawlers try to fetch the page it only sees the HTML/CSS, which is going to be empty in this case.
So we can say that even if we build large web applications with React there is a high chance our website may not be on the top search result.
And with React we can only build single-page applications. To enable routing we need to install an extra package called react-router.
So Vercel company is trying to solve these kind of problems. They came up with a new web framework on top of React known as NextJS.
NextJS make use of React library and added new features. Let's explore some features of the Next:
1)Server-side rendering(SSR): Next js enables server-side rendering, allowing your web page to be rendered on the server and serve the page statically to the end user.
And then once the webpage is received, all the other code is fetched and at last it simply becomes a react application.SSR improves search engine optimization by providing content that can be indexed by search engines.
2)Built-in routing: You can create dynamic and nested routes, making it easy to build complex applications with multiple pages and URLs.
3)API routes: Next.js includes an API routes feature that allows you to create serverless API endpoints within your application.With this functionality, it makes it convenient to build both frontend and backend functionality within the same project.
During deployment, next js knows and identifies the frontend code and backend code
4)Code-splitting: It automatically code-splits your js bundles, which means that only the necessary code is loaded when a user visits a page, and all other pages are loaded on demand. This improves initial loading times and reduces the overall bundle size, resulting in better performance.
Hope this article gives you a better idea of why we need to use Next js.