Key Concepts

1. The term "React Server Components" (RSC) is used in two ways:
   • React components which are written to run only on the server, rather than in the browser.
   • The framework and environment which allows existing React components and concepts to run on the server.
   This dual-meaning distinction is important, because you must first discard the idea that RSCs are a special new thing. Instead, RSC is the way that the React team has defined as how React runs and works when executed on the server.
2. RSC is different than framework-specific implementations like getServerSideProps() in NextJS which allow React to run on the server. Instead, RSC is framework-independent and doesn't depend on new special methods.
3. Let's be clear about some terminology and when RSC runs:
   • SSG (Static Site Generation): React code is run when you build your application, and the generated output is static.
   • SSR (Server-Side Rendering): React code runs at the time it is requested. The result may be cached for future requests.
   • CSR (Client-Side Rendering): React code is delivered to the browser, which generates content that is inserted into the DOM.
4. SSG is the default time when React code gets executed in RSC! There are ways in which you can force code to run as SSR or CSR instead.

Important Notes About This App

1. The code used in this app is intentionally plain and simple (I do not use Typescript or Tailwind, for example) so the concepts being demonstrated are not obfuscated by tooling.
2. Although the RSC concepts are general, this app focuses on implementation in NextJS 13 /app directory.
3. This is not an exhaustive demonstration of all RSC capabilities or implementation. I'm focusing on the things that may be confusing or misunderstood.
4. Boxes like
   this

   and this
   are used to show how the layout of pages are constructed and layered.
5. Details about where content comes from are usually shown at the top of each content area, like the top of this screen. It is in the format [file path] [timer?] [generated datestamp] [link?]
6. Timers like this: 0 are shown on most content headers to demonstrate that content is persisting and not being regenerated.
7. When new elements are inserted into the page, they get a temporary red outline. When content is changed client-side, it is temporarily turned red. This is so you can easily visualize what part of the page is being updated dynamically.
8. You should install this app locally and play with the code and watch what happens! This is the best way to cement the ideas into your mind.