📋 NextJS란 ?

NextJS는 React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 프레임워크다.

🌞 NextJS를 사용하는 이유와 특징

✌ SSR(Server-side Rendering)

서버 사이드 랜더링(SSR, Server-side Rendering)은 서버에서 첫 페이지의 렌더링을 클라이언트 측이 아닌 서버 측에서 처리해주는 방식이다.

✨ SSR VS CSR(+SPA)

• CSR과 비교하면, SSR은 서버에서 View를 렌더링 하기 때문에 초기 로딩 속도가 빠르고, 검색 엔진 최적화(SEO)에 유리하다.
• CSR은 서버가 아닌 클라이언트 측에서 서비스에 필요한 자원을 먼저 다운로드 후에 브라우저에 렌더링 하는 방식이다.
• CSR은 초기 로딩 속도는 다소 시간이 소요되지만, 첫 페이지를 로딩하면서 모든 파일을 다운로드 하기 때문에 페이지를 이동할 때마다 해당 페이지에서 필요한 데이터만 불러서 사용한다.

✌SEO(Search Engine Optimiztion)

검색 엔진 최적화(SEO, Search Engine Optimiztion)를 하기 위해서 SSR이 중요한 역할은 한다.

✨ 검색 엔진 최적화의 필요성

검색 엔진 최적화는 서비스나 마케팅적인 부분에서 필요성 증대되고 있으므로 우리가 어떤 서비스를 개발할 때 반드시 고려해야 할 사항이다.

✨ 검색 엔진 작동 원리

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

✍️ 정리

• NextJS를 사용하는 주된 목적은 SSR을 구현하기 위함이다.
• 초기에 SSR로 렌더링항 HTML을 보내기에 SEO에 유리해지고, 페이지를 변경할 때마다 CSR방식으로 처리하기 때문에 SPA장점도 유지할 수 있다.
• 코드 분할을 통해 초기 구동 속도를 빠르게 할 수 있다.