NextJS

Next.JS

NEXTJS

Next.js는 React의 SSR(Server Side Rendering)을 간편하게 구현할 수 있게 해주는 프레임워크이다.

 

클라이언트 사이드 렌더링 VS  서버 사이드 렌더링

서버 사이드 렌더링(Server Side Rendering, SSR)은 클라이언트가 페이지를 요청할 때 서버에서 해당 페이지의 데이터를 가져와서 완전한 HTML 문서로 만든 후, 브라우저에 전달하는 방식입니다. 이렇게 전달된 HTML 문서는 브라우저에서 바로 렌더링 되어 사용자에게 보입니다. SSR은 초기 요청에 대한 응답으로 완전한 페이지를 제공하기 때문에, 페이지 전체가 한 번에 로드되는 것을 볼 수 있습니다. 그리고 서버 측에서 페이지를 구성하기 때문에 이는 구글봇 같은 봇이 HTML의 내용에 접근할 수 있어 SEO에 아주 유용합니다. 하지만 SSR은 매 요청마다 페이지 전체를 새로 렌더링해야 하기 때문에, 불필요한 부분까지 리렌더링 되는 단점이 있을 수도 있습니다.

 

클라이언트 사이드 렌더링(Client Side Rendering, CSR)은 초기 요청에는 최소한의 HTML과 JavaScript 파일만을 전달하고, 실제 데이터는 JavaScript를 통해 비동기적으로 서버에서 가져와서 렌더링하는 방식입니다. 초기 로딩 속도는 느릴 수 있어 사용자의 TTV가 서버사이드 렌더링 보다 오래 걸릴 수 있지만 페이지가 로드된 이후에 사용자의 행동에 따라 필요한 부분만 가져와서 렌더링 하기 때문에 트래픽을 감소시키고 빠른 인터랙션이 가능합니다.

그러나 CSR은 초기에 HTML에 데이터가 없기 때문에 검색 엔진 크롤러 등의 검색 봇이 해당 페이지를 빈 페이지로 인식하여 SEO에 취약한 단점이 있습니다.

 

그럼 이 두가지의 사이드 렌더링을 보면 각각의 장단점이 있는데 어떤 것을 선택해야 할까요?

 

이러한 SSR과 CSR의 단점을 보완하고 장점을 결합한 것이 바로 Next.js입니다.

 

Next.js는 React 기반의 프레임워크로서, 서버 사이드 렌더링과 클라이언트 사이드 렌더링을 모두 지원합니다. Next.js를 사용하면 페이지의 초기 로딩 속도를 개선하면서도 SEO에 강점을 가질 수 있습니다. 

 

NextJS 특징

Next.js는 다양한 특징을 가지고 있는데요, 먼저 SSR(Server Side Rendering)을 지원한다는 점이 가장 큰 장점 중 하나입니다. 이를 통해 Next.js를 사용하면 React 애플리케이션의 SEO(검색 엔진 최적화)를 개선할 수 있습니다.

 

SSR은 서버 측에서 페이지를 구성하여 브라우저에 전달하기 때문에, 검색 엔진이 페이지의 내용을 쉽게 파악할 수 있어 SEO에 매우 유리합니다. 또한 Next.js는 간편한 라우팅 방식인 파일 기반의 라우팅을 지원합니다. 이는 페이지 간의 이동이나 경로 지정이 용이하여 이를 통해 개발자는 라우팅 코드에 집중하기보다는 실제 기능 구현에 더 많은 시간을 할애할 수 있습니다.

개인적으로 큰 매력인 특징이라고 생각합니다.

 

페이지 로딩 속도를 개선하기 위한 Code Splitting 자동화도 가능합니다. 이는 페이지를 로딩할 때 필요한 자바스크립트 파일만을 로드하여 더욱 빠른 페이지 로딩을 실현할 수 있도록 도와줍니다.

 

또한 Next.js는 Express나 Node.js와 같은 http 서버와 함께 구현이 가능하며, 이를 통해 서버 측 로직을 유연하게 구성할 수 있어 Next.js만으로도 풀 스택 개발이 충분히 가능합니다.

 

마지막으로, Next.js는 TypeScript로 작성되어 있어 TypeScript를 지원하고 있습니다. 이는 타입 안정성을 높이고 개발 생산성을 향상할 수 있도록 도와줍니다.

 

NextJS Pre-Rendering

Next.js에서 Pre-Rendering은 매우 중요한 개념으로, 모든 페이지가 사용자에게 보여지기 전에 미리 HTML을 생성하여 Pre-Rendering을 수행합니다.

 

이는 서버에서 앱이 미리 만들어지기 때문에 JavaScript 기능이 작동되지 않아도 앱이 작동한다는 장점을 가지고 있습니다.

 

Pre-Rendering 과정 중에 Hydration이 이루어지는데, 초기 로딩 시 HTML을 로드한 뒤에 JavaScript 파일을 서버로부터 받아와 HTML과 연결하는 과정입니다. 이 과정에서 React 컴포넌트는 초기화되고 사용자와의 상호작용을 준비합니다.

 

Next.js에서는 두 가지 Pre-Rendering 방식이 있습니다.

 

첫 번째는 Static Generation으로, 이는 최초에 HTML을 빌드할 때 동작합니다.

두 번째는 Server-side Rendering으로, HTML을 각 요청이 발생할 시점마다 생성합니다.

 

각 페이지마다 적절한 Pre-Rendering 방식을 선택하여 적용할 수 있습니다.

Pre Rendering

 

getStaticProps는 API나 DB 등 외부 데이터를 포함하는 경우에 사용되며, build 시 최초 실행되며 데이터를 새로 가져오지 않는 한 데이터가 고정(static file)되어 있습니다. 이는 SEO가 필요하고 변하지 않는 공개적인 캐시 데이터를 가져올 필요가 있는 경우에 사용됩니다. 예를 들어, 마케팅 페이지나 상품 리스트 등이 여기에 해당합니다.

 

getServerSideProps는 페이지가 요청될 때마다 호출되어 Pre-Rendering을 수행합니다. 매 요청마다 호출되므로 성능은 getStaticProps보다 부족하지만, 내용을 언제든 동적으로 수정할 수 있는 장점이 있어 보통 이를 사용합니다. 이와 관련하여 context는 params(동적 경로 정보), pathname(pages 폴더 내 현재 경로), req(HTTP 요청 객체), res(HTTP 응답 객체), query(쿼리 문자열) 등의 하위 키를 가지고 있습니다.

 

두 가지 방법의 큰 차이는 바로 빌드 이후의 변경 가능 여부입니다.