[강의] 한 입 크기로 잘라먹는 Next.js #5

Onion·2025년 8월 15일
next.js

Next.js 공부

목록 보기
5/11

https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-nextjs?srsltid=AfmBOop98SToIvyP4ZLiwetJfX_FMn0dbu097kRsUWsuX9BOUxCY1Ihi
위 내용을 바탕으로 강의를 수강하며 정리하였습니다.

데이터 페칭

App Router의 데이터 페칭

1. 앱 라우터의 데이터 페칭

1) Page Router의 데이터 페칭

서버 컴포넌트라는 개념이 없고, 모든 컴포넌트가 전부 클라이언트 컴포넌트로써 동작함

▼ 개발자가 직접 아래와 같이 경우를 나누어 개발해야 했음

2) App Router의 데이터 페칭

▼ App Router의 서버 컴포넌트 구조

3) 실습을 위한 환경 준비

  1. vscode로 열기
    vscode에서 .../onebite-next/ 폴더로 열기

  2. 터미널에서 section04 폴더 생성
    vscode에서 /onebite-next/section04 폴더 생성

  3. 파일 옮기기
    /onebite-next/section03 폴더에 있는 코드 중 아래 사진에 해당하는 코드만 선택하여 /onebite-next/section04 폴더로 옮기기

  1. 필요한 모듈 다운로드
    생성된 /section04/ 폴더로 vscode에서 다시 열기
    → vscode 터미널을 열어서 npm i 명령어 실행

  2. 개발 모드로 넥스트 앱 실행
    생성된 /section04/ 폴더로 vscode에서 다시 열기
    → vscode의 터미널 열기
    → npm run dev 명령어 실행
    → http://localhost:3000/ 로 이동하면 확인 가능
    → (종료 시에는) Ctrl+D나 Ctrl+C 입력

  3. 백엔드 서버 열기
    vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기
    → vscode 터미널을 열고 npm run start 명령어 실행

4) 실습

NEXT_PUBLIC_API_SERVER_URL=http://localhost:12345  //NEXT_PUBLIC_ 접두사를 붙이지 않으면 Next.js가 자동으로 해당 환경 변수를 서버 측에서만 활용할 수 있게 프라이빗으로 설정해버림

 

2. 데이터 캐시

1) 데이터 캐시

fetch 메서드를 활용해 불러온 데이터를 next 서버에 보관하는 기능
영구적으로 데이터를 보관하거나 특정 시간을 주기로 갱신 시키는 것도 가능
불필요한 데이터 요청의 수를 줄여서 웹 서비스의 성능을 크게 개선할 수 있음

▼ 예시

  • fetch() 메서드를 필수로 사용해야만 가능함

2) 데이터 캐시 옵션

  • no-store 옵션
    - next.js 15 버전 이상부터는 따로 설정해주지 않아도 기본값으로 no-store 옵션이 설정됨
  • force-cache 옵션
  • revalidate 옵션
  • next tag 옵션
    - On-Demand ISR과 같은 방식

3) 실습 진행을 위한 환경 세팅

  • vscode로 section04 폴더 열기
    → vscode 터미널을 열어서 npm run dev로 개발 모드 서버 열기

  • vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기
    → vscode 터미널을 열고 npm run start로 백엔드 서버 열기

4) 실습

no-store 옵션 설정해보기

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  logging: {fetches: {fullUrl: true,},},
};

export default nextConfig;

force-cache 옵션 설정해보기

revalidate 옵션 설정해보기

 

3. 리퀘스트 메모이제이션(Request Memoization)

1) 리퀘스트 메모이제이션(Request Memoization)

"요청을 기억한다"
하나의 페이지를 서버 측에서 렌더링하는 과정에서, 레이아웃 컴포넌트나 페이지 컴포넌트처럼 하나의 페이지를 이루고 있는 여러 개의 컴포넌트에서 발생하는 다양한 API 요청들 중에 중복적으로 발생하는 요청들을 캐싱해서 단 한 번만 요청할 수 있도록 (중복된 요청을 다시 발송하지 않을 수 있도록) 자동으로 데이터 패칭을 최적화 해주는 기능


▼ 리퀘스트 메모이제이션 vs. 데이터 캐시


중복된 API 요청은 안 보내면 그만인데, 굳이 리퀘스트 메모이제이션 기능을 제공하는 이유는 뭘까?
→ App Router에서 React Server Component의 도입으로 데이터를 패칭하는 패턴이 변화했기 때문 = 서로 다른 컴포넌트에서 동일한 데이터를 필요로 하는 예외적인 경우가 생길 수밖에 없음

2) 실습 진행을 위한 환경 세팅

  • vscode로 section04 폴더 열기
    → vscode 터미널을 열어서 npm run dev로 개발 모드 서버 열기

  • vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기
    → vscode 터미널을 열고 npm run start로 백엔드 서버 열기

3) 실습

profile
Onion
눈물이 나도 코드를 계속 까보는 양파
이전 포스트

[강의] 한 입 크기로 잘라먹는 Next.js #4

다음 포스트

[강의] 한 입 크기로 잘라먹는 Next.js #6

0개의 댓글