next.js는 리액트를 기반으로 한 프레임워크이다. SSR(Server Side Rendering), ISR(Incremental Static Rendering), SSG(Static Side Generation)를 지원한다.
(리액트는 라이브러리이다.)
1. 라이브러리와 프레임워크
라이브러리와 프레임워크의 가장 큰 차이점은 코드의 제어권이다.
라이브러리는 정해져 있는 모듈들을 꺼내서 자유롭게 코드를 짤 수 있지만, 프레임워크는 뼈대와 구조가 정해져 있어 개발자가 프레임워크의 구조를 지켜야 한다는 차이점이 있다.
2. 리액트의 문제점
리액트는 CSR(Client Side Rendering)렌더링을 지원한다. CSR은 서버에서 모든 파일들을 가져와 클라이언트에서 렌더링 시킨다. 클라이언트에서 렌더링을 시키기 때문에 초기로딩속도는 느리지만 한번만 로딩되면 사용자가 빠르게 화면을 볼 수 있다는 장점이 있다. 단점으로는 SEO(검색엔진최적화)의 성능이 좋지 않고, CDN(Content delivery Network)에 캐시를 저장할 수 없다. 그리고 클라이언트에 모든 파일들을 저장하기 때문에 보안에 취약하다.
* CDN(Content delivery Network)이란 ?
- CDN은 전 세계에 위치한 여러 서버에 콘텐츠를 저장하고, 사용자가 가장 가까운 서버에서 콘텐츠를 다운로드 받을 수 있도록 하는 방식으로 작동한다. 이를 통해, 사용자는 콘텐츠를 빠르게 로드하고, 서버 부하를 줄이며, 대역폭을 절약할 수 있다.
1. CSR의 작동 방식
- 브라우저는 서버로부터 HTML, CSS 및 JavaScript 파일을 다운로드한다.
- JavaScript 파일을 실행하여 페이지의 동작을 처리한다.
- JavaScript는 서버에서 데이터를 가져오기 위해 API를 호출한다.
- 서버에서 데이터를 받으면, JavaScript는 HTML 템플릿을 채우고, CSS를 적용하여 사용자에게 보여줄 페이지를 렌더링한다.
3. SSG, SSR, ISR
이러한 리액트의 문제점들을 해결하기 위해 NEXT.JS는 여러가지 렌더링 방식을 제공한다.
1. SSG(Static Side Generation)
서버에서 렌더링이 된다. 빌드 할 때 미리 만들어둔 html파일을 클라이언트가 요청하면 서버에서 html파일을 보내주는 방식이다.
장점
- 페이지 로딩시간이 빠르다.
- CDN에 캐시를 저장할 수 있다.
- 보안성이 좋다.
- SEO에 유리하다.
단점
- 정적인 html 파일을 가져오기 때문에 데이터가 변하지 않는다.
2. ISR(Incremental Static Rendering)
서버에서 렌더링이 된다. SSG와 똑같지만, 주기적으로 서버에서 렌더링을 해준다는 차이점이 있다.
장점
- SSG와 같음
단점
- 데이터가 변하긴 하지만 실시간성이 없기 때문에 데이터가 많이 바뀌어지는 사이트에서는 사용하기 힘들다.
3. SSR(Server Side Rendering)
마찬가지로 서버에서 렌더링이 된다. 그러나 SSR은 데이터가 바뀔 때마다 서버에서 렌더링을 해준다.
장점
- SSG, ISR가 없는 실시간성을 가진다.
단점
- 데이터가 바뀔때마다 서버에 계속 요청을 보내기 때문에 서버에 과부하가 생길 수 있다.
- SSG ,ISR 보다는 비교적 속도가 느리다.
NEXT.JS에서는 페이지 별로 각기 다른 렌더링 방식을 선택 할 수 있다.
이러한 방법을 하이브리드 방식이라고 하는데, 하이브리드 방식을 이용하면 웹 어플리케이션의 성능을 향상 시킬 수 있다.
4. Hydration
각 페이지의 HTML을 미리 생성하는 것이다. 생성된 HTML은 해당 페이지에 필요한 최소한의 javascript와 연결된다. 그 후 브라우저에 의해 페이지가 로드되면, javascript가 실행되어 페이지와 유저가 상호작용할 수 있게 된다.
이해하기 쉽게 설명하자면, html파일을 javascript의 코드로 채우는 과정이다.
