Improve documentation to make it more beginer friendly

[deepeshmi26]

Goals

1. Live codesandbox widgets in docs, just like react docs.
2. Restructure the learning path and add foundational topics. In my opinion the following should be part of the initial topics:

• What is SSR and why SSR? This is the most foundational thing for Nextjs & it requires its own section.
• CSR vs SSR
• Difference between client and server components
• Simplest meaning of Hydration
• SSR vs SSG vs ISR

These topics should be placed before "Layouts and Pages section".
The above topics help build a mental model for understand advanced topics like prefetching, caching, dynamic paths etc.

Background

1. SSR concept had been overshadowed by CSR for long time, thanks to React & Angular. New devs do not understand the application, advantages, drawbacks of SSR. e.g. - To understand caching strategies, its important to understand "why caching", which in turn can be understood by "how SSR improves perceived performance".
2. Nextjs documentation has coding examples. But, without live code, it isn't easy to do an immediate hands-on experiment without setting up a local repo. React documentation has CodeSandbox at the bottom, which makes it easy to update the code and see the live result. isn't easy

Proposal

Yes, I am interested in contributing.

This is the overview of implementation:

1. Write a small technical piece about why and when SSR is needed. What problems does it solve. Also, explain the drawbacks. Also explain technical difficulties e.g.-Why hydration is needed?
2. In the next natural flow, explain "What is hydration". The explaination will contain

• An example mocking a slow network request where the initial html is downloaded quickly but event handlers are attached after some time.
• Reference to the network request which will make it easier to visualize the initial html sent and the next js load which hydrates the html.

3. An example of CSR vs ISR VS SSR vs SSG.
4. Simple explaination of Client vs Server components and examples of pure client page, pure server page, a server page having client component.

For live code:
Start small by adding codesandbox widget to 1 page, then steadily move to other pages. The first page should be CSR vs ISR VS SSR vs SSG.

[icyJoseph]

Hi, thanks for the feedback once again.

Part of our upcoming educations efforts will touch some of these points.

This section https://nextjs.org/docs/app/getting-started/server-and-client-components#how-do-server-and-client-components-work-in-nextjs also somewhat touches upon what you are asking, but as per feedback, it can be improved.

I'll take a bit of time before answering more, interesting feedback!