[Next.js] Next.js 사용하는 이유

SeungMai(junior)·2022년 1월 17일
0

1. Next.js

  • SSR을 쉽게 수현하도록 도와주는 프레임워크

Next.js는 React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 프레임워크이다. 그렇다고 React에서 SSR이 불가능하다고 묻는다면, 대답은 "React에서도 구현 가능하다"이다. 하지만, React로 개발환경을 구현하는 것은 굉장한 복잡한 일이었다. 이런 문제를 해결하기 위해 등장한 것이 바로 Next.js이다.

2. Next.js를 사용하는 이유와 특징

  • SSR(Server Side Rendering)

사실 Next.js를 사용하는 가장 큰이유가 바로 SSR이다. 이 부분에 대해 이해하려면 SSR과 CSR의 차이를 명확히 알아야 하고, SPA에 대해 알아야 하는데, 일전에 이 부분에 대해 포스팅한 적이 있으므로 이번 포스팅에선 간단하게 짚고 넘어가겠다.

  • SSR vs CSR
    과거 대부분의 웹페이지는 SSR로 동작되어 왔다. 하지만, 스마트폰이 등장하게 되면서 모바일로 웹페이지를 확인하는 일이 잦아졌는데 당시의 웹페이지들은 모바일에 최적화되지 않아 사용하는데 커다란 불편함이 있었다. 이런 불편함을 개선하고자 모바일에서도 사용자 인터페이스를 적용하기 위해 React나 Vue.js 등 여러 라이브러리와 프레임워크가 등장하였고, CSR이 가능한 SPA(Single Page Application)가 등장하게 되었다.
  • 초기 로딩 속도가 빠른 SSR, 페이지 전환이 빠른 CSR
    SSR은 서버에서 View를 렌더링 하기 때문에 초기 로딩 속도가 굉장히 빠르고 검색 엔진 최적화(SEO)에 유리하다. CSR은 서버가 아닌 클라이언트 측에서 서비스에 필요한 자원(Resource)을 먼저 다운로드 후에 브라우저에 렌더링 하는 방식이다. SSR보다 초기 로딩 속도는 뒤쳐질 수 있지만, 첫 페이지를 로딩하면서 모든 파일을 다운로드하기 때문에 페이지를 이동할 때마다 해당 페이지에서 필요한 데이터만 불러서 사용한다.

3. Next.js 작동 원리

  1. 초기에 사용자가 Server에 페에지 접속을 요청하면, SSR방식으로 렌더링 될 HTML을 보낸다.
  2. 브라우저에서 JavaScript를 다운로드하고 React를 실행한다.
  3. 사용자, 페이지가 서로 상호작용하여 다른 페이지로 이동할 땐, Server가 아닌 CSR방식으로 브라우저에서 처리한다.
  • 검색 엔진 최적화(Search Engine Optimiztion)
    앞선 내용에서 SSR 구현이 Next.js를 사용하는 가장 큰 이유라고 말했다. 왜냐하면 검색 엔진 최적화(SEO)를 하기 위해서 SSR이 중요한 역할을 하기 때문이다. 그렇다면 검색 엔진 최적화를 왜 해야 하며, 어떻게 작동되는지 알아보자.
  • 검색 엔진 최적화의 필요성
    검색 엔진 최적화가 필요한 이유는 생각보다 단순하다. 우리가 온라인 쇼핑몰을 운영한다고 생각해보자. 이 쇼핑몰 사이트에서 수익을 올리기 위해선 가장 먼저 사용자들이 우리의 사이트에 접근해야만 수익 창출을 기대할 수 있을 것이다. 그러려면 브라우저에 쇼핑몰이 검색되고 노출되어야 접근하는 사용자수가 증가하고 판매량이 증가를 기대할 수 있는데, 이렇듯 검색 엔진 최적화는 서비스나 마케팅적인 부분에서 필요성이 증대되고 있으므로 우리가 어떤 서비스를 개발할 때, 반드시 고려해야 할 사항이다.
  • SSR과 검색 엔진 최적화(feat. CSR)
    결론부터 말하면, CSR에선 검색 엔진 최적화에 불리한 특징이 있으므로 SSR을 구현하여 검색 엔진 최적화를 하는데, 지금부터 검색 엔진 작동원리를 간단하게 알아보자.

4. 검색 엔진 작동원리

결론부터 말하면, CSR에선 검색 엔진 최적화에 불리한 특징이 있으므로 SSR을 구현하여 검색 엔진 최적화를 하는데, 지금부터 검색 엔진 작동원리를 간단하게 알아보자.

  • 검색 엔진 작동 원리
    검색 엔진 봇들은 사이트의 데이터를 크롤링할 때, JavaScript 파일을 해석할 수 없다는 특징을 가졌다. 때문에 HTML 파일에서 크롤링을 하게된다.

CSR방식은 Client 측에서 페이지를 구성하기 전까지 HTML에 아무것도 없으므로 데이터를 수집할 수 없는 상태이기 때문에 검색 엔진 노출이 어렵다. 반면에, SSR방식은 Server 측에서 화면을 그려서 보내주는 방식이다. 때문에 HTML 안에 이미 컨텐츠들을 포함하고 있는 상태이며, 크롤러 봇들이 데이터를 수집하는데 수월하다.

  • 정리하면, 일석이조인 Next.js ?!
    Next.js는 React를 기반으로 한 Framework이며, SSR를 구현하고 SEO에 유리하기 때문에 사용한다. Next.js는 Server에서 받은 사용자의 접속 요청을 초기에 SSR방식으로 렌더링 될 HTML을 보내고, 브라우저에서 JavaScript를 다운로드하고 React를 실행하기 때문에 SEO가 가능하다. 또한 다른 페이지로 이동할 경우 CSR방식으로 Server가 아닌 브라우저에서 처리함으로써 SPA장점도 유지할 수 있다.

5. 정리

  1. Next.js를 사용하는 주된 이유는 SSR을 구현하기 위함이다.
  1. 초기에 SSR로 렌더링하면 HTML을 보내기에 SEO에 유리해지고, 페이지를 변경할 때마다 CSR방식으로 처리하기 때문에 SPA장점도 유지할 수 있다.
  1. 코드 분할을 통해 초기 구동 속도를 빠르게 할 수 있다.
  1. Webpack 기반 환경을 통해 HMR을 적용하여 실시간 reload를 적용하는 등, 작업 환경을 커스터마이징하여 개발할 수 있다.
profile
👍🏻 SeungMai (매 순간 기록을!)🧑🏻‍💻 | WIL만 올리고 있습니다 | 기술블로그는 아래 🏠 의 링크를 이용해주세요.

0개의 댓글