CSR-SSR (1/5)
What are Server Components?
    Server Components are a new type of Component that renders ahead of time, before bundling, in an environment separate from your client app or SSR server. This separate environment is the “server” in React Server Components. Server Components can run once at build time on your CI server, or they can be run for each request using a web server.
    • With Server Components, you can render components once at build time.
    • The rendered output can then be server-side rendered (SSR) to HTML and uploaded to a CDN. When the app loads, the client will not see the original Page component, or the expensive libraries for rendering the markdown. The client will only see the rendered output
    • This means the content is visible during first page load, and the bundle does not include the expensive libraries needed to render the static content.
    • Server Components can also run on a web server during a request for a page, letting you access your data layer without having to build an API.
    • Without Server Components, it’s common to fetch dynamic data on the client in an Effect via an api, but using server components we can directly read the data from db.
    • The bundler then combines the data, rendered Server Components and dynamic Client Components into a bundle. Optionally, that bundle can then be server-side rendered (SSR) to create the initial HTML for the page. When the page loads, the browser does not see the original Note and Author components; only the rendered output is sent to the client
    • Server Components are not sent to the browser, so they cannot use interactive APIs like useState. To add interactivity to Server Components, you can compose them with Client Component using the 'use client' directive.
    • A common misunderstanding is that Server Components are denoted by 'use server', but there is no directive for Server Components. The 'use server' directive is used for Server Functions.