Over the last decade, technological advancements have really shown us how powerful web development frameworks can be for the individual and the business, no matter the ambition or goal. When we look at the progress made and the sheer ability of the frontend, everybody now relies on at least one commonly used and accepted library or framework, and as a “leader” of that specific category, React.js offers an amazing set of solutions to help turn a small pet project into an online business.
This infers that for teams of developers (or at least an individual, like yourself, reading this text, perhaps), who wish to bootstrap the SEO (side of things with the actual product, code-wise, no external online tools (other than the NPM packages you would install on your React application) are necessary for you to make an impact on Google rankings.This is what we want to highlight through a rough comparison – because plain React is rendered on the client-side, whereas Next.js can help you achieve better results (TL; DR the final output is compiled and rendered on the server and available for search engine indexers effortlessly). We at SABO use both approaches, depending on the client’s requirements (some projects very specifically require a React app with server-side rendering features, while others are okay with it being rendered on the client-side), so without providing any bias, we hope you’ll enjoy this read!
When the core library was being designed, the React team did not pose any intentions for focusing on any SEO features. A performant and reliable frontend library ideal for single-page applications (SPA) was key, and they delivered on that promise, which was only backed up by the huge spike in its popularity. Not a lot of time passed until a plethora of NPM packages were published to support the attempt at making React a viable choice for SEO-oriented businesses – react-helmet (whose initial public version was published all the way back in June 2015) and react-router (1.0 released in November of the same year) come to mind as two of the most popular, and we’re sure you’re familiar with both. One provided the ability to inject any meta tags (crucial for SEO and social networks) into your React application, and the other provided the ability to fake routing, so that your React application wouldn’t turn out to be a real single-page application (with nothing but the root directory’s index.html).
Another very important aspect of performance you want to investigate is lazy loading images. You probably noticed this already on some websites – when a website loads, you cannot see any of the content at all until everything is loaded, including a huge, 3-megabyte cover image or a video. HTML now natively supports a lazy loading property, but since that arrived only recently, image optimizers and programmatic loaders have advanced quite significantly. They are also available in React through external packages, which listen to the scroller moving up or down the browser window.It’s a bit of a downside, since it’s not provided natively.
To better understand the topic at hand, we should discuss what technical SEO is and how you can test your project against some of the predefined key metrics. Technical SEO is a concept of building and providing a fast and stable experience on the Web to not only the search engine crawlers, but also the end users, and that doesn’t include the content, for which you’ll need additional effort. It’s just as important as plain-old SEO, but with entirely different aims.
The most basic set of things you must cover if you want a sound web application in terms of how it’s technically optimized are:
· Site speed
· A mobile-friendly experience and layout
· Optimal Indexing
· Ease of crawlability
If you’re not sure how to get data from which you can improve on these sections, or technical SEO in general, check out Lighthouse, a free browser plugin provided by Google that tests any given website against a tightly specified set of criteria, which we won’t dig into.
The conclusion here is quite simple – whichever way you look at it, plain React is just not suitable or even meant tobe for pages showing frequently changing data. Therefore, pre-rendering the final web application’s data became a necessity for some, and that is how server-side rendering came to be.
Being an increasingly popular sensation in terms of providing a server-side rendering framework while staying true to React, Next.js is the hottest thing around! This fantastic framework provides features for building and shipping an incredibly flexible, yet statically rendered web application out of the box! Built-in routing, built-in support for injecting meta tags, external CSS files, and scripts into the head section, just like React Helmet, but “natively”, lazy loading images, and so many other features are all included once you create a Next.js project. Hulu, AT&T, Nike, and IGN are just some of the corporations relying on it, and whenever our developers at SABO get an opportunity to work on a Next.js project, they take it on with delight!
As a concept, server-side rendering has been around for a very long time, and what Next.js does is quite simple: for each page (route) you create in your project, the compiler will create a folder for it, and all the compiled code relevant to that page will live only inside that folder. It’s exactly how search engine crawlers work, and if the final output is neatly organized (which it is), the rankings of each page will have a much higher chance of achieving a high ranking on any search engine.
When you build a Next.js project, you cannot only set the meta data for your entire project (which plain React also accomplishes, by the way), but you can also set them per each page, so that your content strategy (expectation) aligns perfectly with the codebase (result). When you incorporate this into a project that compiles and splits up the code on the server, where search engine crawlers will inspect the project’s content for the purposes of appropriately ranking each page, you get the best possible outcome in terms of SEO. From that point on, your focus should only be fine-tuning the performance indicators (by introducing more lazy loading, for instance).
React with Next.js is what you’re looking for if you or your business cares about technical SEO or wants a serious online presence. Despite server-side rendering being the #1 advantage of Next.js for SEO specifically, you should never discard a plain React application, simply because sometimes you don’t need to build and ship a product with technical SEO topping your list of priorities.
