Progress

What is Next.js ? React.js framework with SEO

Introduction: Next.js is React.js framework for building modern SEO friendly websites. Next.js provides automatic performance optimization features.

What is Next.js ? React.js framework with SEO

If you are a React.js developer or getting started with it then you must have heard the name Next.js. You might be wondering why we need an additional framework for a framework, and what actually is Next.js?

React.js is amazing frontend framework and it has changed the way we were building the web with repetitive HTML and CSS. If optimized well with better tech stack, React.js websites load content in a flash of time.

But, every framework comes with some downsides along with great features and the modern React.js framework has modern problems.
The post is focused on Next.js so I will try to focus on that only illustrating the common React.js problems in short.

Problems with React.js

SEO

Search engines are evolving to understand modern frontend frameworks. But the days are far away when they will be SEO friendly as prerendered pages.

React.js renders the content on client-side in browsers. But search engine crawlers are not Javascript friendly. So in some cases, they might not read the content of the page.

Code splitting is a burden

If you are a React.js beginner then the common workflow you use for learning is create-react-app->develop->build->publish web->showoff.

This is not bad but the React.js in production requires much more effort in code splitting such that only the required code for visible components loads.

Some components are hidden conditionally and their code is not required to load unless the user wants to visit them.
Like a Comment component can be hidden on a post page and load only when the user clicks on the load component.

Code splitting can reduce the initial page size which leads to faster load time.

What is Next.js?

Next.js is a React.js framework which has inbuilt Node.js server that provides some amazing features like:

  • Server-side rendering
  • Automatic static optimization
  • Static site export
  • Automatic code splitting
  • File-based routing (can be advantage or disadvantage depending on application complexity)
  • No need of separate server (if building a simple application)
  • Free Hosting

In simple words, Next.js is React.js but with additional powers. If you are comfortable with React.js then it won't take much time to learn Next.js.

I learned the basics within 3 days. You can visit the official Next.js tutorial, it is great to follow and learn by examples.

Now we can talk about the features offered by Next.js in detail.

Server-side rendering

Client-side rendering is not the best option for SEO, but what if all the rendering is done on the server-side and you get an HTML page with content even when Javascript is disabled.

The server renders the page and sends HTML page to the client. Definitely the server has to do additional work and load increases. The initial server response time in page speed analysis is high.

Automatic static optimization

Next js automatically optimize the pages which do not have server-side data dependency. On build time Next.js checks the absence of getServerSideProps and getInitialProps and optimize the page during the build time.

The optimized pages are as fast as static pages and they don't require server-side rendering.

Static export

Next.js observed the changing web and released an amazing static export feature. Now next js can export static HTML site if it doesn't have server-side data dependency.
This makes it an alternative to Gatsby.js (actually better due to SSR and other Feature).
You can read an in-depth comparison between Next.js and Gatsby.js.

Automatic code splitting

This is an amazing feature because we don't have to configure anything for speed.

Next.js automatically and intelligently do the code-splitting so that only necessary data get loaded initially. It also provides features like dynamic import which can be used manually to further optimize heavy components.

File-based Routing

I have personally felt this as a disadvantage rather than any benefits.

Routing is much better when they are logical in one place rather then nested heavily according to sites structures.

If you are building a complex application with dynamic routes then at some point you will definitely get stuck in Next.js dynamic routing limitation.
The problem has the solution to use a custom server which is a problem in itself. OMG a problem loop, I hate dead ends.

Actually you can compromise with the structure depending on the site to get out of problems of dynamic routing.

No Need of Server for Simple Applications

Next.js already consists of a Node.js server which is good enough for simple use.

However, if you are building a complex application it is better to separate server and Next.js and connect then via API like React.js applications.

The reason why I recommend this is that most probably you will need Express.js for server and modifying Next.js server is not a good option if you want to use automatic optimization and other performance optimization features.

Free Hosting

Vercel  (the creators of Next.js) provides free hosting for Next.js applications. Note that custom servers are supported on Vercel hosting so if you have a custom Next.js server then consider DigitalOcean for hosting.

Note that custom Next.js server and separate Node.js server for Next.js, are different things. If you modify default inbuilt Next.js server then it is called custom Next.js server.

Next.js applications are very powerful, but powerful things need careful planning.

Same applies with Next.js, you can choose specific features offered by Next.js in specific parts of your application.

Let's take a quick example to understand the above line.

At average 10% of pages on a website drive 90% of traffic. If the website has a large number of contents then static export might not be the best option due to the build time. Here we can harness the power of automatic static optimization for those special pages and SSR (server-side render) other pages.

Hint: Use getStaticPaths and getStaticProps with the fallback option set to true (more articles on this topic soon).

For dashboard which is blocked for crawlers and not important for SEO we can disable server-side rendering for performance.

Summary

In simple words, Next.js is React.js framework for building modern SEO friendly websites. Next.js become popular because of simplicity in server-side rendering but now offers much more performance features.

Next.js is in active development with thousands of contributors and 53k+ stars on GitHub. You should try Next.js if you are a React.js developer and struggling with SEO.

Share the Post ;)

Related Posts