NextJS란 ? [SSR,CSR,SSG,ISR,Pre-Rendering,Hybrid]

React의 SSR(server side rendering)을 쉽게 구현할 수 있게 도와 주는 간단한 프레임워크이다.
리액트로 개발할 때 SPA(single Page Application)을 이용하며 CSR(Client side Rendering)을 하기 때문에

좋은 점도 있지만 단점도 있는데 그 부분이 바로 검색엔진 최적화(SEO)이다.

CSR을 하면 첫페이지에서 빈 html을 가져와서 JS파일을 해석하여 화면을 구성하기 때문에 포털 검색에 거의 노출 될 일이 없다.
하지만 Next.is에서는 Pre-Rendering을 통해서 페이지를 미리 렌더링 하며 완성된 HTML을 가져오기 때문에

사용자와 검색 엔진 크롤러에게 바로 렌더링 된 페이지를 전달할 수 있게 된다.
리액트에서도 SSR을 지원하지만 구현하기에 굉장히 복잡하기 때문에 Next.js를 통해서 이 문제를 해결할 수 있다.

1. 리액트에서 서버로 요청을 보내면 서버에서 응답을 준다.

2. 브라우저에서 자바스크립트 파일을 다운로드한다.

3. 브라우저에서 리액트를 다운 받고 리액트를 실행을 한다. ( 여기까지는 로딩만 하고 화면을 보여주지 않음)

4. 이후 리액트를 실행한 이후에 화면을 보고 클릭과 같은 상호작용을 할수 있게 된다.

 장점 : 한번 로딩 되면, 빠른 UX제공, 서버의 부하가 작다.

단점 : 페이지 로딩시간이 길다. 자바스크립트활성화가 필수, SEO 최적화가 힘들다. 보안에 취약하다.

 

 

1. 서버가 이미 렌더링이 준비된 html파일을 보내준다.

2. 브라우저에서 바로 렌더링을 한다. 그 후 자바스크립트 파일을 다운로드 한다.

3. 브라우저가 리액트를 실행한다 .

4. 이후 상호작용

 

SSR(server side rendering)

- 클라이언트 대신 서버에서 페이지를 준비하는 원리
- 리액트에서는 CSR를 때문에 서버에 영향을 미치지 않고, 서버에서 클라이언트로 응답해서 보낸 html도 거의 비어있다.

=> CSR는 서버에서 데이터를 가져올 때 지연 시간 발생으로 UX 측면에서 좋지 않다.
=> 검색 엔진에 검색 시 웹크롤링이 동작할 때 내용을 제대로 가져와 읽을 수 없기에 검색엔진 최적화에 문제가 된다.

- Next. is에서는 서버 사이드 렌더링을 이용하므로 사용자와 검색 엔진 크롤러에게

   바로 렌더링 된 페이지를 전달 할 수 있어서 검색엔진 최적화에 좋은 영향을 준다.

단점

=> 비교적 느릴수 있다. 서버의 과부하가 걸릴 수 있다.

장점 

=> 페이지 로딩시간이 빠름. 자바스크립트가 필요없다. SEO 최적화에 좋다.

      보안 뛰어남, CDN 캐시, 실시간 데이터 사용, 사용바별 필요한 데이터를 사용

 

 

Static Site Generation(SSG)

빌드 타임 때 HTML을 각 페이지별로 서버에 생성해 놓고 요청 왔을 때 생성된 HTML을 반환.
그래서 브라우저가 페이지를 요청했을 때 이미 생성된 HTML만 반환하고 이것은 재사용할 수도 있다.

그래서 응답속도가 매우 빠르다.
즉, 외부 요청에 의해서 변동이 없는 페이지들은 먼저 만들어 놓고 그것을 재사용.

단점 : 데이터가 정적이다. 사용자별 정보 제공의 어려움

장점 : 페이지 로딩시간이 빠름. 자바스크립트가 필요없다. SEO 최적화에 좋다. 보안 뛰어남, CDN 캐시

 

Incremental Static Regeneraion(ISR)

SSG와 거의 동일하지만 서버가 주기적으로 렌더링을한다.

 

 

 

Pre-rendering

NextJS는 모든 페이지를 모든 페이지를 Pre-render 한다.

모든 페이지를 위한 HTML을 Cient사이드에서 자바스크립트로 처리하기 전, 

"사전에" 생성 하기 때문에 SEO 검색엔진 최적화가 좋아진다.

 

CSR

 

위와 같이 순수 리액트로 만들어진 웹사이트의 경우 자바스크립트 사용을 끄고 새로고침을 하면 거의 빈화면이 보인다.

 

 

 

 ssr

 

 

하지만 위 사진 처럼 NextJS로 만들 웹사이트의 경우에는 자바스크립트를 중지해도 화면은 잘 보인다

(물론 클릭이나 자바스크립트를 이용한 상호작용 기능은 안되유~)

 

 

요약

아무것도 안보인다.

 

이미 렌더가 된 html이 보여지게 된다. 하지만 상호 작용은 자바스크립트파일을 다운받고 Hydration 된 이후 가능하다.

 

 

 

 

Hybrid

페이지별 특징에 따라서 렌더링 방식을 다양하게 조합해서 사용. 아래의 현재 나의 블로그를 예시로 들자면 

https://softmoca.vercel.app/

모카의 블로그

url 페이지 마다 상황에 맞는 렌덜이 방식을 사용할수 있다.

Home은 ISR로 About은 SSG로 Posts는 SSR/CSR 혼합으로 Contact의 경우 CSR로 구성할 수 있다.

 

 

 

Q. 그럼 위와 같은 다양한 렌더링 방식을 언제 어떻게 써야 할까?

결정트리 형태로 정리 하면 아래와 같다.

CSR의 큰 특징중 하나는 사용자별로 데이터를 제공할수 있다.