[강의] 한 입 크기로 잘라먹는 Next.js #3. (2)

Onion·2025년 8월 13일
next.js

Next.js 공부

목록 보기
3/11

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

Page Router 핵심 정리

10. 사전 렌더링과 데이터 페칭

1) 데이터 패칭...?

Next.js 앱에서 백엔드 서버로부터 데이터를 불러오는 것

리액트 앱에서는...
1. 불러온 데이터를 보관할 State 생성
2. 데이터 페칭 함수 생성
3. 컴포넌트 마운트 시점에 fetchData 호출
4. 데이터 로딩중일 때의 예외 처리

  • 이 과정은 초기 접속 요청부터 데이터 로딩까지 오랜 시간이 소요

▼ 백엔드 서버로부터 현재 페이지에 필요한 데이터를 미리 불러오도록 설정 가능


▼ React App의 데이터 페칭 vs. Next App의 데이터 페칭


Next.js에서 제공하는 사전 렌더링 방식

  • 서버사이드 렌더링(SSR)
    • 가장 기본적인 사전 렌더링 방식
    • 요청이 들어올 때마다 사전 렌더링 진행
  • 정적 사이트 생성(SSG)
    • 바로 위에서 살펴본 사전 렌더링 방식
    • 빌드 타임에 미리 페이지를 사전 렌더링 해 둠
  • 증분 정적 재생성(ISR)
    • (향후 다룰 예정...)

 

11. SSR #1. 소개 및 실습

1) SSR(Server Side Rendering)

가장 기본적인 사전 렌더링 방식
요청이 들어올 때마다 사전 렌더링 진행 → 페이지 내부의 데이터를 항상 최신으로 유지 가능
데이터 요청이 늦어질 경우 그 뒤에 동작하는 모든 과정도 같이 느려짐

SSR 공식 문서
https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering

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

  • vscode로 section02 폴더 열기
    → vscode 터미널을 열어서 npm run dev로 서버 열기

3) SSR 방식으로 동작하도록 수정

/src/pages/index.tsx 페이지가 SSR 방식으로 동작하도록 코드 수정

  • index.tsx의 Home() 컴포넌트보다 먼저 실행되어 컴포넌트에 필요한 데이터를 불러오는 함수 정의
    ‼️해당 함수의 리턴값은 props라는 객체 프로퍼티를 포함하는 단 하나의 객체여야만 함
    ‼️서버 측에서만 실행되는 함수! → console.log() 함수가 있어도 vscode의 터미널에서만 확인 가능
  • 해당 함수로부터 props 데이터를 전달 받는 페이지 컴포넌트의 props 타입은 어떻게 정의해야 하지?
    InferGetServerSidePropsType이라는 Next.js에서 제공하는 내장 타입
    : props를 전달해주는 함수의 반환값 타입을 자동으로 추론해주는 기능을 보유
  • 코드 수정
    https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section02/chapter11/src/pages/index.tsx

서버에서 window.location을 실행하면?

  • window가 Undefined가 되어버려서, 결국 Undefined.location을 호출하는 게 되어버림

브라우저 측에서만 실행되는 코드 작성을 하고 싶다면?

  • (여러 방법이 있음)
  • 가장 쉬운 방법은? useEffect를 이용하는 것

 

12. SSR #2. 실습

다시 듣기

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

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

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

2) API 호출을 담당할 함수 생성

 

13. SSG #1. 소개

SSG

SSR 방식의 단점을 해결하는 새로운 사전 렌더링 방식
명령어로 빌드할 때, 즉 빌드 타임에 미리 페이지를 사전 렌더링 → 페이지를 딱 한 번만 생성
사전 렌더링에 많은 시간이 소요되는 페이지이더라도 사용자의 요청에는 매우 빠른 속도로 응답 가능
빌드 타임 이후에는 페이지를 새롭게 사전 렌더링 하지 않기 때문에, 최신 데이터를 반영하기에는 어려움 → 정적 페이지에 적합

 

14. SSG #2. 정적 경로에 적용하기

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

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

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

2) SSG 동작하도록 수정

 

15. SSG #3. 동적 경로에 적용하기

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

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

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

2) SSG 동작하도록 수정

  • /src/pages/book/[id].tsx 코드 수정

  • 동적 경로를 가진 페이지를 Next.js 서버 측에서 빌드타임에 SSG 방식으로 사전 렌더링하여 미리 생성해두기 위해서는...
    선수 과정으로 해당 페이지에 어떠한 URL 파라미터들이 존재할 수 있는지, 그러므로 어떤 경로들이 존재할 수 있는지 설명하는 과정이 필수적으로 요구됨

 

16. SSG #4. 폴백옵션 설정하기

강의 다시 듣고 정리

1)

 

17. ISR #1. 소개 및 실습

1) ISR(Incremental Static Regeneration)

증분 정적 재생성 방식

  • SSG 방식으로 생성된 정적 페이지를 일정 시간을 주기로 다시 생성하는 기술
  • 기존 SSG의 장점(매우 빠른 속도로 응답 가능) + 기존 SSR 장점(최신 데이터 반영 가능)

ISR 공식 문서
https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering

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

  • vscode로 section02 폴더 열기
    → vscode 터미널을 열어서 npm run start로 프로덕션 서버 열기

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

3) ISR 동작하도록 수정

/src/pages/index.tsx 수정
https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section02/chapter17/src/pages/index.tsx

 

18. ISR #2. 주문형 재 검증(On-Demand-ISR)

