[ Next.js ] React.js의 framework

1. Framework & Library

React.js는 javascript언어만으로도 html의 기능을 사용 가능하도록 만들고

반복되는 컴포넌트를 더 용이하게 사용할수 있도록 만든 Library이다.

그리고 Next.js는 React.js의 framework이다.

 

둘의 가장 명확한 차이점은 응용프로그램흐름의 주도권자 이다.

 

Framework

코드를 작성하는 기본적인 틀을 제공해서 보다 효율적으로 어플리케이션을 만들 수 있도록

소프트웨어 환경을 만들고 응용 프로그램은 프레임워크에 의해 사용된다.

 

Library

어플리케이션을 만들 때 필요한 자원 즉, 매소드(함수)의 모임이며

응용 프로그램이 라이브러리를 사용한다.

 

2. CSR & SSR

React.js는 CSR(Client-Side-Rendering)이다.

CSR은 클라이언트(Front)에서 브라우저에 보여지는 화면을 구성한다.

 

< 장점 >

초기에 로드만 완료되면 이후 렌더링이 빠르고 서버에 요청할 것이 적기때문에

서버의 부담이 적다.

 

< 단점 >

초기 html이 비어있기 때문에 SEO에 좋지않고 초기로드가 오래걸리고

외부 라이브러리가 추가로 필요한 경우도 많다.

 

장단점에 부합하는 " Web Applications "에 적합하다.

 

 

Next.js는 SSR(Server-Side-Rendering)이다.

SSR은 서버(Back)에서 브라우저에 보여지는 화면을 구성한다.

 

< 장점 >

초기 html에 모든 정보가 포함되어 있기 때문에 SEO에 좋고 초기로딩이 빠르다.

 

< 단점 >

서버에서 앱 전체를 미리 렌더링하기 때문에 컴포넌트 로딩이 오래걸리면 유저는

빈 화면을 보게 될 수도 있고 매번 서버에 요청하기 때문에 서버부하가 크다.

페이지를 요청할 때마다 새로고침되어 UX가 다소 떨어지는 편이다.

 

장단점에 부합하는 " Static sites "에 적합하다.