넥스트 js라는 좋은 리액트 라이브러리가 있는대 왜 쓰느냐,
리액트로만 구현한다면 SEO에 관한 문제가 발생한다.
SEO란 검색엔진 최적화 라는 뜻인대 웹환경상 구글이나 네이버 같은 검색엔진에 노출될때 치명적이다.
CSR 방식은 검색엔진이 빈HTML파일을 확인할수밖에없기에 조사 결과 서버측에선 다른 리액트 서드파티 라이브러리를 사용해서 변환시켜 검색엔진에 노출시켜야 하기때문에 NEXT를 사용한다.
먼저 리액트가 동작하는 구조를 보면
TTFB: 빨리 첫 데이터 받는대 걸리는시간
서버에서 클라이언트로 빈 html 전송
CSS, 자바스크립트 파일 전송
클라이언트의 브라우저는 받은 JS 파일로 렌더링 시작
html 뷰 완성.
더 통신할게 남아있다면 컴포넌트들의 api통신을 사용해 추가적인 통신
순서 내에서 저 자바스크립트가 문젠대 받고 나서 렌더링 되기때문에
seo측면에서 NEXT.JS의 SSR-ssg 방식이 뛰어나다.
참조:
Why I Don't Use React JS Anymore! React JS vs Next JS
여기서 주목할점이 NEXT JS를 사용하면 SPA로 개발된 웹도 HTML을 브라우저가 즉각 띄울수있도록 보낸다는 장점이 있다.
그리고 NEXTJS를 사용할때 렌더링 방식은 웹페이지의 사용량과 목적에 따라 SSR-SSG를 사용하냐로 갈린다.
SSR : 서버에서 추가 컨텐츠나 JS 동작이 필요한 것 외의 것을 미리 만들어 두는것 이며
사용자는 미리 만들어 둔 웹페이지를 받고 난 다음
인터렉션이 필요한 JS 컨텐츠를 이 후 렌더링 한다.
SSG보단 사용자 경험이 좋지않다.
사용 예)
렌더링 시 CDN의 컨텐츠나 API통신이 필수 불가결 하면서 사용자의 행동이 많은 페이지일 경우
SSG: 페이지를 하나의 파일로 만들어서 빌드 한 것을 캐싱 해둔 다음 클라이언트에서 요구 받을 시 곧바로 제공해준다.
따로 API요청이 필요 없거나 적다
사용 예)
사용자의 액션이 많이 필요하지않고, 어느정도 정적인 페이지일 경우
