Using RSCs to fetch data from the database
As we have learned, when using Next.js, React components are considered to be Server Components by default, so all page components are already executed and rendered on the server. Only if we need to use client-only functions, such as hooks or input fields, do we need to turn our components into a client component by using the "use client" directive. For all components that do not require user interaction, we can simply keep them as server components, and they will only be statically rendered and served as as HTML (encoded in the RSC payload) and not hydrated on the client. To the client (the browser), it will seem as if these React components don’t even exist as the browser will only see static HTML code. This pattern greatly improves the performance of our web application as the client doesn’t need to load JavaScript to render such components. It also reduces the bundle size because less JavaScript code is needed to...
