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.
What Next.js Does
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.
- 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.
- File-system Routing. Comes with Route, you only need to create a corresponding js file under the
/pagefolder to create a new page.
- 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.