What is Client-side Rendering (CSR) and what are its pros and cons
CSR is a rendering method that configures HTML by receiving JS and CSS files delivered together with empty HTML from a browser.
As you know well, the advantage is that once you draw it, the rest of the page moves quickly.
The disadvantage is that the initial loading is slow, and the initial HTML received is empty HTML, so the SEO setting is not good.
Why do we need Server-side Rendering (SSR) in web apps that are configured with Single Page Application (SPA)
When I worked on the project using React in the field, I had a hard time constructing SEO. Although I have also used libraries to improve SEO, such as React-Helmet, it was more difficult to construct SEO than other projects in the SSR method because of the problem of having empty HTML on the server, which is the operation method of SPA, or CSR.
In addition, if the screen is often configured by calling api calls and other things when rendering with useEffect on the page during existing client development, it would be good to consider next js if this method is judged to be inefficient.
After all, if you want to use techniques such as SSR, SSG, and ISG (although an extension of ssg) other than CSR, it would be nice to use next js.
The reason why SSR is needed is when there is an empty screen or unnecessary loading because it needs a lot of SEO setup and home screen within the project for short.
What is the code that runs and how it works when you run the yarn start(or rpm start) script in the Next.js project
When running start in nextjs, run built content is executed. Naturally, the build must be completed first because the result of run build is executed in a prod environment.
Below is the code from the official GitHub of nextjs.
packages/next/src/cli/next-start.ts