Next Js — When to use and how to use
I worked on Next JS framework an year before, and at that time, I didn’t have much idea about it. I ended up somehow completing the task rather than using it properly. But now I am trying to learn from the basics and figure out my three questions: What, When, and ** How.**
What
Here, we start with Next Js. Next Js is a popular React framework introduced by Vercel for better SEO and SSR features.
What is the difference?
As all know React is a Library of JS and when we need to build something out of React we need to create a framework out of it by installing the dependencies we need. so there are a thousand varieties of React frameworks when we move from project to project. Here Next Js is a Framework of react Js, This has its own routing and components for rendering Images and much more.
But Next Js has more, Next support SSR (Server side rendering)
What is SSR — Why is it needed
SSR is a technology that renders the JS from the server itself. In the case of React, there is only CSR(Client-side rendering). As you know JS needs to render using a JS engine, Browsers have a JS engine to render this. so if we share a JS bundle build file, a browser can render the JS bundle itself and display it to the DOM. But when the browser renders it, this leads to high memory usage on the client system.
Why React have poor SEO
React renders its pages it needs JS to render the pages, But In the case of SEO, the search engine crawlers will read the XML files to access the content. but this crawler's Bots have no JS engine so from a React project all the Crawler bots see is a blank index.html without any content. It results in poor SEO on React sites. This not only limited to React but also on all CSR pages.
In case of SSR, the page render from server, that is a node engine in the server render the JS andf built all to an XML file and the result page will transfer to the client through API. So when the Crawler bot acess the pages the result that this Bots get is a XML with all the contents in it, so the Serch engine crawlers can acess and store the copntents in it, this leads to a high SEO rating for SSR components
When
So we learn about what is Next js and SSR. But when you need it an important questions. This SSR components come with some drawbacks also. an SSR component has no support on client intraction, it won’t support Events, Browser API’s and also no React hook support. So when we really need to use Next js.
Here are my suggections
- When we want to built a public website that need a high SEO
- When we have very less user intraction on the website
- When we need to hide the API keys from Browser
If i am developing an inhouse website for a coopration to use it in thier network, i don’t need SEO, in fact i need to hide this from the serch engine crawlers. In that case we can straight use CSR rendering.
But is that mean i don ‘t want Next js for those cases. NO
Here we want to learn about to routing options of Next and when we need to use those routing
Next JS routing — Page and App
In Next Js framework the routing is based on a folder stucture we create. its a standard of Next Js. But there is two type of routing Page and App
Page router.
This is a routing Next introduced in its older versions, we can route from a page folder and all the files inside the pages will be accesible on the UI using it name. But the important part is page router is a CSR componet.
Yes, when we create components using page route this will act same as a React component and it has poor SEO. But why we need this in 1st palce, becuse like i said abouve react is a library and when we need to create a website from it we need to create a framework, it lead to high initial setup time. But in case of Next page route, we can just create a it with CLI tools.
App router
App routing in introduced in latest version of react use the same folder stucture routing as page router, but only the files names as page will be accesible to UI. and as the main part App router pages is SSR as deafult. If we need to write a CSR component is app router we need to mention a ‘use client’ in the componet first line.
How
As we see, using app router in Next JS we can create SSR components with Great SEO. But how we solve the Drabacks. Yes SSR don’t support Events Browser API’s and React hooks functions
So we need to design the component as SSR and CSR in app router.
When we need to show a list of data from server to UI, we don’t need any client intraction, we just need to list the data and print the page to the DOM. so we can create this using SSR component, the Data list API will call from SSR itself from server and create the XML and pass it to the browser.
And in case of a create page component, we need to handle the client intaractions and State to manage the value, here we need to use CSR component using ‘use client’.
But we need to remember a important thing while designing the components, A CSR component can create inside a SSR component. But all the components inside a CSR component will be a CSR component, we can’t create a SSR component inside a CSR component.
So we can’t plainly create a main page with CSR component and levarage the SEO.
Drawbacks of Next
There are no Drawbacks for any languages, only the usecase we use this. But i will mention some i found during the learning process
- Next Js need a server to run
- If there is high trafic expect on the site, the server need to be very powerfull to handle all this rendering.
- Complex to design SSR and CSR components
- High learning curve compare to react
Conclusion
Next Js is a powerfull framework to counter the poor SEO of React and also to follow a structured framework on react, but there are many cases that we don’t really want SSR and just need page route. So when ever we want to choose Next js we need to think about our usecase.
All the things i mentioned in this Blog is from my learning, so please correct me if anything i mentioned is wrong, please use the comment box to communicate, or contact me on Linkdin
Top comments (0)