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

Onion·2025년 8월 24일
next.js

Next.js 공부

목록 보기
7/11

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

스트리밍과 에러핸들링

1. 스트리밍이란?

1) 스트리밍(Streaming)

스트리밍(Streaming)

  • 큰 용량의 동영상을 아주 빠른 속도로 시청할 수 있게 해줌
  • 서버에서 클라이언트로 데이터를 넘겨줄 때 데이터의 크기가 너무 크거나 데이터를 준비하는데 걸리는 시간이 오래 걸리게 되어서 데이터를 빠르게 전송해주기 어려울 것 같을 때, 데이터를 여러 개의 조각으로 잘게 쪼갠 다음 쪼개진 작은 용량의 데이터들을 하나하나씩 클라이언트에게 전송하는 기술
    = 데이터가 다 불러와지지 않은 상태에서도 현재까지 전달 받은 데이터에 접근은 가능하기 때문에 결과적으로 사용자에게는 긴 로딩 없이 서비스 제공 가능

Next.js의 스트리밍

  • Next.js는 스트리밍을 웹 서비스에서도 누릴 수 있게 HTMl 페이지를 스트리밍하는 기능을 자체적으로 제공
  • 사용자가 특정 페이지에 접속했을 때 렌더링이 오래 걸리지 않는 컴포넌트들을 먼저 화면에 보여주고, 렌더링이 오래 걸릴 것으로 예상되는 컴포넌트들은 대체 UI를 화면에 보여주고 있다가 서버 측에서 컴포넌트의 렌더링이 완료가 되면 그때 뒤늦게 렌더링이 완료된 컴포넌트들만 따로 전달해서 컨텐츠를 보여주는 방식으로 제공

2) 스트리밍은 언제 사용할까?

Next.js의 스트리밍은 Dynamic 페이지에 자주 활용
Next.js의 Dynamic 페이지들은 Next.js 서버에서 빌드타임에 생성되지 않기 때문에 풀라우트 캐시에는 저장 X

▼ 이런 상황에서

▼ 스트리밍을 통해 이렇게 제공 가능

 

2. 스트리밍 (1) 페이지 스트리밍 적용하기

1) 실습을 위한 환경 준비

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

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

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

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

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

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

2) 실습

3) 스트리밍 코드

  • loading.tsx로 설정한 로딩 시 실행되는 코드는 동일한 경로에 있는 컴포넌트만 스트리밍이 되도록 설정하는 게 아니라, 경로 아래에 있는 모든 페이지 컴포넌트들이 다 스트리밍이 되도록 설정
  • loading.tsx 파일이 스트리밍하도록 설정하는 페이지 컴포넌트는 모든 페이지 컴포넌트는 아니고 async라는 키워드가 붙어서 비동기로 작동하도록 설정된 페이지 컴포넌트에만 스트리밍을 제공
  • loading.tsx 파일은 무조건 page.tsx 코드, 즉 페이지 컴포넌트에만 스트리밍을 적용할 수 있음
  • loading.tsx 파일로 설정된 스트리밍은 브라우저에서 쿼리 스트링이 변경될 때에는 틜거링 되지 않는다

 

3. 스트리밍 (2) 컴포넌트 스트리밍

1) loading vs. Suspense

  • loading.tsx
    : 로딩 컴포넌트는 무조건 페이지 단위로만 스트리밍 적용 가능 → 일반적인 컴포넌트들에는 스트리밍 설정 X
  • Suspense
    : 컴포넌트별로 세밀하게 스트리밍 적용
    : Suspense 컴포넌트로 비동기 컴포넌트를 감싸주면 해당 컴포넌트를 스트리밍하도록 설정해서 미완성 상태, 즉 로딩 상태로 남겨둠
        <Suspense key={q || ""} fallback={<div>Loading ...</div>}>
      <SearchResult q={q || ""} />
    </Suspense>
    : 쿼리 스트링만 변경되었을 경우 로딩 상태가 다시 표시되지 않는 문제가 발생하지만, 해결도 가능
    : 페이지 내에서 여러 개의 비동기 컴포넌트들을 동시다발적으로 스트리밍할 때 굉장히 유용 ⭐⭐⭐⭐⭐

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

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

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

