/layout.js @ 1688734135495 [Home]

Key Concepts

  1. The term "React Server Components" (RSC) is used in two ways: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:
  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
    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.
Static Content