현 직장에서 리엑트를 처음 사용하면서 궁금한 점도 많고 Next.js에 대해서도 관심이 있었는데 정작 '왜 사용하는건가?' 에 대한 의문이 들기 시작하면서 이번 포스팅을 작성하게 되었습니다.
서로간의 여러 차이점이 있는데 그 중에서 SSR(Server-Side Rendering)과 CSR(Client-Side Rendering)에 대해 알아보도록 하겠습니다.
1. SSR(Server-Side Rendering)이란?
SSR은 서버 측에서 웹 페이지의 초기 렌더링을 수행하는 방식입니다. 클라이언트가 페이지를 요청하면 서버는 요청에 필요한 데이터를 가져와서 해당 데이터를 사용하여 HTML을 생성한 후 클라이언트에게 응답합니다. 클라이언트는 받은 HTML을 브라우저에 렌더링하고, 필요한 경우 자바스크립트 파일을 로드하여 동적인 동작을 추가합니다.
Next.js는 React 기반의 프레임워크로, SSR을 구현하는 데에 특화되어 있습니다. Next.js를 사용하면 페이지를 서버 측에서 미리 렌더링하여 초기 로딩 속도를 향상시킬 수 있습니다. 또한, 검색 엔진 최적화(SEO)에 유리하며, 초기 페이지 로딩 시 사용자에게 보여지는 콘텐츠의 양을 최소화할 수 있습니다.
2. CSR(Client-Side Rendering)이란?
CSR은 클라이언트 측에서 웹 페이지의 렌더링을 동적으로 처리하는 방식입니다. 초기 요청에 서버는 단순히 정적인 HTML 파일을 반환하고, 클라이언트는 이후에 자바스크립트를 사용하여 데이터를 가져와서 렌더링합니다. 클라이언트가 자바스크립트를 실행해야만 페이지의 완전한 내용을 볼 수 있으므로 초기 로딩 속도가 느릴 수 있습니다.
React는 CSR을 위해 설계된 라이브러리로, 클라이언트 측에서 동적인 웹 애플리케이션을 구축할 수 있습니다. React는 가상 DOM(Virtual DOM)을 사용하여 효율적인 렌더링을 지원하며, 컴포넌트 기반 아키텍처를 통해 재사용 가능한 UI 요소를 작성할 수 있습니다.
3. Next.js vs React: SSR과 CSR 비교
- 서버 사이드 렌더링: Next.js는 기본적으로 SSR을 지원하므로 초기 로딩 속도가 빠르고 SEO에 유리합니다. 반면, React는 CSR을 기반으로 동작하므로 초기 로딩 속도가 느릴 수 있습니다.
- 개발 편의성: Next.js는 프레임워크로서 SSR을 지원하며, 데이터 통신 등의 기능을 내장하고 있어 개발자에게 편의성을 제공합니다. React는 라이브러리로서 더 많은 작업을 개발자가 직접 처리해야 합니다.
- 프로젝트 규모: Next.js는 대규모 프로젝트에 적합하며, 서버 사이드 렌더링이 필요한 경우에 특히 유용합니다. React는 작은 규모의 프로젝트 또는 동적인 UI를 필요로 하는 경우에 적합합니다.
4. 기타
- 라우팅 (Routing) : React에서는 보통 React Router와 같은 라이브러리를 사용하여 라우팅을 처리합니다. 반면에 Next.js는 내장된 라우팅 시스템을 가지고 있습니다. 따라서 Next.js를 사용하면 추가적인 라우팅 라이브러리를 사용하지 않아도 됩니다. Next.js의 라우팅 시스템은 파일 시스템 기반으로 동작하며, pages 디렉토리 안에 파일을 생성하면 해당 URL과 매핑됩니다.
- 정적 파일 제공 (Static File Serving) : Next.js는 정적 파일 제공을 위한 기능도 제공합니다. public 디렉토리에 파일을 위치시키면 Next.js 서버에서 정적 파일로 제공됩니다. 이를 통해 이미지, CSS, JavaScript 파일 등을 쉽게 제공할 수 있습니다. React에서는 일반적으로 웹팩과 함께 사용하여 정적 파일을 처리합니다.
이렇게 Next.js와 React의 SSR과 CSR을 중점적으로 비교해보았습니다.
정보들을 검색하고 읽으면서 각각 필요한 프로젝트가 있을 거라 생각하고 Next.js가 React 문법을 기반으로 하기 때문에 React를 선행하고 Next.js를 경험한다면 좋을 것이라 생각됩니다.
감사합니다.
