Why Did React Introduce Server Components?
Purpose
React 18 was released in 2022, and the Next.js App Router was released in 2023, making this a somewhat outdated investigation. However, while using the Next.js page router and app router, I found an article explaining the differences and reasons for the changes, particularly why the app router was introduced. This document summarizes my understanding of that article.
Story
Before reading the article, consider the following scenarios:
Imagine you're at a job interview for a Frontend Developer position and are asked the following questions. Or perhaps you're in a meeting trying to convince your team to use the Next.js app router for a new or existing project. Or maybe you're contemplating which technology is more suitable between the Next.js page router and app router.
While simply stating that the app router is a new technology and advocating for its use as a Frontend Developer can be persuasive, understanding the answers to the questions below can provide a more compelling argument.
- Q. What is the difference between SSR (Server Side Rendering) and CSR (Client Side Rendering)?
- Q. What limitations in the existing method (Next.js page router) led to the development of the Next.js app router?
- Q. Why is Suspense used in React?
If you know the answers to these questions, you might not need to read the full text. However, if you want a more reliable source, you can refer to the React 18 Architecture introduction. If you only want the answers, you can skip to the Result.
The following text is a summary of my understanding, mixed with my opinions, after reading the Architecture article.