Next js란?
React는 라이브러리, Next js는 React의 프레임워크다.
Next는 node.js를 기반으로 구축
React VS Next js
(1) CSR ( Client Side Rendering )
- React는 CSR
- 클라이언트에서 HTML 파일에 직접 태그를 넣는 방식
- 초기 렌더링에서 서버로부터 전체 데이터를 가져옴
- 이후 일부 변경사항이 있는 컴포넌트만 다시 렌더링 ( 전체 새로고침x )
<과정>
브라우저가서버에 요청서버가 비어있는 HTML 파일을브라우저에 보냄브라우저가 js 파일을 다운받고 React 실행- 비어있던 HTML 파일이 채워지며 이후 페이지가 보이고, Interactable함
장점 : 초기속도는 느리지만 이후 클라이언트에서 필요한 부분만 다시 렌더링 하므로 속도가 빠르다.
단점 : 사용자가 초기 빈 화면을 보는 시간이 많아짐, SEO 에 불리함
그렇다면 Next js는 어떨까?
(2) SSR ( Server Side Rendering )
- Next js를 쓰는 이유
- 서버쪽에서 미리 준비한 HTML 파일을 브라우저로 가져와 바로 띄우는 방식
- 필요할 때마다 서버에 요청하고 받아옴
- 페이지에 변경사항이 있다면 페이지 전체가 새로고침
<과정>
브라우저가서버에 요청서버가 내용이 있는 HTML 파일을 브라우저로 보내줌- 이미 만들어진 HTML 파일이므로, 사용자에게 페이지가 바로 보여진다.
- 자바스크립트 파일 다운로드 -> 브라우저가 React 실행
- 이제 Interactable한 페이지가 됨.
장점 : pre-fetching이 가능하므로 사용자는 초기에 빈 화면이 아닌 완전한 화면을 볼 수 있다.
단점 : 변경사항이 있을 때마다 페이지 전체를 서버로부터 받아오므로 서버 부하가 있다
암냠냠