3) 실습

Suspense 맛보기

Suspense로 하나의 페이지 내에서 여러 개의 비동기 컴포넌트들을 동시다발적으로 스트리밍 시 동작 확인

 

4. 스켈레톤(Skeleton) UI 적용하기

1) 스켈레톤(Skeleton) UI

스켈레톤 = 뼈대
스켈레톤 UI = 뼈대 역할을 하는 UI

  • 페이지에 일부 컨텐츠가 로딩이 되는 동안 실제 컨텐츠 대신에 컨텐츠와 비슷하게 생긴 박스 형태의 실루엣 정도만 미리 보여주는 것
  • 필수적인 기능은 아니나, 사용자의 입장에서는 완성도 측면에서 필요할 수 있음
  • React Loading Skeleton이라는 자동으로 스켈레촌 UI를 만들어주는 라이브러리 존재하니 필요하면 사용 가능

▼ Ex. 유튜브의 스켈레톤 UI

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

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

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

3) 실습

 

5. 에러 핸들링 (error.tsx)

1) 에러 핸들링 (error.tsx)

Next.js는 특정 경로에서 발생한 모든 오류들을 한꺼번에 처리할 수 있는 아주 편리한 에러 핸들링 기능을 제공

  • 에러문 출력을 위해 try-catch문을 사용하는 대신, 에러를 처리하고 싶은 페이지 컴포넌트의 파일과 같은 위치에 에러를 처리할 파일을 하나 생성: error.tsx 코드 생성
    → 이때 에러 파일은 useClient라는 지시자를 통해 클라이언트 컴포넌트로 설정하는 것이 필수 ⭐
    → 해당 에러 파일과 같은 경로에 있거나 하위 경로에 있는 페이지에서 오류가 발생하게 되면 에러 컴포넌트가 페이지 컴포넌트 대신 화면에 출력

  • 에러 컴포넌트에서 제공하는 props

    • error
      : 에러 객체 확인
    • reset
      : 함수
      : 에러가 발생한 페이지를 복구하기 위해서 다시 한번 컴포넌트들을 렌더링 시켜보는 기능을 가지고 있는 함수
      : 어떠한 매개변수도 전달받지 않으며 어떠한 값도 반환하지 않은 void 타입의 리턴을 하는 함수
      : 브라우저(클라이언트) 측에서 현재 서버로부터 전달받은 데이터를 이용해서 화면을 다시 한번 렌더링 해보기만 하는 메서드 = 서버 컴포넌트를 재실행하는 것은 아님
      : 에러 상태를 초기화하고 컴포넌트들을 다시 렌더링 → refresh() 메서드로 서버 컴포넌트를 다시 불러와서 리렌더링 한다고 해도 클라이언트 컴포넌트인 에러 상태가 사라지지 않기 때문에, reset()도 그 이후에 필수적으로 사용 필요

  • error.tsx 파일은 동일한 경로에 있는 인덱스 페이지 + 하위 경로에 있는 모든 페이지에 다 동일하게 적용

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

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

  • (에러 확인을 위해) 백엔드 서버는 구동 X

3) 실습

  • 에러를 처리하는 파일 생성: /src/app/(with-searchbar)/error.tsx 코드 생성
    https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section06/chapter05/src/app/(with-searchbar)/error.tsx

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

  • 여전히 발생하는 오류 제거를 위해 error.tsx 코드 수정 가능

    • 강제 전체 렌더링
    • 오류가 발생한 부분만 리렌더링: refresh()로 현재 페이지에 필요한 서버 컴포넌트들을 다시 불러옴
profile
Onion
눈물이 나도 코드를 계속 까보는 양파
이전 포스트

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

다음 포스트

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

0개의 댓글