The use of client-side rendering libraries has exploded over the last few years with everyone from small businesses to large companies. Companies such as Facebook and Netflix use tools like React.js, Vue.js or some similar equivalent. These libraries allow developers to create more complex interactions with the webpage. They also split code into reusable components, and, provide an organisational structure that has been missing from front-end Javascript code in the past. NextJS is a new front-end framework, but if you are starting a new project why should you use it?
The Problem
Despite their usefulness, existing libraries have traditional suffered from one fatal flaw: poor scores for page ranking. Your page ranking controls how high up your page appears when someone enters a relevant search term into a search engine like google. This is why websites such as Myer show up when searching for shirts as they have a lot of content around clothing and have a lot of user interactivity.
Your page ranking is based on a variety of factors including security, accessibility, content, authority, metadata, and, page speed. It’s the last two that client-side rendering libraries tend to have issues with. Tools like React can have long loading times as they have to be downloaded from the server, then make calls to external resources server, and finally the application is rendered to the browser.
One of the most infuriating things about this situation is that code often fetches resources from the very server that it was served from. This means that it is performing wasteful requests for data that it already had access to on the server!!!
This not only leads to poor SEO but also poor user experience.
The Solution: NextJS
NextJS was built specifically to address these problems. Built on-top of React, Next provides three core features that minimise load times and maximise SEO as well as many additional useful features.
Client-Side Rendering
Since Next is a framework on-top of React you can leverage the features of React while reaping the rewards of Next. The focus of NextJS is to use the correct approach for the problem, so while the inclusion of React does not solve the time-to-load problems its inclusion allows developers to build complex pages within web applications while using other approaches for simpler pages. To reduce page load times Next recommends using SWR, a React library that handles requests including caching. Caching of requests can increase your apps responsive at no cost.
Server-Side Rendering
Server side rendering (SSR) was the main approach to developing web applications prior to the introduction of modern web frameworks. In SSR, the server fills in the page with the dynamic content it needs, then sends it to the client. NextJS does this by providing props to a component through the getServerSideProps function. Developers can implement this function to fetch the required resources. This improves SEO by allowing search engines to index the pages easily. Loading times are improved as the servers connection to the resources it requires are likely faster than a users.
Static Site Generation
The final weapon in NextJS’s toolkit is static site generation. Next will build some of your pages once reducing loading time and increasing SEO. Much like SSR, developers simply need to provide a getStaticProps function to fill in the pages content. When your application is built Next will use this to fill in the page content.
Takeaway From NextJS
NextJS provides three core tools to help you develop your applications with fast loading times and good SEO. Since it’s built on React, Next makes it easy to create useful and interactive applications. Next allows you to mix and match the different types of rendering methods it provides, allowing you to decide what you need for your use-case.
Overall, Next provides an easy way for developers to optimise your pages for both SEO and loading times using React as a familiar interface.