NEXT.js는 CSR임? SSR임?

CSR과 SSR은 각자 장단점이 있다.

 

CSR (Client Side Rendering)

 

장점 

1. 한번만 로딩되면 나머지 동작에서 빠르다. (브라우저에서 한번에 다 다운받아서)

2. 서버의 부하가 적다.

 

단점

1. 페이지 로딩 시간이 길다.

2. SEO 최적화 is bad

3. 보안취약

 

SSR (Server Side Rendering)

 

장점 

1. 페이지 로딩 빠름

2. SEO 최적화 is godd

3. 보안 good

4. 실시간 데이터 OK, 사용자별 데이터 OK

 

단점

1. 서버에 부하가 있을수 있다.

2. 요청할때마다 받아와서 조금 느릴수있다.

 

 

---

NEXT.js를 사용하면?

 

얘는 하이브리드라서 

 

CSR이 필요한 곳엔 CSR로, SSR이 필요한곳엔 SSR로, 한페이지라도 CSR+SSR 섞어서 사용가능함 ㄷㄷ;

페이지별로 특징에 따라서 최적화 가능함

 

그리고 하이드레이션(Hydration)이라는 기술도 씀

일단 정적인 페이지로 HTML, CSS 만 보여주고, 사용자가 상호작용 하기전에 리액트파일을 보냄.

살짝 느낌은 비동기처리랑 비슷한 느낌인듯?

 

그래서 초기페이지 로딩속도랑 SEO 개선에 좋음.