Next.js 특징
- 복잡한 설정없이 편하게 사용 가능.
- 자바스크립트만으로 프론트&백앤드 전부 사용이 가능.
- 코드스플릿트 기능: 사용자가 필요한 컴포넌트 부분만 로딩하여 로딩시간 최적화.
- data fetching 주기를 마음대로 설정 가능
- pre-rendering(사전 렌더링)을 해준다.
렌더링 기법
CSR(Client Side Rendering)
- 순수 리엑트를 사용하였을 때 사용된다.
- 렌더링의 주체는 브라우저이다.
- 브라우저에서 자바스트립트를 이용하여 동적으로 페이지를 렌더링 하는 기법
장점
1. 사용자와의 상호작용이 빠르고 부드럽다.
2. 서버에 추가적인 요청이 없기 때문에 사용자 경험이 좋다.
3. 서버의 부하가 적음.
단점
1. 첫 로딩시간이 길다.
2. 자바스크립트가 로딩되고 실행될때 까지 페이지가 비어있다, 리엑트의 단점인 초기렌더링이 느린점과 동일.
3. 불필요한 렌더링이 반복 될 수 있다.
SSG(Static Site Generation)
- 모든 페이지에서의 렌더링을 서버에서 수행하는 방식.
장점
- 초기 로딩속도 향상
- SEO 최적화
- 동적 페이지 지원
단점
- 정적인 페이지에만 사용가능
- 사용자와의 상호작용을 서버와의 통신에 의존하여 상호작용이 느리다.
- 서버 부하가 클 수 있다.
ISR(Incremental Static Regeneration)
특징
- 일정한 주기마다 갱신되는 것 revalidate 사용하여 설정
- 설정한 주기만큼 페이지를 게속 생성해준다.
- 정적 페이지를 먼저 보여주고 필요에 따라 페이지를 재생성
- 실시간 데이터는 아니다.
- 마이페이지처럼 데이터에 의존하여 화면을 그려주는 경우는 사용 불가.
- 은행에서 주로 사용
- 동적인 컨텐츠는 다루지만 실시간 페이지는 아니다.
SSR(Server-Side Rendering)
특징
- 유저가 페이지르 요청할 때마다 HTML 문서가 생성됨
=> 매 요청마다 서버에 의해 호출되는 getServerSideProps, getStaticProps, getStaticPaths 함수를 사용 - 동적으로 페이지를 생성해준다.
- 로딩 속도가 빠르고 보안성이 높다.
- SEO 최적화에 좋다.
-마이페이지처럼 데이터에 의존한 페이지 구성이 가능
단점
- 요청할 때마다 전체사이트를 다시 빌드해야해서 시간이 오래걸림
- 서버의 과부화가 있을 수 있다.
하이드레이션
- 껍데기만 있는 HTML을 react 같은 동적인 요소가 더해져서 채워지는 것
