[React] Next.js Q&A

Next.js를 학습하면서 궁금한 점에 대한 자체 Q&A를 진행하려고 한다.

궁금한 점이 생길 때마다 업데이트를 할 생각이다.

Next.js 13.4 버전 이상의 app Router 기반으로 작성되었다.

---

Q: 'use client'를 사용한 CSR 컴포넌트도 어떻게 SSR 컴포넌트와 같이 서버에서 정적 HTML를 렌더링 할 수 있을까??
A: 기본적으로 Nextjs는 클라이언트 컴포넌트, 서버 컴포넌트에 대해 서버에서 정적 HTML preview를 렌더링 한다고 한다. 그 후 js 파일을 가져와 html과 하이드레이트 과정을 거치고 인터렉션이 가능하게 만든다

 

Server Component

Static Rendering (정적 렌더링): 빌드 시에 렌더링

Dynamic Rendering (동적 렌더링): 브라우저 요청 시 렌더링

 

Client Component

Full page load (전체 페이지 로드): 처음으로 방문하거나 페이지 새로고침 시 서버에서 렌더링

Subsequent Navigations: 서버에서 렌더링 된 HTML 없이 클라이언트에서 렌더링

 

공식 문서에서 클라이언트 컴포넌트의 렌더링 과정을 확인할 수 있었다.

---

Q: Next.js는 기본적으로 SSR컴포넌트이다. 그런데 라우터로 각 페이지마다 이동할 때는 SPA처럼 부드럽게 움직인다. 이유가 뭘까??

A: Link컴포넌트의 Prefetching과 Client-side Navigation 기능을 통해 SPA와 유사하게 동작할 수 있다.

 

Prefetching:  Link 컴포넌트가 브라우저 뷰포트에 표시되면 해당 Link가 연결된 페이지를 백그라운드에서 미리 가져온다. 덕분에 사용자는 해당 링크를 클릭했을 때, 페이지 로딩 시간을 줄이고 빠른 화면 전환이 가능하다.

Client-side Navigation: Link 컴포넌트를 통해 페이지를 이동할 때, Next.js는 전체 페이지를 새로고침하지 않고, 미리 로드된(Prefetching) 데이터와 JS 파일을 활용하여 기존 Single Page Application(SPA)의 방식과 유사하게 동작할 수 있다.

 

공식문서에서 Prefetching과 Link에 대해 확인할 수 있습니다.

 

---