[FE]What is Next.js?

The React Framework for Production

React

Next.js는 React로 만든다. 즉, React는 Next.js의 기능과 규칙의 원형이 된다.

 

React vs Next.js

React는 클라이언트사이드 렌더링(CSR), Next.js는 서버사이드 렌더링(SSR)의 방식을 주로 채택한다.

SSR의 방식의 이점은 다음과 같다.

 

1. 로딩 시간 감소

CSR의 경우 모든 엔트리 포인트의 렌더링을 담당함으로써 클라이언트 측의 모든 JS파일을 로드한다. 이때 걸리는 로딩 시간이 바로 사용자가 마주하게 되는 빈 화면 상태인데, SSR은 서버에서 이를 모두 렌더링하기 때문에 로딩 시간이 줄어들게 된다.

 

2. 검색 엔진 최적화

CSR의 경우 검색 엔진이 자바스크립트를 읽는데, 이때 로드되지 않은 페이지를 스캔하여 아무 정보도 얻을 수 없게 된다. 하지만 SSR은 서버측에서 HTML, CSS, JS를 만들어 컨텐츠를 직접 업로드 하기 대문에 검색엔진에 게시글이 스캔된다. 

Framework

Framwork vs library: FLOW의 주도권

framework는 프로그래머가 제어한다. 

추상화를 제공하는 여러 클래스와 컴포넌트를 구성하며 이를 재사용할 수 있다.

즉, 라이브러리 상의 정보를 기반으로 컴포넌트를 구축하는 것이다.

따라서 React의 라이브러리 상에 구축되는 Next.js는, 다초점 파일 구조화 가이드라인이 제공되기 때문에 React앱 구축에 용이하다.

결국, Next.js는 React로 만드는 프레임워크이다.

 

library는 뼈대가 되는 제어 역전 개념으로 프로그램이 흐름을 주도한다.

함수가 주된 예시가 된다.

React는 사용자 인터페이스를 구축하기 위한 JS 라이브러리이다.

Production

Next.js는 React앱의 문제점을 해결할 수 있는 기능이 삽입되어 있다. 이를 통해 유지, 보수 및 개선이 가능하다.

 

A Fullstack Framework for React JS

프론트엔드측면에서 사용되는 next.js는 node.js로 백엔드 코드를 추가할 수 있는 Next React가 있다.

이를 통해 프론트엔드와 백엔드 모두를 아우르는 풀스택형태의, 업그레이드된 React를 만나볼 수 있다.