Introducing React Server Components
After implementing our static blog app in Next.js, it’s time to introduce some interactivity to it. Instead of using the traditional pattern of writing a separate backend server, which the frontend fetches data from and makes requests to, we are going to use a new pattern called React Server Components (RSCs). This new pattern allows us to directly access the database from React components by executing certain React components (so-called server components) only on the server. Together with Server Actions (a way to call functions on the server from the client), this new pattern allows us to easily and quickly develop full-stack apps. In this chapter, we are going to learn what RSCs and Server Actions are, why they matter, what their advantages are, and how to implement them properly and securely.
In this chapter, we are going to cover the following main topics:
- What are RSCs?
- Adding a data layer to our Next.js app
- Using RSCs...