Next Js

Next Js란

Next Js는 React를 기반으로하는 프레임워크입니다. Next Js는 React가 SEO를 위해 SSR을 가능하게 해줍니다.

SEO란 Search Engine Optimization의 약자로 검색 엔진들이 서버에 등록된 웹사이트를 하나씩 돌아다니면서 웹사이트의 HTML 문서를 분석해주는 것입니다.

SSR이란 서버사이드 렌더링를 의미하는데 서버로부터 완전하게 만들어진 html 파일을 받아와 페이지 전체를 렌더링하는 방식입니다.

Next JS의 SSR 단계

1. SSR을 기반으로 서버에 사전 저장된 Render Tree의 HTML을 로드
2. 사전 렌더링 이후에는 CSR 사용
3. 페이지가 그려진 이후에 페이지 내부에서 동적인 데이터를 패치하는 과정은 CSR 방식을 따름
4. 만약 페이지가 로드될 때 데이터가 함께 패칭되어야 하는 상황이라면 Next JS 의 데이터 패칭 방식을 이용해 첫 렌더링 시애 HTML 파일 뿐만 아니라 데이터가 패칭될 수 있도록 처리

Next JS의 장점

1. SSR을 제공하여 CSR 환경보다 빠른 렌더링이 가능
2. Next JS 개발 환경에서는 코드 변경 사항이 저장되면 응용 프로그램을 자동으로 다시 로드함
3. 파일 시스템 개반 라우팅을 사용하여 폴더의 경로에 따라 페이지의 경로가 설정되어 구축이 빠르고 관리가 편함
4. 각 페이지들을 사전에 미리 HTML 문서로 생성하는 사전 렌더링 기능 때문에 응답 속도가 매우 빠름
5. 번들을 여러 개로 조각내어 필요한 부분만 응답으로 전송해 로드 타임이 줄어듬