개발을 하다 보면, 다양한 방식의 렌더링 방법을 접할 수 있는데
그 중에서 Next.js는 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)을 모두 지원하는 프레임워크이자
웹 애플리케이션을 구축하는 데 매우 유용한 도구입니다.
Next.js는 React의 기능을 바탕으로, 개발자에게 더 나은 성능과 사용자 경험을 제공하는 다양한 기능을 내장하고 있다고 하여
예전부터 종종 사용하곤 했는데 본격적으로 왜 Next.js를 쓰는지 SSR이 뭔지에 대해 설명하고자 합니다!
CSR (Client-Side Rendering)이란?
: CSR은 모든 UI 렌더링이 클라이언트에서 발생하는 방식
CSR의 과정:
- 페이지 이동 시, Next.js는 서버에서 애플리케이션을 렌더링합니다.
- 서버에서 모든 컴포넌트를 렌더링하여 해당 HTML을 브라우저에 응답으로 전달합니다.
- 페이지 이동 시에도 빈 HTML이 아닌 서버에서 생성한 HTML을 보여줍니다.
장점:
- JS가 없어도 화면을 볼 수 있다: HTML로 페이지를 초기화하므로, JS가 로드되지 않더라도 화면을 볼 수 있습니다.
- JS 비활성화 시에도 화면을 볼 수 있음: 사용자가 페이지에 처음 접속할 때, UI가 빠르게 로드되며, JS가 비활성화된 경우에도 화면이 정상적으로 보입니다.
결론: Next.js로 빌드된 페이지는 기본적으로 서버에서 렌더링된 페이지와 컴포넌트들을 전달합니다.
Next.js의 장점
Next.js의 SSR 방식을 사용하면 페이지 이동 시, 서버에서 애플리케이션을 렌더링하여 클라이언트에게
이미 렌더링된 HTML을 전달할 수있습니다.
이 방식 덕분에 사용자는 페이지에 접속하면 빈 화면을 보지 않고, 빠르게 화면을 확인할 수 있는 것입니다.
또한, JavaScript가 비활성화되더라도 HTML로만 구성된 페이지를 볼 수 있기 때문에 SEO와 접근성 측면에서도 유리하죠
결국 Next.js로 빌드된 페이지는 서버에서 모든 페이지와 컴포넌트를 렌더링하여 사용자에게 빠르게 전달할 수 있게 되는것입니다!
💦 Hydration
Hydration은 서버에서 전달된 HTML을 React 애플리케이션으로 초기화하는 과정입니다.
- 예를 들어, /about-us 페이지에 접속하면, 서버에서 HTML을 로드한 후, 버튼이 보이지만, JS가 로드되지 않았을 때 버튼이 작동하지 않습니다. 이후 JS가 로드되면, 버튼이 작동하게 됩니다. 이 과정이 바로 Hydration입니다.
서버에서 모든 페이지와 컴포넌트를 렌더링하고 이를 HTML로 만든 후, 이를 클라이언트에 전달하여 React 애플리케이션을 초기화합니다. 클라이언트에서 HTML을 기반으로 React 애플리케이션이 동작하게 되는 것입니다.
🤔 Next.js에서 상단에 "use client"를 왜 써요?
"use client"란?
"Use client"는 오직 클라이언트에서만 렌더링된다는 의미가 아닙니다. 서버에서 렌더링되고, 클라이언트에서 Hydrate되는 것을 의미합니다.
- 모든 것이 SSR(Server-Side Rendering)으로 렌더링됩니다.
- 미리 렌더링되어 HTML로 변환되고, HTML이 사용자에게 전달됩니다.
- 이후 클라이언트 컴포넌트만 Hydrate되어 인터랙티브한 화면을 제공합니다.
- "use client"가 없는 페이지는 서버에서만 렌더링되므로, 클라이언트에게 노출될 걱정이 없습니다. (예: API 키)
Route Group
Route Group은 URL을 그룹화하는 기능입니다. 폴더 이름을 괄호로 묶어 Route Group을 만들 수 있습니다.
- [폴더] about: URL이 생성됩니다.
- (폴더) : URL이 생성되지 않으며, Route Group으로 묶여서 사용됩니다.
SSR vs CSR
CSR로 데이터 Fetch 시 단점:
- 로딩 상태를 직접 구현해야 함: 데이터가 로드되는 동안 로딩 상태를 처리해야 합니다.
- useState 사용: 컴포넌트가 처음에는 비어있기 때문에 상태 관리를 해야 합니다.
js코드 복사const [movies, setMovies] = useState([]);
- 수동으로 setMovies 호출: 데이터가 로드된 후 상태를 업데이트해야 하므로 렌더링이 발생합니다.
"Server Components에서 데이터 Fetch"
- useEffect와 useState를 사용하지 않아도 되며, 로딩 상태를 별도로 구현할 필요가 없습니다.
데이터 Fetch 시간이 오래 걸릴 때: Suspense
- 여러 데이터를 동시에 요청할 때, 데이터가 모두 로드된 후 한 번에 보여주는 것이 아니라, 각 컴포넌트에서 완료된 데이터부터 순차적으로 화면에 표시하는 방법입니다.
이렇게 하면 페이지 로드가 지연되는 것을 방지하고, 사용자가 데이터를 기다리는 동안 더 빠르게 결과를 확인할 수 있게 되어 사용자 경험이 개선될 수 있습니다.