Table of Contents
What is React.JS and how does it work?
Most React.JS web applications are built as a Single Page Application (SPA) with client-side rendering. A SPA is a web application that is designed to be displayed as a single, static page. Since the user always stays on the same page, elements such as the header and footer (which largely stay the same across pages) do not have to be reloaded. Single-page applications rely on client-side rendering making them hard to parse for search engine bots.
React Applications are built with just a single root DOM node.
const root = ReactDOM.createRoot( document.getElementById('root') ); const element = <h1>Hello world!</h1>; root.render(element);
Once the interface changes (e.g. the user toggles a button), React then uses the virtual document object model (DOM) to compute the necessary DOM operations to re-render the User Interface. React updates the virtual DOM and then compares it to the real DOM possibly triggering a rerender of the element on the real DOM. The virtual DOM helps to isolate the specific updates that are needed for the real DOM. The state of DOM nodes outside of the updated DOM nodes is preserved. Updating the DOM is done automatically by React.
React introduced the component-based architecture. A component of interactive user interfaces is a small feature that makes up a piece of the user interface. For example, a burger menu or a product description can be individual components. The component-based architecture breaks down a large user interface into individual pieces (components).
- The framework helps with image optimization. Many web pages are bloated with large images which also happen to be in the wrong format (e.g. .png instead of .webp format).
- The app should have great integration with a hosting service to ensure fast loading and caching. Deploying the application should also be easy to make the experience for web developers seamless.
To increase your chances of winning on SEO, you should aim to pass the Core Web Vitals (CWV) test (pagespeed.web.dev). Generally, speaking CWV tests if the users of your website have a good experience when they visit your website. Specifically, they test if your website loads fast, if elements do not jump around the screen after the first render and if the website is accessible to users. Next.JS has some best-in-class features that help to improve the CWV score.
You can read a more detailed description here, but these are the components that make Next.JS the right framework for SEO:
Pre-rendered HTML pages – Next.JS allows you to pre-render some pages making them blazing fast. Incremental Static Regeneration (ISR) gives you the benefit of static pages without having to build the entire website during the build. In addition to time-based ISR (rebuilding the static website every X minutes), Next.JS has recently introduced on-demand ISR (rebuilding the website based on your request). Depending on the nature of your page, you can use client-side rendering, static page generation, server-side rendering and incremental static page generation.
Image SEO – Next.JS has an in-built image component which helps to optimise the size, format and caching of the image. Images are a frequent problem when it comes to building fast web pages. It is not uncommon that images are 2 megabytes and in jpeg format. After resizing and changing to webp format, they are 100kb. The Image component of Next.JS can remove all this overhead for you.
Code splitting – Next.JS supports code-splitting letting you only import the components. To score high on CWV, it’s important to get all the CWV in the initial viewport right. Code-splitting can help to import elements outside the initial viewport only when needed. In other words, once a user scrolls down, they will be loaded. This trick can make the loading of the elements in the initial viewport much faster (because you delay loading the rest of the page).
Asynchronously load third-party libraries – Many websites import a number of third-party libraries leading to slow page speed. Next.JS Script component lets you choose different loading strategies offering. Specifically, loading googletag manager, Facebook/Google pixel and other marketing libraries can be loaded asynchronously.
Vercel – Next.JS has the best integration with Vercel out of all the React Frameworks. Vercel (the parent company of Next.JS) is a platform for front-end frameworks and static sites. Vercels edge network serves as a CDN, caching and allows you different rendering methods out of the box.
Is Gatsby.JS good for SEO?
Gatsby hits its limitation when it comes to large websites (10,000+ websites). Often, it is not possible to statically build that many pages (and you might incur high costs doing it). For example, Vercel build timeout happens after 45 minutes which is not enough time to statically generate that many pages. Gatsby is great for smaller projects and its HTML is highly crawlable by Google and other search engines.
Is Remix.JS good for SEO?
Next.JS has seen more adoption by the community (approximately 4x more stars on Github) and Next.JS is currently used by a number of enterprise clients. In other words, Nextjs is a more established framework with a larger community. Remix is more focused on speed and ease of development for an individual developer.
If you want to build an SEO-compliant website, you should use Next.JS. Next.JS offers multiple rendering methods, let you code-split, and asynchronously load third-party scripts and is deeply integrated with Vercel.