[NextJS] 튜토리얼 챕터 10 - 부분 미리 렌더링(Optional)

들어가기 전에

이 글은 Next.js - Chapter 10 : Partial Prerendering (Optional) 강의를 번역한 글입니다.

부분 미리 렌더링

부분 미리 렌더링(Partial prerendering)은 Next.js 14에서 소개된 실험적인 기능입니다. 이 페이지의 컨텐츠는 기능이 안정화되면서 변경될 수 있습니다. 만약 실험적인 기능을 사용하고 싶지 않다면 이번 챕터는 건너 뛰어도 됩니다. 이번 챕터는 전체 강의를 완료하기 위한 필수는 아닙니다.

이번 챕터에서...

여기 우리가 다룰 주제들이 있습니다.

• 부분 미리 렌더링이 무엇인지
• 부분 미리 렌더링이 어떻게 동작하는지

정적인 컨텐츠와 동적인 컨텐츠의 결합

만약 라우트 내에서 동적인 함수를 부르고 있다면(예를 들어, noStore(), cookies(), 기타 등등) 해당 라우트는 동적 라우트가 됩니다.

이것이 대부분의 웹 앱들이 구축되는 방식입니다. 우리는 전체 앱 혹은 특정 라우트에서 정적 혹은 동적 렌더링 방식 중에 선택해야합니다.

그러나 대부분의 라우트는 전체가 다 정적이지도 동적이지도 않습니다.
아마 라우트는 정적인 컨텐츠와 동적인 컨텐츠 둘 다 가지고 있을겁니다. 예를 들어, 이 이커머스 사이트를 봅시다. 제품 페이지의 대부분은 미리 렌더링 할 수 있지만, 유저의 장바구니 정보나 추천 상품은 동적으로 가져오고 싶을겁니다.

대시보드 페이지로 돌아가서, 어떤 컴퍼넌트들이 동적 vs 정적이 되어야할까요?

준비가 되었다면 버튼을 눌러 대시보드 라우트를 어떻게 쪼갤수 있는지 확인해 봅시다.

• <SideNav> 컴퍼넌트는 데이터나 유저 개인화에 따라 달라지지 않습니다. 따라서 정적이어야 합니다.
• <Page> 내에 컴퍼넌트는 데이터나 유저에 맞춰 정보가 바뀝니다. 따라서 동적이어야 합니다.

부분 미리 렌더링이란?

Next.js 14는 부분 미리 렌더링이 미리보기가 있습니다 -- 동적인 부분은 유지하면서 정적인 로딩 쉘로 렌더링 해주는 실험적인 기능입니다. 다시 말해서, 동적인 부분을 분리할 수 있습니다.
예를 들어

유저가 해당 라우트를 방문할때

• 정적 라우트 쉘로 빠른 초기 로드를 유지합니다
• 쉘은 동적 컨텐츠를 비어놓고, 비동기적으로 컨텐츠를 불러옵니다
• 비동기 빈 컨텐츠는 전체적인 페이지 로드 타임을 줄이며 병렬로 스트림됩니다.

이것은 전체 라우트가 완전히 정적이거나 동적인 오늘날 어플리케이션이 동작하는 방식과 다릅니다.

부분 미리 렌더링은 굉장히 빠른 정적 컨텐츠의 표시와 동적 컨텐츠 제공 능력의 결합이고, 우리는 이것이 잠재적으로 웹 어플리케이션에서 기본적인 렌더링 모델이 될거라고 생각합니다.

퀴즈할 시간입니다!

익힌걸 테스트해보고 무엇을 배웠는지 봅시다.

부분 미리 렌더링 내에 구멍은 무엇인가요?

A 자바스크립트가 불가능한 부분

B 동적 컨텐츠가 비동기적으로 불러와질 부분

C 서드 파티 스크립트가 불러와질 부분.

부분 미리 렌더링은 어떻게 동적하나요?

부분 미리 렌더링은 리액트의 Concurrent APIs와 Suspense를 사용해서 특정 조건이 충족 될때까지(예를 들어 데이터 가져오기) 우리 어플리케이션의 일부 렌더링을 미룹니다.

초기에 정적 컨텐츠로 이루어진 정적 파일이 대체화면으로 내제됩니다. 빌드 시간(혹은 revalidation) 동안, 라우트의 정적 부분들은 미리 렌더링 됩니다. 그리고 나머지 부분은 라우트에 유저가 요청할때까지 미뤄집니다.

컴퍼넌트를 Suspense 안으로 래핑하는것은 그 자체로는 컴퍼넌트를 동적으로 만드는게 아닙니다.(우리가 동적으로 만들기 위해 unstable_noStore를 썼던것을 기억하세요) 그보다는 Suspense는 라우트의 정적과 동적 부분 사이의 경계로서 쓰여졌습니다.

부분 미리 렌더링에서 가장 훌륭한 점은 이것을 쓰기 위해 코드를 바꿀 필요가 없다는 겁니다. 우리 라우트의 동적인 부분을 Suspense를 사용해 감싸는걸로, Next.js는 어떤 부분이 동적이고 어떤 부분이 정적인지 알게됩니다.

노트: 부분 미리 렌더링이 어떻게 설정되는지 알고 싶다면, 부분 미리 렌더링(실험적) 또는 부분 미리 렌더링 템플릿과 데모를 시작해보세요. 이것은 아직 실험적이고 아직 실제 프로덕션에 배포하기엔 준비가 안 되었다걸 명심하세요.

요약

오약하면, 우리는 어플리케이션에서 데이터 가져오는데 최적화를 하기 위해 몇가지 것들을 해왔습니다.

1. 서버와 데이터베이스간 지연을 줄이기 위해 데이터베이스를 어플리케이션 코드와 같은 지역에 생성했습니다.
2. 리액트 서버 컴퍼넌트로 서버에서 데이터를 가져왔습니다. 이것은 비용이 드는 데이터 연산이나 가져오는 부분을 서버에서 처리하면서, 클라이언트 사이드의 자바스크립트의 일을 줄이고 클라이언트에 데이터베이스 비밀값들이 노출되는걸 막습니다.
3. 오직 필요한 데이터를 가져오기 위해 SQL을 사용했습니다. 이것은 각각의 요청에 전달되는 데이터의 양과 메모리 영역에 전환이 필요한 데이터의 양을 줄입니다.
4. 필요하다고 판단되는 부분에 자바스크립트로 데이터를 병렬로 가져왔습니다.
5. 느린 요청이 페이지 전체를 블럭하는것을 막기 위해 스트리밍을 사용해서 유저가 모든것이 불러와지기 전에 UI와 상호작용 할 수 있도록 했습니다.
6. 데이터를 가져오는 부분을 그것이 필요한 컴퍼넌트로 옮겨서 부분 미리 렌더링을 준비할때, 동적으로 되어야할 부분들이 분리되었습니다.

다음 챕터에서, 데이터를 가져올때 쓰는 검색과 페이지네이션, 두가지 흔한 패턴을 볼겁니다.

챕터 10를 완료했습니다.

Next.js 14에 소개되어진, 빠른 렌더링 모델인 부분 미리 렌더링에 대해 배웠습니다.

다음

11: 검색과 페이지네이션 추가하기

Next.js API로 검색과 페이지네이션을 어떻게 하는지 배웁니다.

챕터 11 시작하기

Ref

• https://nextjs.org/learn/dashboard-app/partial-prerendering