요약해서 말하자면
1. 제일먼저 처음 접속한 웹 페이지 로딩 시간 단축하기 위해
-
검색엔진 노출을 위해
-
react router 사용 간략화
=======================================================
1. Next.js는 기본적으로 빌드 시에 만든 모든 페이지를 미리 렌더링을 하여 사용자에게 빠르게 보여준다. (전형적인 SSR 방식)
그 후 페이지에 필요한 최소한의 자바스크립트 코드를 불러와 페이지를 사용할 수 있게 해준다.
그리고 정적 파일을 제공해 편리한게 페이지에서 정적으로 사용하고 있는 이미지의 대한 path도 따로 설정해 줄 것도 없이 이미지 파일 이름만으로도 바로 설정이 가능해 정말 편리하다.
- 초기 로딩 속도가 빠른 SSR, 페이지 전환이 빠른 CSR
SSR은 서버에서 View를 렌더링 하기 때문에 초기 로딩 속도가 굉장히 빠르고 검색 엔진 최적화(SEO)에 유리하다. CSR은 서버가 아닌 클라이언트 측에서 서비스에 필요한 자원(Resource)을 먼저 다운로드 후에 브라우저에 렌더링 하는 방식이다. SSR보다 초기 로딩 속도는 뒤쳐질 수 있지만, 첫 페이지를 로딩하면서 모든 파일을 다운로드하기 때문에 페이지를 이동할 때마다 해당 페이지에서 필요한 데이터만 불러서 사용한다.
검색 엔진 최적화(Search Engine Optimiztion)
앞선 내용에서 SSR 구현이 Next.js를 사용하는 가장 큰 이유라고 말했다. 왜냐하면 검색 엔진 최적화(SEO)를 하기 위해서 SSR이 중요한 역할을 하기 때문이다. 그렇다면 검색 엔진 최적화를 왜 해야 하며, 어떻게 작동되는지 알아보자.
- 검색 엔진 최적화의 필요성
검색 엔진 최적화가 필요한 이유는 생각보다 단순하다. 우리가 온라인 쇼핑몰을 운영한다고 생각해보자. 이 쇼핑몰 사이트에서 수익을 올리기 위해선 가장 먼저 사용자들이 우리의 사이트에 접근해야만 수익 창출을 기대할 수 있을 것이다. 그러려면 브라우저에 쇼핑몰이 검색되고 노출되어야 접근하는 사용자수가 증가하고 판매량이 증가를 기대할 수 있는데, 이렇듯 검색 엔진 최적화는 서비스나 마케팅적인 부분에서 필요성이 증대되고 있으므로 우리가 어떤 서비스를 개발할 때, 반드시 고려해야 할 사항이다.
- SSR과 검색 엔진 최적화(feat. CSR)
결론부터 말하면, 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장점도 유지할 수 있다.
