Server Side Rendering (SSR). NextJs

Terms:

• CSR(Client Side Rendering) is the rendering of an application in a browser using the DOM;
• SSR(Server Side Rendering) is a technology that allows, using Node.js, to run JavaScript on the server at request time. Ready HTML with all the necessary texts and metadata is sent to the user or a search robot;
• SSG(Static Site Generator) is a static generation of all HTML pages of the application at the time of building. When the browser makes a request, the server does not generate markup, as in the case of SSR, but gives ready-made markup.

Why SSR and SSG are needed

One of the significant advantages of server-side rendering is the performance of the application. This is especially important when the user is using a phone or weak computer. Modern web applications, use such technologies to simplify the life of the user and increase the profitability of the project. However, this is not the only advantage, there are several others. Here they are:

Speed.

The server prepares the web application pages before submitting, so the user will see the content before the JavaScript is initialized in the browser. This is important not only to keep the attention of visitors to your web resource, search engines also take this into account. The shorter the loading time of the site, the more you get pluses in the ranking of search engine results.

SEO

Search engine robots, although they know how to run JavaScript, but they do so with great reluctance. When a search engine visits a site made with JavaScript, it sees an almost empty HTML document. The point is that JavaScript runs in the browser and only after it is initialized, it pulls in content from the server.

Increasing traffic

If social media users repost a link to your site with server rendering, a page snippet is automatically generated with a header and an image. Not only is it beautiful, snippets like this will help attract attention and drive more traffic to your site.

NextJs.

Next.JS is a framework for React with support for SSG, SSR, CSR, Typescript, preloading roots and more.

Using a framework like Next.js allows me to use different pre-rendering methods in development. I can use static site generation(SSG) for something simpler and not dynamic or apply server-side rendering(SSR) for dynamic content and more complex pages. With these tools, creating feature-rich web applications just got easier and faster!