[Next.js] 왜 Next.js를 쓸까?

Next.js?

웹 어플리케이션을 만들기 위해서 사용할 수 있는 React Framework

 

Libraries => 특정한 문제들을 해결하기 위한 tool을 가져다 쓸 수 있음

Framework => 큰 단위의 전체적인 솔루션(골격)을 제공함

ex) Routing, UI, HTTP Clients, 상태 관리

 

=> 리액트로 웹앱을 개발하는데 리액트 만으로는 힘든 많은 것들을 가능하게 해줌

 

 

 

Next.js의 6가지 원칙

- 복잡한 설정을 하지 않아도

- 자바스크립트를 사용해서 full stack 가능

- 자동으로 code split & sever rendering

- 데이터를 어떻게 패칭할 것인지 설정 가능

- 결과를 미리미리 예측

- 손쉬운 배포

 

 

Web App에서 쓸 수 있는 4가지 렌더링 방식

CSR (Client Side Rendering)

: 렌더링하는 주체가 클라이언트(브라우저)

브라우저 표기를 위한 모든 코드들을  클라이언트 측에서 다운로드 받아서 코드를 실행하고 분석하여 실행 

 

[CSR의 과정]

1. server에 요청 시 client는 빈 html 파일을 받게됨

2. client는 react 소스코드, js 코드까지 다운로드 받으면 브라우저에 보여줄 준비 완료

3. 이 세가지를 연결하여 DOM 요소로 변환

4. DOM tree를 Painting

장점	문제점
- 한번 로딩 되면, 빠른 UX를 제공 - 부분적으로 데이터를 가져오기 때문에 server의 부하가 적음	- 긴 페이지 로딩 시간(TTV: time to view) - 자바스크립트 활성화가 필수 - SEO 최적화가 힘듬 - 보안에 취약함 (정보를 사용하기 위한 KEY등) - CDN에 캐시가 안됨

※ CDN (Content Delivery Network)

CDN(콘텐츠 전송 네트워크)은 지리적으로 분산된 여러 개의 서버이다. 웹 콘텐츠를 사용자와 가까운 곳에서 전송함으로써 전송 속도를 높인다. 전 세계 데이터센터는 파일 복사본을 임시로 저장하는 프로세스인 캐싱을 사용하게 된다. 따라서 사용자는 가까운 서버를 통해 웹 활성화 디바이스 또는 브라우저에서 인터넷 콘텐츠에 빠르게 접속할 수 있다. CDN은 웹 페이지, 이미지, 비디오 등의 콘텐츠를 사용자의 물리적 위치와 가까운 프록시 서버에 캐싱한다. 이렇게 하면 콘텐츠가 로딩될 때까지 기다릴 필요 없이 영화 감상, 소프트웨어 다운로드, 은행 잔고 확인, 소셜 미디어 포스팅, 구매 등의 작업을 할 수 있다.

 

출처 : https://www.akamai.com/ko/our-thinking/cdn/what-is-a-cdn

=> 이를 해결하기 위해 나온 것이 SSG, SSR

 

 

SSG (Static Site Generation)

: 렌더링하는 주체자가 server, application을 배포하고 빌드할 때 렌더링

빌드 시에 react 코드를 html로 변환해 놓음 => 요청을 하면 만들어둔 html을 보냄 => 클라이언트는 받아서 표기만 하면 됨

장점	문제점
- 빠른 페이지 로딩시간 - 자바스크립트 필요 없음 - SEO 최적화가 좋음 - 보안이 뛰어남 - CDN에 캐시가 됨	- 데이터가 정적임 - 사용자별 정보 제공의 어려움

=> 이를 해결하기 위해 나온것이 ISR, SSR

 

 

ISR (Incremental Static Regeneration)

: 렌더링 하는 주체자가 server, 주기적으로 렌더링

우리가 설정한 주기만큼 새로운 웹 사이트를 만들어 줌, SSG와 동일한 원리

장점	문제점
SSG와 같음 + 데이터가 주기적으로 업데이트됨	- 업데이트 되는 데이터,, 근데 이제 실시간은 아닌 - 사용자별 정보 제공의 어려움

=> 이를 해결하기 위해 나온것이 SSR

 

 

SSR (Server Side Rendering)

: 렌더링 하는 주체자가 SERVER, 요청 시 렌더링

=> 요청하는 사람이 누군지 확인 할 수 있음

장점	문제점
- 빠른 페이지 로딩시간 - 자바스크립트 필요없음 - seo 최적화가 좋음 - 보안이 뛰어남 - 실시간 데이터를 활용 - 사용자별 필요한 데이터를 사용함	- 비교적 느릴 수 있음 - 서버의 과부하가 걸릴 수 있음 - CDN에 캐시 안됨

 

 

 

Hybrid Web App

성능 좋은 강력한 웹 앱을 만들기 위해 각각 다른 렌더링 방식을 혼합하는 것

=> 페이지 별로 가장 최적화된 렌더링 방식을 선택 OR 한 페이지 안에서도 부분적으로 다른 렌더링 방식을 선택

 

Next.js의 Hydration

=> client가 서버에 페이지를 요청하면, next.js는 사용자가 볼수있는 정적인 HTML을 보여준다

=> 그 뒤에 인터랙션 처리를 위해 필요한 라이브러리와 소스코드를 보낸다

=> 정적인 html위에 REACT를 가득 채운다(하이드레이션)

(= 정적인 HTML 대신에 실제 컴포넌트를 보여주는 것, "컴포넌트 렌더링")

 

 

 

 

 

 

구름을  보자마자 '어엇,, 나 하늘 사진찍는거 좋아하는 사람인데' 하면서 주섬주섬 폰 꺼내기