Next.js의 데이터 패칭

 

Next.js

React를 기반으로 만들어진 Next.js의 경우 기존 리액트가 SPA 친화와 더불어 CSR을 중점적으로 제공함에 비해 SSR 및 사용자와 서버 친화적 데이터 패칭을 위해 CSR과 SSR 그리고 SSG를 같이 지원하는 ISR등의 여러 방식을 지원하기 위해 도입된 프레임워크이다.

React는 라이브러리로 팀 그리고 개인마다 가지각색의 형식과 양식이 존재한다. Next는 Vue와 같이 어느정도 틀이 잡힌 프레임워크 기반으로 React에서 필수적으로 사용하는 라우터 , 데이터 패칭이 들어있고 폴더 , 형식에 맞춰서 코드를 작성하면 구현을 해 준다.

클라이언트 사이드 렌더링(CSR, Client-Side Rendering)

자바스크립트를 사용하여 브라우저(클라이언트 사이드)에서 렌더링하는 것을 말하며, 모든 로직, 데이터패칭, 템플릿, 라우팅은 서버가 아닌 클라이언트에서 처리된다.

때문에 서버비용이 높지 않으며 첫 로딩 이후의 속도가 빠르다. 하지만 SEO에 부적합하며 초기 로드시간이 오래 걸린다.

서버 사이드 렌더링(SSR, Server-Side Rendering)

서버에서 완전히 렌더링 된 페이지를 클라이언트로 보내며, 클라이언트의 자바스크립트 번들이 SPA 프레임워크의 작동을 대신한다.

서버에서 렌더링되어 전송되기 때문에 동적 데이터를 사용하면서, SEO를 유지할 수 있다. 다만 서버에서 모든 요청이 처리되므로 서버의 높은 연산 능력이 필요하며 공격할 수 있는 지점이 많기 때문에 보안을 유지하기 어려우며 캐싱에 복잡한 구성이 필요하다.

SSR은 서버 비용을 크게 증가시킬 수 있으며, SEO에 크게 의존하는 매우 동적인 콘텐츠의 경우에만 사용해야 한다.

정적 페이지 생성 (SSG, Static Site Generation)

웹사이트의 모든 페이지를 미리 렌더링하여 클라이언트의 요청에 맞춰 즉각적으로 페이지를 제공한다.

완전히 정적인 HTML 기반 사이트인 SSG는 데이터베이스 또는 서버 측 프로세스가 필요하지 않기 때문에 가장 빠른 형식의 웹페이지이며, 미리 만들어져있기 때문에 SEO에 유리하며 안전하다.

하지만 매 업데이트마다 다시 빌드 후 배포해야 하므로 오랜 시간이 걸리며 귀찮다. 따라서 내용이 거의 변하지 않는 웹사이트에 적합하다.

점진적 정적 재생성(ISR, Incremental Static Regeneration)

SSG와 SSR의 장점을 합친 것으로, 전체 사이트를 재빌드 할 필요 없이 페이지별로 정적 생성을 사용할 수 있다.

페이지를 미리 렌더링하고 캐시하기 때문에 매우 빠르며, 내용이 변경되어도 사이트를 다시 배포할 필요가 없다. SEO에 유리하다.

다만 웹사이트에 방문한 도중에 업데이트 된다면 사용자는 업데이트 된 컨텐츠를 볼 수 없다. 따라서 블로그와 같이 동적인 콘텐츠이지만 자주 변경되지 않는 사이트에 ISR을 사용하는 것이 좋다.