SSR, Next.js, Next.js 12 and React 18

When I joined Orka, the first task I was assigned was to explore the advantages and costs of upgrading the company's existing front-end framework to Next.js 12. This problem is actually a little bit "big" for the interns to tackle. There was no way, so I bit the bullet and took on the job. As a result, this research can be regarded as "one hair will move the whole body", and it immediately leads to many related concepts. This article is used to record some of my knowledge about the current front-end SSR field.

Why use SSR

If this story started a long, long time ago, it would have to be traced back to the back-end template era – yes, the Flask template that is still in use today (if you are familiar with Python's Flask framework, but SpringBoot also has something like that). Later, people found that the complexity of rendering with the back-end template engine gradually increased, so the work of "rendering" was handed over to the front-end. In React, it corresponds to our ReactDOM.render() method (changed in React 18 to be ReactDOM.createRoot().render()). Later, people discovered that if all the rendering was handed over to the front-end, it seemed that the computing pressure on the front-end would be greater. However, the greatest disadvantage of this is something called first paint.

First paint will negatively affect the user experience, but more importantly, it directly affects SEO. Therefore, for the website of toB, although it uses front-end rendering, there is no problem. But for toC websites, in order to retain users and SEO, SSR (server-side rendering) has become a very important optimizing technique – instead of rendering every DOM object with JavaScript from scratch, SSR enables client (browser) to start with some existing DOM (HTML), and attach JavaScript (this is called hydrate) afterwards – by doing so, users will not see the white screen anymore, and search enginer crawlers are able to read content from initial load of the page.

What Next.js Does

In fact, Next.js is not 100% SSR. More precisely, it does something called "isomorphic rendering". That is, with the same set of code, Next.js first obtains the required data on the server side, renders it into HTML code, and then hydrates the HTML code and JavaScript on the client-side (corresponding to ReactDOMServerobject.renderToString() on the server-side and ReactDOM.hydrate() on the client-side). So, what exactly does Next.js do? In addition to the information on the Next.js official website, I think there are 3 points worth mentioning.

1. SSGs and SSRs. Static Site Generation (SSG) generates static pages at build time, and SSR occurs at request time. The former accelerates page loading time, and the latter provides an SSR framework.
2. File-system Routing. Comes with Route, you only need to create a corresponding js file under the /page folder to create a new page.
3. Built-in CSS support. Next.js will automatically confuse CSS class names, support component level, global level and js file level CSS, ensure that CSS class names do not conflict with each other, and have built-in support for SASS.

For others, as I have done relatively little in the middleware part. I only know that Next.js also provides many convenient interfaces. I will talk about middleware in other blog posts.

What Next.js 12 Does

Next.js 12 introduces a series of new features, let me summarize the three most important highlights, in my opinion, Rust compiler, Middleware and React 18. Regarding Middleware, I will study it in detail when I have time. React 18 will be described in detail in the next part of this article. Regarding the Rust compiler, my feeling is that it is not bad.

According to the description on the official website, the new compiler used by Next.js 12 can achieve 3 times refresh and 5 times build, which is 17 times faster than babel. I actually measured it and built our own project. The end-to-end event changed from 782s to 695s, an increase of 11.1%. The possible reason is that the image optimizer we used took a lot of time, and this is out of Next.js's range of control. Anyway, using Next.js will still be very fragrant when hot update.

The Wonderful Reaction Bwteen Next.js 12 and React 18

React 18 introduces three major improvements: Automatic batching, Suspense on the server, and New APIs for app and library developers. Among them, Suspense is used for SSR.

To put it simply, the SSR before React 18 only allows the server to return the content to the client after rendering the entire HTML page, but with Suspense, the content of the server can be sent to the client in pieces. At present, Next.js 12 and React 18 have snot yet been tabilized, and our subsequent components can consider using Suspense to improve user experience.