Want to know more about the course “JavaScript Developer. Basic “? We invite you to a free webinar, during which the course teacher will give answers to all your questions.

There are several modern approaches to application development. The two most popular are single page applications (SPA) and server-rendered applications…

Single page applications are very efficient, although after some updates Google crawler has started to handle them a little differently, the SEO results for them are still not impressive. Server rendering allows you to more efficiently optimize applications for search engines, while their performance in this case will also be quite decent.

With the advent of great JavaScript frameworks like Next and Gatsby, there are more server-rendered applications, so let’s see why single page applications are not always a good solution, especially when you need high search rankings.

What’s wrong with single page apps?

Before deciding between single page apps and server-side rendering, it’s worth deciding on the content.

Single page apps only load one HTML page. Every time the user requests new HTML content, it is dynamically loaded by JavaScript by manipulating the DOM elements. But if you don’t have to load a new HTML page every time, why is there a problem with search engine optimization?

The fact is that search engines can’t index properly single page applications, as opposed to server-rendered applications. A single page application only loads the initial HTML page. As a result, search engines are unable to index content that is re-created using JavaScript every time it is changed, although it should be noted that single page applications have many other advantages: in addition to high performance, they load quickly even with low connection speeds and do not require high bandwidth. , work better on mobile, etc.

On the other hand, server-rendered applications, especially those built using Next.js, boast both good performance and SEO efficiency.

SEO (search engine optimization)

SEO (from English search engine optimization) is optimization for search engines, that is, actions to change your site to attract more organic search traffic. There are many different SEO techniques and tricks to keep in mind in order to make your website more attractive and accessible to search engines.

Next.js

Next.js Is a framework for statically generated or server-rendered React applications that opens up a lot of possibilities for developers: creating ready-to-use, zero-configuration applications, code splitting, exporting a static HTML page, and more.

Next.js will provide high search engine optimization results, and for this you do not have to do anything special – you just need to create an application. However, high SEO results are not specifically provided Next.jsand server-side rendering.

Let’s take an example how it works Next.js…

Next.js allows you to create an application in one command using a structure Create Next App:

npx create-next-app

Once you create the project, you will notice that it differs slightly from other templates created, for example, with Create React App.All application pages will be stored in the folder pagesand each of them will be a React component.

In order to generate a new route inside the application, you just need to create a new file in the folder pages and a new React component for it:

// pages/about.js
const About = () => (
   
    
About page
   
);
export default About;

Note. While working on an application, you can view reports on its SEO ranking even in the early stages, for example, using the service Lighthouse…

Creating a new application with Next.js is extremely easy. Let’s take a look at how Next.js can help improve your search rankings and drive more organic traffic to your site.

How to improve SEO with Next.js

With Next.js, you can significantly improve your SEO results, but you shouldn’t forget about other aspects of the application. If you want good SEO results, consider the following:

• Meta tags
• Special abilities
• Progressive Web Apps

Meta tags

Meta tags provide data about your page to search engines and site visitors. They affect how a page is displayed on search results pages and whether it can attract visitors to your site. Meta tags are not visible to users, but for an application that you want to bring to the top of search engines, this is the most important part of the code.

The meta tag tells the search engine about the type of content posted on a page, the topic of that page, and how the search engine should display it.

Next.js has a built-in component that adds meta tags to the container <head> your page:

import Head from 'next/head'

To insert a meta tag on a page, use the built-in component Head:

import Head from 'next/head'

const Example = () => {
  return (
     
      
        
        
      
      
Hi Next.js!
     
  )
}

export default Example

Built-in component Head allows you to avoid duplicate meta tags on the site - if you add the key property, the meta tag will be displayed only once:

You can increase the search rank of an app simply by adding a few meta tags to the page. Here you can read about important meta tags for SEO.

Check your code right now to see if there are meta tags in it and are they the meta tags you want? Trust me, the right meta tags are what you need to improve the quality of indexing and drive organic traffic.

Performance

Users are used to pages loading quickly and are not ready to wait forever. When developing an application, think about performance first. It is also one of the key search engine ranking factors.

Search engines, especially Google, use first content display time (First Contentful Paint, or FCP) as a key performance metric. FCP measures the time from when a page starts loading until the first content item is displayed on the screen. A low FCP will have a low SEO rank.

Through Next.js You can analyze FCP and LCP metrics (time to render most of the content, Largest Contentful Paint) by creating a custom App component and declaring a function reportWebVitals:

// pages/_app.js
export function reportWebVitals(metric) {
  console.log(metric)
}

Function reportWebVitals will be called when the final metric values ​​for the page are calculated.

Learn more about measuring performance in Next.js you can read here... Here explains what you need to work on to improve FCP.

SSL certificate

In August 2014, Google announced that it would take HTTPS into account when ranking. The secure HTTPS communication protocol provides an additional layer of protection for users who transmit their data to your site.

In order to connect HTTPS, you need to get an SSL certificate. A good SSL certificate can cost a pretty penny. How to get an SSL certificate for free with Next.js?

To do this, the application needs to be deployed on a cloud platform, for example Vercel...Vercel Is the company that created Next.js, so the integration will go smoothly. To deploy the application Next.js on the Vercel platform, you need to install the Vercel CLI:

yarn global add vercel

Then go to your project and run the command:

vercel

The project will be published on Vercel and protected by an SSL certificate.

Content matters

It is very important to properly present the content that your website visitors see. Creating a quality product is the main task of every developer.

Which application to develop - single page or server-side rendered - depends on what kind of content you want to show and how you want to get feedback from clients.

The Next.js framework is built for developing server-rendered React applications, which gives us great SEO, UX, performance, and more.It helps companies and developers improve the quality of their sites and projects and drive more organic search traffic. ...

Well, it's time to move on to Next.js and explore the full potential of server-side rendering applications. They will be useful for you and your company, and in general - they are just amazing! I assure you you will be surprised.

Conclusion

In this article, we took a closer look at the Next.js framework and learned how it can be used to optimize modern applications for search engines. We also sorted out general SEO concepts and covered meta tags, performance, SSL certificates, and so on, which are the aspects to consider when developing an application.

LogRocket: full visibility of web applications

LogRocket Is a web application monitoring service that allows you to repeat user problems as if they occurred in your browser. Now there is no need to guess why the error occurred, or ask users for screenshots or log dumps. LogRocket allows you to replay the session and figure out what caused the problem. It works great with any application in any framework, and you can also use plugins to add additional context from Redux, Vuex and @ngrx/store...

In addition to adding Redux actions and states, LogRocket records console logs, JavaScript errors, stack traces, network requests and responses with headers and bodies, browser metadata, and custom logs. It uses the DOM to write HTML and CSS on the page, providing pixel-by-pixel video replays for even the most complex single page applications.

Try it for free...

Read more:

• Questions I was asked in front-end interviews