1) 주문형 재 검증(On-Demand-ISR)

ISR의 한계

  • 만약 시간과 관계 없이 사용자의 행동에 따라 데이터가 업데이트 되는 페이지가 있다면?
    → 기존의 ISR 방식은 사용하기가 어려움
  • 만약 사용자의 수정은 하루 뒤에 일어났는데 웹사이트는 60초 단위로 갱신된다면?
    → 갱신될 필요가 없는 상황에서도 갱신이 이루어짐

주문형 재 검증

  • 요청을 받을 때마다 페이지를 다시 생성하는 ISR 방식

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

  • vscode로 section02 폴더 열기
    → vscode 터미널을 열어서 npm run start로 프로덕션 서버 열기

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

3) ISR 동작하도록 수정

/src/pages/index.tsx 수정
https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section02/chapter18/src/pages/index.tsx

 

19. SEO 설정하기

지금까지 제작한 한입북스 서비스를 실제로 배포하기 위해, 사전 준비 단계로 페이지 별로 다양한 메타 태그들을 설정해서 아주 기본적인 SEO를 설정하기
= 아주 기본적인 검색엔진 최적화

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

2) 페이지별 메타 태그를 설정해서 페이지별로 SEO 설정

 

20. 배포하기

나는 코드 다시 수정해서 재시도 해보기...

1) 배포

프론트엔드 어플리케이션을 배포할 때는 클라우드 서비스를 통해 배포하는 경우가 많음
→ 파이어베이스, 넷니파이 등등...

Next.js는 보통 Vercel을 통해 배포함

2) 배포를 위한 기본 설정

  • Vercel 사이트(https://vercel.com/)에서 회원가입 하기
    → 나는 github으로 연동
  • vscode의 터미널에서 Vercel에 명령어 한번만으로 Next.js 앱을 빌드할 수 있는 도구 설치
    npm install -g vercel 실행
  • vscode의 터미널에서 Vercel에 로그인
    → github에 갖다대서 enter 누르고 진행
  • 배포를 위해, vscode의 터미널에서 vercel 명령어 입력
    → 현재 프로젝트 폴더를 배포할 거냐는 질문에 대해 y 입력
    → 어떤 scope를 선택해서 배포할 거냐는 질문에 뜨는 프로젝트를 선택하고 엔터 입력
    → 기존에 존재하는 프로젝트에 연결할 거냐는 질문에 n 입력
    → 새로 생성할 프로젝트 이름은 뭐냐는 질문에 onebite-books-page로 입력
    → 코드가 위치할 디렉토리 위치는 어디냐는 질문에 자동으로 설정된 기본값 그대로 하기 위해 바로 엔터 누르기
    → 자동으로 설정된 옵션들을 바꾸고 싶냐는 질문에 n 입력
    → 추가 프로젝트 옵션을 바꾸고 싶냐는 질문에 n 입력
    → 배포 진행중
    → 배포 진행 완료 후 뜨는 링크를 통해 들어가면 확인 가능
  • 이때, 백엔드 서버는 안 열려 있기 때문에 DB에서 데이터를 불러오지 못하고 있음
    → /onebite-books-server/로 새 창을 하나 열어서 vscode 터미널을 새로 열기
    → 터미널에서 vercel 입력
    → 현재 프로젝트 폴더를 배포할 거냐는 질문에 대해 y 입력
    → 어떤 scope를 선택해서 배포할 거냐는 질문에 뜨는 프로젝트를 선택하고 엔터 입력
    → 기존에 존재하는 프로젝트에 연결할 거냐는 질문에 n 입력
    → 새로 생성할 프로젝트 이름은 뭐냐는 질문에 기본값으로 설정된 걸로 진행을 위해 엔터 입력
    → 코드가 위치할 디렉토리 위치는 어디냐는 질문에 자동으로 설정된 기본값 그대로 하기 위해 바로 엔터 누르기
    → 바로 배포 작업 진행
    → 배포 완료
  • 백엔드 서버 도메인 확인 후 코드 수정
    → vercel에서 배포한 백엔드 서버(onebite-books-server)에 들어가서 Production Deployment에서 'Domains' 값을 복사
    → src/lib/ 아래에 있는 fetch 파일에 각각 백엔드 서버로부터 데이터를 불러오는 함수의 url을 수정
  • 수정사항을 반영하기 위한 재배포 진행
    → vscode에서 section2/를 기준으로 폴더 열고 터미널 열기
    → 즉시 프로덕션 모드로 배포하기 위해 vercel --prod 명령어 실행
    → 배포 진행 후 완료

 

21. Page Router 정리

1) Page Router의 장점

  1. 파일 시스템 기반의 간편한 페이지 라우팅 제공

    • 정적 경로와 동적 경로 모두 손쉽게 라우팅 가능

  2. 다양한 방식의 사전 렌더링 제공

    • 기존의 리액트 앱이 갖던 느린 FCP라는 단점을 효과적으로 해결
    • 방식: SSR, SSG, ISR

2) Page Router의 단점

  1. 페이지별 레이아웃 설정이 번거롭다

    • 추후 App Router 버전에서는 파일 하나만 배치하는 것만으로도 페이지별 레이아웃 설정 가능

  2. 데이터 페칭이 데이터 컴포넌트에 집중된다

  3. 불필요한 컴포넌트들도 JS Bundle에 포함된다

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

[강의] 한 입 크기로 잘라먹는 Next.js #3. (1)

다음 포스트

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

0개의 댓글