이번 프로젝트는 여러가지의 이유로 Next.js로 프로젝트를 시작하려고 한다.
그 이유와 Next.js 의 강점을 한번 적어보려고한다.
일단 프로젝트 세팅 시 시작할때 Next.js로 시작을 했고 몇달전에 나온 App/dir 구성이 아닌 pages/ 구성 방식을 택했다.
Next.js란
리엑트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크로, 리엑트에는 없는 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG)과 같은 다양하고 풍부한 기능을 제공함
Next.js 선택 이유
이번 프로젝트는 쇼핑몰 프로젝트임.
사용자들이 있을 것이고, 사용자들이 검색 엔진에 우리의 사이트를 검색하는 일도 있을 것이다.
Next.js를 사용하지 않고 Client Side Rendering(CSR)로 페이지를 구성한다면 사용자가 우리 페이지에 관련된 내용을 검색해도 검색 엔진에는 나오지 않는다. 물론 불가능하진 않다.
그러나 그것들을 편하게 구현하게 해주는게 Next.js의 검색 엔진 최적화(SEO) 기능이다.
이유
검색 엔진 최적화(SEO)는 모든 웹 애플리케이션에서 가장 중요한 측면임
좋은 SEO는 애플리케이션이 검색 엔진에 쉽게 발견되어 사용자 기반을 크게 늘릴 수 있음.
이것이 Next.js를 이번 프로젝트에 적용하려는 가장 큰 이유다.
Next.js를 사용하면 페이지에 대한 서버 사이드 렌더링을 쉽게 설정할 수 있다. 이 기술은 검색 엔진 크롤러가 콘텐츠에 바로 접근할 수 있도록 하여 SEO를 개선할 수 있음
즉, SSR 프레임워크인
Next.js는Pre-Rendering을 통해서 페이지를 미리 렌더링하여HTML을 가져온 다음번들링된 JS파일을 가져오기 때문에 사용자와 검색 엔진 크롤러에게 바로 렌더링된 페이지를 전달할 수 있다.
반면CSR은 첫페이지에빈 HTML을 가져와 JS파일을 해석하여 화면을 구성하기 때문에 JS파일이 로드될 때까지 빈화면을 보여줘 사용자 경험이 나쁘다.
