• 이제 DB가 준비 되었으니(creating + seeding), 앱에서 데이터를 fetch하기 위한 방법들을 알아보고, dashboard overview 페이지를 만들어보자.
• In this chapter... Here are the topics we’ll cover
  • Learn about some approaches to fetching data: APIs, ORMs, SQL, etc.
  • How Server Components can help you access back-end resources more securely.
  • What network waterfalls are.
  • How to implement parallel data fetching using a JavaScript Pattern.

Choosing how to fetch data

• client측에서 fetching을 하냐 server측에서 fetching을 하냐의 차이라고 볼 수 있다.
  • client측 fetching인 경우는 API + DB query 인거고(API 안에 DB quering이 포함되어 있다고 볼 수 있다)
  • server측 fetching인 경우는 API layer를 스킵하고 DB query만 사용한다고 볼 수 있다.

API layer

• API는 애플리케이션 코드와 database 중간의 계층이다.
• There are a few cases where you might use an API:
  • If you’re using 3rd party services that provide an API
  • If you’re fetching data from client, you want to have an API layer that runs on the server to avoid exposing your database secrets to the client
• Next.js에서는, Route Handlers 를 사용하여 API endpoints를 생성할 수 있다.

Database queries

• 풀스택 앱을 개발하고 있다면 database와 상호작용하기 위한 로직 역시 작성해야 할 것이다.
  • Postgres와 같은 관계형 database를 사용한다면, SQL 또는 Prisma같은 ORM을 사용할 수 있다.
• There are a few cases where you have to write database queries:
  • When creating your API endpoints, you need to write logic to interact with your database.
    • 그럼 클라이언트 측에서 fetching할때는 서버측 API 레이어에서 db queries를 사용해야 된다는거네. 이게 보통 일반적으로 리액트 앱 개발할때 패턴이네. 백엔드 서버에서 돌아가는 API layer에서 에서 db query사용하고. 리액트 앱(클라이언트 측)에서 해당 API를 사용해 fetching하고.
  • If you are using React Server Components (fetching data on the server), you can skip the API layer, and query your database directly without risking exposing your database secrets to the client.

• 정답

Using Server Components to fetch data

• Next.js application은 기본적으로(by default) React Server Components를 사용한다. 서버 컴포넌트를 사용해 데이터를 fetch하는 것은 상대적으로 새로운 접근이며, 여기엔 몇가지 이점이 있다:

  • Server Components supports promises, providing a simpler solution for asynchronous tasks like data fetching. You can use async/await syntax without reaching out for useEffect, useState or data fetching libraries(e.g. SWR, TanStack-query).
    • 즉 기존 React의 client-side data fetching에 비해 컴포넌트의 코드가 간결해지는 것으로 보인다. fetching 자체에는 useState, useEffect등이 필요 없어지는 것이기 때문에.
  • Server Components execute on the server, so you can keep expensive data fetches and logic on the server and only send the result to the client.
  • As mentioned before, since Server Components execute on the server, you can query the database directly without an additional API layer.

  ⇒ 하이라이트한 부분은 API 서버가 따로 있을때도 해당되는 장점. 마지막 부분은 풀스택일때? 장점으로 볼 수 있을듯. API 서버를 따로 개발하는 경우라면 이부분을 신경쓸 이유는 없으니까.

추가 조사 - React Server Components (RSC)

• React 19에 추가될 기능이라고 한다.

  React Server Components – React