📖 Intro
프로젝트가 본격적으로 진행되기 전에 우리는 많은 것을 결정해야 한다. 커뮤니티의 목적은 무엇인지, 어떻게 설계해야하는지, 회의는 어떤 방식으로 진행할지. 많은 항목들이 있지만 오늘 우리가 얘기하고자 하는 것은 Next.js 에 대한 이야기다.
저번 팀 프로젝트에서는 프론트엔드에서 많이 쓰이는 기술이 React이기 때문에 해당 라이브러리를 이용한 프로젝트를 하고 싶었고, 해당 기술의 숙련도를 익히고 심화적으로 증진시키기 위함이 주 목적이었다. 그러나 이번에는 다인원 프로젝트였고, 클론 코딩이 아닌 명확한 목적이 있는 여행 웹 커뮤니티였기에 렌더링 방식과 기술 사용에 대해 고민이 필요하다는 생각이 들었다.
본 글에서는 Next.js를 설명할때 빠질 수 없는 클라이언트 측 렌더링(CSR)과 서버 측 렌더링(SSR)에 대해 간단히 살펴보고, 왜 모행 프로젝트의 프레임워크로 Next.js가 적합한지 살펴볼 것이다.
📕 CSR
클라이언트 사이드 렌더링(Client Side Rendering, CSR)은 브라우저가 페이지의 HTML을 요청한 다음 자바스크립트를 로드하여 클라이언트 사이드에서 콘텐츠를 렌더링하는 렌더링 방법이다.
더 빠른 후속 페이지 로드, 더 나은 상호 작용 및 더 동적인 사용자 경험이 CSR의 장점이라고 할 수 있다. 그러나 초기 페이지 로드 시간이 길어지고 접근성에 문제가 발생할 수 있다는 점 때문에 검색 엔진 최적화(SEO)에는 부적합할 수도 있다.
때문에 CSR은 소셜 미디어 플랫폼이나 메시징 앱과 같이 많은 상호작용과 실시간 데이터 업데이트가 필요한 웹 애플리케이션에 보다 더 적합하다.
📘 SSR
SSR(Server-Side Rendering)은 서버가 완전히 렌더링된 HTML 페이지를 브라우저로 보내는 렌더링 방법이다. 서버는 초기 페이지의 렌더링을 처리하여 첫 번째 바이트까지의 시간을 줄이고 검색 엔진에 내용을 볼 수 있으므로 검색 엔진 최적화에 적합한 렌더링 방식이다.
첫 번째 바이트까지의 시간이 짧으며, 액세스 용이성이 향상되는 등 확실한 장점이 있자만 후속 페이지 로드 속도가 느리고, 상호 작용성이 저하되는 등의 단점도 있다.
때문에 SSR은 전자 상거래 웹 사이트 또는 뉴스 웹 사이트와 같이 SEO의 우선 순위를 지정하거나 정적 콘텐츠가 많거나 첫 번째 바이트까지의 시간이 빠른 웹 사이트에 적합하다.
📚 Next.js
Next.js는 최근 가장 인기 있는 React 기반 프레임워크라고 봐도 무방하다. 실제로 많은 공고문에 해당 기술을 우대사항으로 집어넣는 기업들을 많이 봤을 것이다. 나또한 다른 사람들의 깃 프로젝트를 보며 Next.js를 처음 알게 됐고, Next.js가 왜 그렇게 화제일까? 하는 궁금증이 들었다.
우선 Next.js 작동 방식은 다음과 같다.
- 사용자가 초기에 Server에 페이지 접속을 요청한 경우 SSR방식으로 렌더링 될 HTML을 보낸다.
- 브라우저에서 JS를 다운로드 받고 React를 실행한다.
- 사용자가 페이지와 상호작용을 하며 다른 페이지로 이동할 경우 CSR방식으로 Server가 아닌 브라우저에서 처리한다.
작동 방식을 보면 알 수 있듯이 Next.js 가장 큰 장점은 앞서 언급한 CSR과 SSR의 이점을 모두 결합했다는 것이다. 기본적으로 서버 측 렌더링을 사용할 수 있지만 필요한 경우 클라이언트 측 렌더링도 허용한다. 한마디로 말해서 SSR에 최적화된 프레임워크라고 볼 수 있겠다.
또한 Next.js는 서버측 렌더링에 대한 내장 지원을 하기 때문에 검색 엔진 최적화 성능을 높이고 노출 순위를 쉽게 개선할 수 있으며, 이미지, 코드 분할 및 느린 로딩을 자동으로 최적화하여 빠르고 응답성이 높은 웹 페이지를 구축할 수 있게 해준다.
때문에 여행지 정보와 코스 정보 같은 정적 컨텐츠가 비중을 많이 차지하고, 사용자들이 많이 유입될수록 (실제로 상업적인 배포를 한다면) 검색 엔진에 자주 노출될수록 더 활성화될 수 있는 여행 커뮤니티 웹사이트 모행에는 Next.js가 적합하다는 결론이 나왔다.
물론 사람들이 많이 이용하기 때문에, 혹은 취업하고 싶은 기업이 해당 경험을 우대해주기 때문에 같은 이유로 기술이나 툴을 선택하는 것도 합리적인 결정이라고 생각한다. 하지만 두번째 프로젝트이기도 하고, 제대로 해보고 싶은 마음이 컸기에 더 유의미한 고민과 결정을 하고 싶었다. 최근 Next.js가 혁신적인 개편(ㅠㅠ)을 하면서 살짝 멘붕이 왔지만 해당 부분에 대한 것은 후에 다루기로 하겠다.
