작년 11월 Nextjs13에 대해서 블로그 포스팅을 한적이 있는데 베타버전으로 나온지 얼마 안되어서 불안정(?)해서 안정해지면 좀 더 깊게 공부할려고 했는데 이전글들은 지우고 지금 다시 작성하게 되었습니다. 최근 1:1로 과외를 한적이 있는데 수업받으시는 분에게 NextJS에서 대해서 알려드린적이 있고 이전 블로그글 보다 좀더 깊고 약간의 팁을 적을려고 블로깅을 작성할려고 합니다.
이후에는 개인 블로그까지 만들어 볼 예정입니다.
NextJS를 사용하는 이유
가끔 블로그 포스팅을 보면 NextJS === SSR이라고 표현하는 글을 많이 본거 같습니다. 이 말도 맞는 말이긴 하지만 요즘 프론트엔드 프로젝트를 하다보면 이미지최적화, 폰트최적화 등 여러가지를 고려해야 한다고 생각을 합니다.. React는 UI를 쉽게 만들기 위한 JS 라이브러리 입니다. 이 말은 즉, UI를 쉽게 만들수 있는 라이브러리이고 나머지들은 개발자가 알아서 작업을 해야된다는 것입니다. 예를 들어 페이지 라우팅을 할려면 react-router-dom 라는 라이브러리를 설치해서 라우팅을 처리 할 수도 있고(다른 라이브러리를 사용하거나 개발자가 구현을 해야함), 이외에도 이미지 최적화 등 여러가지 셋팅을 개발자가 구현을 하거나 라이브러리의 도움을 받아야되는데 이는 개발자마다 구현방식, 사용하는 라이브러리가 다르고, 어떤 라이브러리를 사용해야 되는지 등 개발자가 알아서 선택해서 진행을 해야 됩니다. 하지만 NextJs는 UI, 라우팅, 최적화등 여러요소들을 내부적으로 지원하기 때문에 저런것들을 해경을 할 수도 있고, NextJS는 React 프레이임워크이며, 서버 사이드 렌더링, 정적 사이트 생성, 그리고 클라이언트 사이드 렌더링을 지원하고 SEO도 손쉽게 지원을 해주고 이미지 최적화를 자동으로 처리하고, 폰트 프리로드, 프리 렌더링등 개발자가 간단하게 설정이 가능합니다.
본격적으로 들어가기에 앞서 랜더링 방식, 용어설명을 하고 들어가겠습니다.
1. 용어 설명
웹 성능 지표를 나타내는 용어를 간단하게 설명하고 넘어가겠습니다.
SSR, CSR 관점에서 생각하면서 용어를 보면 좋습니다.
- FP(First Paint):
웹 페이지가 처음으로 랜더링되기 시작한 시점, 페이지의 전체 콘텐츠가 아직 로드 되지 않았을 수 있으며, 단순히 빈 화면이나 배경식등의 일부가 표시된 시간의 의미합니다.- FCP(First Contentful Paint):
웹페이지에서 처음으로 컨텐츠(텍스트, 이미지등)이 화면에 랜더링이 되기 시작한 시점을 측정하는 지표, 페이지의 초기 로딩 진행 상태를 나타냅니다. FP보다 구체적이며 사용자 경험에 미치는 영향을 더 명확하게 보여줍니다. 웹페이지의 초기 로딩 속도를 평가하는데 좀 더 유용합니다.- TTI (Time To Interactive):
웹 페이지가 사용자와 상호 작용 가능한 상태로 로드되는데 걸리는 시간을 측정하는 지표입니다. 페이지가 완전히 로드되고 JS와 같은 상호 작용 가능한 요소가 실행되어 사용자가 페이지와 상호 작용할 수 있는 시간을 나타냅니다.- TTV (Time To View):
웹 페이지에서 모든 컨텐츠가 사용자의 화면에 보여져야 하는 시점을 나타냅니다.- TTFB (Time To First Byte):
사용자가 웹 페이지를 요청한 후 서버에서 첫 번째 데이터 바이트가 브라우저로 전송 되기까지 걸리는 시간을 측정하는 지표입니다.
1. SSR
SSR은 서버사이드 랜더링으로 서버에서 랜더링이 된 HTML파일을 클라이언트로 내려주는 방식입니다. 위 그림처럼 서버에서 HTML을 랜더링을 실시하고 브라우저로 응답을 주고, 이 후에 빌드된 JS, React 관련 코드가 브라우저에서 다운을 받으면 브라우저에서 실행되어져야 비로서 그때서야 사용자가 조작이 가능해집니다. 여기서 눈여겨 보아야 할것이 미리 랜더링된 HTML을 파일을 먼저 사용자에게 보여지게 되지만 JS가 다운로드되고 실행되기 전까지는 Interative한 동작은 할 수 없다는 점입니다. 즉, 사용자 입장에서는 빨리 페이지가 보여지는 장점은 있지만 클릭을 했을때 동작이 안된다는 의미입니다.
HTML에 React,JS 코드가 실행되어야지 사용자가 웹 페이지가 상호작용이 가능해집니다.(Hydration)
TTFB는 서버에서 페이지를 만들어야 하므로 CSR에 비해 상대적으로 느릴 수 있습니다. TTV는 CSR 같은경우는 초기에 빈 HTML이 보여지고 브라우저에서 JS코드가 실행되어야지 보여지기 때문에 CSR보다 상대적으로 TTV는 빠른걸 알 수 있습니다. 그리고 TTI는 컨텐츠가 보여지고 JS(React)코드가 브라우저에서 실행되어져야 (Hydration) 상호작용이 가능해집니다.
3. CSR
SSR과 달리 CSR은 클라이언트에서 웹 페이지의 컨텐츠를 클라이언트(브라우저)에서 렌더링 하는 방식입니다. React의 경우 서버에서 클라이언트로 전송되는 초기 HTML문서에는 <div id="root"></div>와 같이 비어있는 div태그만 내려옵니다. (이 div 태그는 React app의 루트 엘리트먼트로 React 컴포넌트의 모든 요소가 이 div태그안에 랜더링이 됩니다.) 사용자입장에서는 처음엔 빈태그만 여지게 되겠죠? 이후에 JS, React코드를 다운을 받고 실행이 됩니다. 이후에 가상DOM을 생성한 후 실제 DOM에 그려지는 작업을 하게 됩니다. 그래서 위 그림처럼 TTV는 SSR에 비해 느려지지만 화면이 보여지게 되면 사용자는 바로 웹페이지와 상호작용이 가능해집니다. 초기 로드가 완료되면 더 많은 페이지를 가져오기 위해 서버를 왕복할 필요가 없으므로 사용자 경험은 거의 네이티브 앱 경험과 같이 정말 좋아집니다. 대신 초기에 빈 div태그가 보이게 되므로 SEO는 SSR에 비해 좋지 않습니다.
4. SSG(Static Site Generation)
SSG는 빌드타임에 웹페이지를 생성함으로써 CSR 및 SSR로 인해 발생하는 문제들을 해결 할 수 있습니다. 빌드타임에 필요한 서버데이터를 실제 빌드타임에 요청을 하고 미리 만들어 둠으로써 좀 더 빠른 페이지랜더링이 이루어집니다. 정적인 페이지이기 때문에 사용자 로그인이 필요하거나 수시로 데이터 변경이 필요하면 SSG는 좋지 않습니다. SEO도 좋습니다.
5. ISR(Incremental Static Regeneration)
Next.js에서는 빌드타임에 페이지를 생성한 후에 특정시간 마다 체크 후 페이지를 업데이트를 할 수 있습니다(ISR). SSG에서는 초기 빌드 과정에서 모든 정적 페이지가 생성이 됩니다. 반면에 ISR은 전체 사이트를 빌드하지 않고도 특정 페이지를 업데이트하고 재생성할 수 있습니다. 빈번한 콘텐츠 업데이트나 대량의 콘텐츠가 있는 웹 사이트에 더 나은 확장성을 제공합니다.
Next.js의 경우 revalidate 시간을 설정을 할 수 있는데 만약 30초로 해두면 30초전에 사용자가 페이지를 요청을 하면 이전 빌드타임에 만들었던 페이지를 제공해주고 30초 지난시점에 새롭게 페이지를 요청하면 새로운 페이지가 바로 보여지는게 아니라 Next.js 백그라운드에서 해당 페이지의 업데이트가 이루어지고 업데이트가 이루어지면 캐시를 갱신해서 다시 새로운 페이지를 보여주는 방식입니다. 즉, 30초마다 새로운 페이지를 보여지는게 아니고 30초 이후에 요청이 오면 우선 이전 페이지를 보여주고 갱신이 되면 새로운페이지가 보여집니다. 이는 페이지가 만들어질때 이전 캐시된 페이지를 제공하여 사용자가 페이지 빌드 타임을 기다릴 필요가 없습니다.
여기까지 NextJS를 공부하기에 앞서 용어 설명 및 페이지 랜더링에 대해서 알아보았고, 이후 블로그 포스팅에는 아래 이미지처럼 NextJS에서 제공하는 기술들을 실습을 통해서 알아 볼 예정입니다.(NextAuth도 포함) 이후에는 NextJS를 이용하여 개인 블로그를 만들어 볼 예정입니다.
참고 사이트: Naver D2
