next.js 배우기 - 3일차

김진주·2024년 1월 4일

데이터베이스 설정

다음 중 데이터베이스를 직접 쿼리하지 말아야 하는 시나리오는 무엇인가요?

✅ 클라이언트에서 데이터를 가져오는 경우

클라이언트에서 데이터를 가져올 때 데이터베이스를 직접 쿼리하면 데이터베이스 비밀이 노출될 수 있으므로 데이터베이스를 직접 쿼리해서는 안 됩니다.

데이터 요청이 의도치 않게 서로를 차단하여 발생하는 요청 워터폴의 생성

기본적으로 Next.js는 성능을 개선하기 위해 경로를 미리 렌더링하는데, 이를 정적 렌더링이라고 합니다. 따라서 데이터가 변경되면 대시보드에 반영되지 않습니다.
이 패턴이 반드시 나쁜 것은 아닙니다. 다음 요청을 하기 전에 조건이 충족되기를 원하기 때문에 워터폴이 필요한 경우가 있을 수 있습니다

예를 들어 사용자의 ID와 프로필 정보를 먼저 가져오고 싶을 수 있습니다. ID를 확보한 다음에는 해당 사용자의 친구 목록을 가져올 수 있습니다. 이 경우 각 요청은 이전 요청에서 반환된 데이터에 따라 조건부로 이루어집니다.
⚠️ 그러나 이러한 동작은 의도치 않게 성능에 영향을 미칠 수도 있습니다.

병렬 데이터 가져오기

워터폴을 방지하는 일반적인 방법은 모든 데이터 요청을 동시에, 즉 병렬로 시작하는 것입니다.

JavaScript에서는 Promise.all() 또는 Promise.allSettled() 함수를 사용하여 모든 프로미스를 동시에 시작할 수 있습니다. 예를 들어, data.ts에서는 fetchCardData() 함수에서 Promise.all()을 사용하고 있습니다:

이 패턴을 사용하면 다음과 같이 할 수 있습니다:

모든 데이터 가져오기를 동시에 실행하여 성능을 향상시킬 수 있습니다.
모든 라이브러리나 프레임워크에 적용할 수 있는 네이티브 JavaScript 패턴을 사용합니다.

그러나 이 JavaScript 패턴에만 의존할 경우 한 가지 단점이 있습니다. 하나의 데이터 요청이 다른 모든 데이터 요청보다 느리면 어떻게 될까요?

정적 및 동적 렌더링

정적 렌더링이란 무엇이며 애플리케이션의 성능을 향상시키는 방법.

정적 렌더링을 사용하면 빌드 시(배포할 때) 또는 재검증 중에 서버에서 데이터 가져오기 및 렌더링이 이루어집니다. 그런 다음 결과는 콘텐츠 전송 네트워크(CDN)에 배포 및 캐시될 수 있습니다.

정적렌더링 시 이점

더 빠른 웹사이트 - 미리 렌더링된 콘텐츠를 캐싱하여 전 세계에 배포할 수 있습니다. 따라서 전 세계 사용자가 웹사이트의 콘텐츠에 더 빠르고 안정적으로 액세스할 수 있습니다.
서버 부하 감소 - 콘텐츠가 캐시되므로 서버에서 각 사용자 요청에 대해 콘텐츠를 동적으로 생성할 필요가 없습니다.
SEO - 미리 렌더링된 콘텐츠는 페이지가 로드될 때 이미 콘텐츠를 사용할 수 있으므로 검색 엔진 크롤러가 색인을 생성하기가 더 쉽습니다. 이는 검색 엔진 순위 향상으로 이어질 수 있습니다.

💚 정적 블로그 게시물이나 제품 페이지와 같이 데이터가 없거나 사용자 간에 공유되는 데이터가 없는 UI에 유용

동적 렌더링이란 무엇이며 언제 사용해야 하는가.

동적 렌더링을 사용하면 요청 시(사용자가 페이지를 방문할 때) 각 사용자에 대한 콘텐츠가 서버에서 렌더링됩니다.

동적 렌더링 시 이점

실시간 데이터 - 동적 렌더링을 사용하면 애플리케이션에서 실시간 또는 자주 업데이트되는 데이터를 표시할 수 있습니다. 데이터가 자주 변경되는 애플리케이션에 이상적입니다.
사용자별 콘텐츠 - 대시보드나 사용자 프로필과 같은 개인화된 콘텐츠를 제공하고 사용자 상호 작용에 따라 데이터를 업데이트하는 것이 더 쉽습니다.
요청 시간 정보 - 동적 렌더링을 사용하면 쿠키나 URL 검색 매개변수와 같이 요청 시점에만 알 수 있는 정보에 액세스할 수 있습니다.

대시보드를 동적으로 만들기 위한 다양한 접근 방식.

서버 구성 요소 또는 데이터 가져 오기 함수 내에서 unstable_noStore라는 Next.js API를 사용하여 정적 렌더링을 선택 해제할 수 있다

// ...
import { unstable_noStore as noStore } from 'next/cache';
 
export async function fetchRevenue() {
  // Add noStore() here to prevent the response from being cached.
  // This is equivalent to in fetch(..., {cache: 'no-store'}).
  noStore();
 
  // ...
}
 
export async function fetchLatestInvoices() {
  noStore();
  // ...
}
 
export async function fetchCardData() {
  noStore();
  // ...
}
 
export async function fetchFilteredInvoices(
  query: string,
  currentPage: number,
) {
  noStore();
  // ...
}
 
export async function fetchInvoicesPages(query: string) {
  noStore();
  // ...
}
 
export async function fetchFilteredCustomers(query: string) {
  noStore();
  // ...
}
 
export async function fetchInvoiceById(query: string) {
  noStore();
  // ...
}