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

• Next.js는 React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 프레임워크다. 그렇다고 React에서 SSR이 불가능하다고 묻는다면, 대답은 ‘React에서도 구현 가능하다’이다. 하지만, React로 개발환경을 구현하는 것은 굉장히 복잡한 일이었다.(React와 Next.js의 차이를 경험해보기 위해 사전에 예제 코드를 적용하며 경험해 보았다…) 이런 문제를 해결하기 위해 등장한 것이 바로 Next.js 되겠다.

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

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