[TIL] Next.js 기초 공부하기 - 1 (렌더링, csr, ssr, Hydration, use client)

👉🏼 KIM·2024년 11월 11일

TIL

목록 보기

33/55

/not-found.tsx은 일치하지 않는 전역 URL을 처리한다.
404 에러가 나는 페이지를 내 입맛에 맞게 바꿔줄 수가 있다.

usePathname은 현재 URL의 pathname을 읽을 수 있게 해주는 클라이언트 컴포넌트 훅.
const path = usePathname()을 사용하려고 하니 아래와 같은 오류가 생겼다.

서버 컴포넌트에서 React 클라이언트 훅을 사용하고 있을 때 발생하는 오류로 'use client' 를 추가해 클라이언트 컴포넌트로 바꿔줘야 함

NextJS가 리액트 컴포넌트를 브라우저가 이해할 수 있는 html로 변환하는 작업

단순 HTML을 React application로 초기화하는 작업
NextJS로 웹 사이트를 빌드할 때, 기본적으로 SSR을 사용함(자동임)
자바스크립트가 활성화되어 있지 않아도 사용자가 html을 볼 수 있음(기존에 이미 갖고 있기 때문)
Nextjs에서 모든 컴포넌트와 페이지들은 먼저 서버에서 렌더됨 ('use client' 사용 여부와 상관없음) --> pre render함
api나 데이터 패칭등은 ssr에서 해주면 절대로 클라이언트한테는 갈일 이 없기 때문에 보안상 좋다.

서버사이드 렌더링(SSR)을 통해 만들어진 인터렉티브하지 않은 html을 클라이언트 측 자바스크립트를 사용하여 인터렉티브한 리액트 컴포넌트로 변환하는 과정을 말함
서버 환경에서 이미 렌더링된 기본적인 html에 React를 붙이는 것
Next.js는 초기 html 파일을 먼저 전달하고 이후 html 요소들을 React 컴포넌트로 변환 및 이벤트리스너를 부착하여 React DOM에서 관리하게 함. 이 과정을 Hydration(수분 보충)이라고 함.

/about-s -------> <button>0</button> ------> :) ---------> <button onClick ~>

클라이언트 컴포넌트를 사용하려면 파일 상단, import 위에 React "use client" 지시어를 추가하면 됨
"use client"은 서버와 클라이언트 컴포넌트 모듈 간의 경계를 선언하는 데 사용
즉, 파일에 "use client"을 정의하면 하위 컴포넌트를 포함하여 해당 파일로 가져온 다른 모든 모듈이 클라이언트 번들의 일부로 간주됨.
클라이언트에서 하이드레이션되는 컴포넌트는/클라이언트에서 인터렉티브하게 만들어질 컴포넌트는
상단에 "use client"가 있는 컴포넌트들이다.
상단에 "use client"가 있는 컴포넌트는 클라이언트에서 인터렉티브해야함(이 컴포넌트는 하이드레이션되어야해야함)
nextjs가 좋은 점이 "use client"를 안써도 프레임워크라서 알아서 알려줌(너 useState 쓰고 있으니 인터렉티브한거니까 써줘야돼 라고.. 쏘 친절)
백엔드에서 렌더되고 프론트엔드에서 하이드레이션 및 인터렉티브 됨
use hydrate 였다면 더 좋았을텐데... 이름만 어려운
use client 컴포넌트를 사용하지 않는 모든 것들은 서버 컴포넌트가 됨
'use client'를 사용하지 않는 다는건 인터렉티브한 것을 사용하지 않는다는 것이기 때문에 하이드레이션 할 필요가 없고, 그렇게 되면 자바스크립트의 양이 줄어들고 속도가 빨라짐