Link

HTML의 A태그를 확장한 개념이다
Link 컴포넌트는 뷰포트에 링크가 나타나는 순간 해당 페이지의 코드와 데이터를 미리 가져오는
pre-fetching 기능을 지원한다

• 사용자가 링크를 클릭하기 전에 데이터를 미리 로드하여 사용자가 링크를 클릭하면 즉시 페이지를 볼 수 있게 해준다

Link태그는 route 사이에 Client-Side Navigation을 지원한다

• 브라우저가 새 페이지를 로드하기 위해 서버에 요청을 보내는 대신, 클라이언트 측에서 페이지를 바꾸어 주기 때문에 페이지 전환 시 빠른 사용자 경험을 제공한다
• 페이지의 HTML을 서버에 다시 가져올 필요 없이, 필요한 JSON데이터만 서버로부터 가져와 클라이언트에서 페이지를 재구성하여 렌더링 한다

useRouter

useRouter를 사용할 때는 항상 코드 최상단에 "use client" 를 선언해야 한다
대부분 onClick같은 이벤트에서 사용된다

• const route = useRouter() 예시처럼 useRouter를 선언하고 사용

Client Component

브라우저에서 실행되는 컴포넌트를 의미한다

코드 최상단에 "use client" 를 선언하면 클라이언트 컴포넌트가 된다

• 리액트의 라이프 사이클과 관련있는 훅을 사용 할 경우
• 유저와 상호작용을 하는 경우

주로 위와 같은 상황에서 CC를 사용한다

Server Component

서버에서 실행되는 컴포넌트이다
기본적으로 app 폴더 아래에 모든 컴포넌트는 서버 컴포넌트이다

• fetch data, access tokens, API key 등

CC 컴포넌트 이외에는 SC를 사용한다

렌더링 패턴

Static Site Generation

fetch한 데이터는 변하지 않음

• 계속 컴포넌트를 갱신할 필요가 없음

Build-time 때만 컴포넌트를 생성하고 이후는 변하지 않는 페이지로 가정하여 static 컴포넌트를 제공하는 것을 말한다

💡 Next.js는 기본적으로 SSG로 동작한다

fetch시 사용

• fetch에 아무 옵션도 주지 않는 방법
• fetch에 cache : force-cache 옵션을 주는 방법

Incremental Site Regeneration

fetch한 데이터가 가끔 변함

• 일정 주기마다 컴포넌트를 갱신해줌

Build-time 때 컴포넌트를 초기 생성하고 이후에는 일정 주기마다 변화를 적용하여 컴포넌트를 제공하는 것을 말한다

fetch시 사용

• fetch에 next : { revalidate : 5 } 옵션을 주는 방법
• 페이지 & 레이아웃에 export const revalidate = 5 추가하는 방법

Server Side Rendering

fetch한 데이터는 실시간으로 계속 바뀜

• 컴포넌트 요청이 있을 때마다 데이터를 갱신해서 최신 데이터를 제공함

Build-time 때 컴포넌트를 초기 생성하고 이후에는 컴포넌트 요청이 있을 때마다 변화를 적용하여 가장 최신의 데이터를 유저에게 제공한다

fetch시 사용

• fetch에 cache : "no-cache" 옵션을 주는 방법

Client Side Rendering

fetch한 데이터는 실시간으로 계속 바뀜

• 컴포넌트 요청이 있을 때마다 데이터를 갱신해서 최신 데이터를 제공함

Build-time 때 컴포넌트를 초기 생성하지 않고 Javascript로 이루어진 리액트 파일을 다운로드 받고 나서 화면이 그려지게 된다