[Next.js] Rendering 패턴

4. Rendering

v12 v.s. v13 차이?
Next.js 왜 쓰셨어요?
: 렌더링 패턴으로 대답하자.
CSR, SSR, ISR, SSG

next.js 12버전 : 렌더링 방식이 page 단위로 렌더링 방식 규정함
next.js 13버전 : react 18버전에서 제시한 서버컴포넌트/ 클라이언트컴포넌트 를 적용하여 component 단위 렌더링 방식을 규정

기본적으로 app 폴터 하위 모든 컴포넌트는 서버컴포넌트이다 (그냥 외우자)

"use client" 표시가 없다면 모두 서버 컴포넌트다.

내가 쓰는 터미널 = 웹 서버 = 소소코드가 돌아가는 환경이 서버컴포넌트 = runtime environment : node.js 환경
브라우저에서 콘솔 안 떠

-> "use client"를 쓰는 순간 브라우저에서 console.log가 뜬다 = 클라이언트 컴포넌트가 된다. = 브라우저 환경

node.js 환경에서 동작하는 건 = 서버 컴포넌트(SC) // 로컬
브라우저 환경에서 동작하는 건 = 클라이언트 컴포넌트(CC) = user와의 상호작용이 있는 컴포넌트 = user가 버튼을 클릭하는 등

그렇다면, 언제 sc, cc를 써야하는가?

next.js 공식 홈페이지 확인하자

user와의 interactive가 필요한 경우 client component를 써라 = 유저와의 상호작용
ex ) onClick, onChange, useStatem useEffect 등

=> 일단은 서버 컴포넌트로 써라!
그리고 오류가 나면 "use client"를 넣어서 클라이언트 컴포넌트로 바꿔라.

그럼 components 라는 폴더를 만들어서 button 컴포넌트를 만들어라
아하

전체적으로 서버 컴포넌트 안에서 상호작용이 필요한 onclick 같은 버튼이 있을 때, 해당 버튼만 따로 컴포넌트로 분리한 뒤, 클라이언트 컴포넌트로 사용 -> 이후 서버 컴포넌트 안에서 필요한 클라이언트 컴포넌트를 불러와서 사용하자.
= 서버컴포넌트 안에서 특정 부분만 클라이언트 컴포넌트로 사용 가능!!
= next.js를 사용하는 이유!!

4가지 개념 매우 중요!! 차이점 잘 정리해보자

SSG(Static Stie Generation) : 100,1000번 작동해도 변하지 않는다. = fetch에 아무 옵션을 주지 않는다.
cache : "force-cache" = 영원히 SSG로 동작하게 해줘

ISR : revalidate : 5 : 5초마다 한 번씩 새로고침이 되도록 해라 / 일정한 주기마다 새로운 데이터를 가져온다.
SSR : 요청할때마다 새로운 데이터를 갱신 / cache : "no-cache" : caching을 안 한다. = 새로고침 할 때마다 데이터 계속 바뀐다.
CSR : 데이터를 가지고 오는 사이, 로딩중...을 나타나게 할 수 있다.

어떤 렌더링 패턴을 사용할 것인지는 개발자가 선택해야한다.

렌더링 패턴 4가지

dev 모드에서 하면 안되고, build를 한 다음 start를 해줘야한다!

dev 모드가 아니라 production 모드에서 해야함.
= build하고 start 해주면, build된 파일이 start 된다.

• yarn build && yarn start : 한 번에 할 수 있는 명령어