Library vs Famework
React는 라이브러리(우리가 구조에 관한 결정을 내림. 폴더 구조, 파일의 이름 등)이고
Next.js는 프레임워크이다. 프레임워크가 우리의 코드를 호출해서 실행된다는 개념이다.
라이브러리와 다르게 우리가 결정을 내리거나 import 하지 않는다.
그래서 우리는 코드를 올바른 위치에 배치하고 함수에 올바른 이름을 지정하는 등 프레임워크의 '규칙'을 따라야한다.
Next.js 제공 파일명
Next.js라는 프레임워크에서 제공하는 기본 파일명이 있다.
page.tsx
NextJS에게 Routes를 알려주는(url을 정하는) 방법은 app폴더 안에 원하는 경로 이름을 가진 폴더를 생성하기만 하면 된다. (react-router-dom처럼 하나하나 설정할 필요가 없다!)
그리고 page파일을 해당 디렉토리 안에 생성한다. (여러 폴더를 중첩시켜서 경로를 만들 때 직접적인 page.tsx 파일이 없는 폴더는 실제 페이지 없이 그냥 경로의 일부분이 되는거다.)
app 폴더에 꼭 라우팅 폴더들만 만들 필요는 없다. page 파일을 만들지 않는 이상 실제 경로에 포함되지도, 렌더링 되지도 않기 때문이다.
not-found.tsx
존재하지 않는 페이지를 호출할 때 404 에러가 발생한다.
이 때 Next.js에서 명시한 규칙의 파일명 not-found.tsx를 사용하면 이 에러 페이지를 커스텀 할 수 있다.
Next.js 제공 hook
usePathname
user가 현재 머물고 있는 url을 알려준다.
그런데 바로 이 hook을 사용하면 "use client"를 사용하라는 에러가 발생한다.
코드 초반에 'use client'라는 코드를 넣어줘야한다. (밑에서 use client를 설명하겠다.)
SSR vs CSR
SSR (Server-Side Rendering)
서버에서 HTML을 생성한 뒤 클라이언트로 전송하는 렌더링 방식. nextjs는 ssr이다.
- 사용자가 페이지를 요청하면 서버에서 React 컴포넌트를 렌더링하여 완전한 HTML 페이지를 생성하고, 이후 React가 Hydration(단순 HTML을 React application으로 초기화하는 작업)을 통해 동적인 인터랙션을 활성화한다.
- ssr을 하는 nextjs는 처음에 사용자가 페이지에 도착했을 때, UI를 빌드하는 데에 JS가 필요하지 않다.
- 모든 컴포넌트와 페이지는 backend에서 먼저 render된다.
CSR(Client-Side Rendering)
초기 요청에서는 최소한의 HTML만 서버에서 전달하고, 나머지 페이지를 클라이언트에서 JavaScript를 통해 렌더링하는 방식
- 서버는 초기 요청 시 HTML 파일과 번들화된 JavaScript 파일을 전달한다.
- 브라우저는 전달받은 JavaScript 파일을 실행하여 화면을 렌더링하고, API 요청을 통해 필요한 데이터를 가져온다.
- 모든 렌더링은 클라이언트 측에서 이루어진다.
use client
backend에서 render되고, frontend에서 hydrate 됨을 의미한다.
"use client" 지시어를 맨 위에 가지고 있는 component들만 client에서 hydrate된다.
다른 말로, 인터랙티브 해야하는 component 위에는 use client를 붙여야 한다는 뜻이다.
예를 들어 useState()를 사용했는데 use client를 빼먹으면 nextjs는 오류를 발생시킨다.
use client를 사용하지 않는 comonent는 모두 server component가 된다.
리렌더링 될 필요가 없는 부분은 server component로 만들면 되는 것이다.
server component 안에 client component가 있는 것도 가능하다.
