Next.JS가 React를 위해 부릅니다 - 헤어지자 말해요

 

 

0. 라이브러리와 프레임워크 

 

라이브러리 - 자주 사용하는 로직들의 묶음판매, 필요한 기능을 골라골라~ 사용해~~

 

프레임워크 - 어플리케이션의 기본구조와 규칙을 제공 - 뼈대,틀을 이미 만들어서 써라! 이 뜻. 

                     제공된 구조 속에서 필요한 기능을 추가하고 수정해서 완성!

 

 

 

1. React는 무엇일까?

 

React는 웹 프레임워크로,자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. - 출처 : 위키백과

 

UI 자바스크립트로써 싱글 페이지 애플리케이션(SPA)의 UI를 생성하는데 집중한 라이브러리 

싱글페이지 라이브러리? SPA

서버로부터 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성하여 사용자와 소통하는 웹사이트

 

HTML, JavaScript, CSS 등 필요한 모든 코드는 하나의 페이지에 집결, 생성한 자원들을 동적을 가져와서 쓴다.

 

다소 의역 :그 페이지에서 json형식 같은 문서를 추가할때  새로고침을 할 필요없음, 최고의 아웃풋 페이스북 , 클라이언트 사이드 랜더링

 

 

단점..ㅠㅠ

클라이언트 사이드 랜더링

 

웹 앱을 완전히 표시하려면 브라우저가 전체 웹 애플리케이션 번들을

다운로드한 다음 그 내용을 분석하고 코드를 실행해서 결과를 얻어야 한다. 

 

그래서 아주 큰 웹 애플리케이션에서는 첫 화면을 표시하기까지 수 초가 필요하고 로딩시간이 조금 길어질 수 있다

 

 

 

 

 

 

 

 

 

 

       

자 우리 개발자들이 이 문제를 보고 눈뜨고 가만히 있을 수 없죠

이 문제를 해결하기 위해 개발자들이 웹 애플리케이션을 서버에서 미리 렌더링해두는 방법을 연구하기 시작했다. 

 

 

2. Next는 무엇일까?

 

Next.js는 리액트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크로, 리액트에는 없는 서버 사이드 렌더링server-side rendering(SSR), 정적 사이트 생성static site generation(SSG), 증분 정적 재생성incremental static regeneration(ISR)과 같은 다양하고 풍부한 기능을 제공합니다. 

 

Next.js 현재 넷플릭스, 트위치, 틱톡, 훌루, 나이키, 우버, 엘라스틱과 같은 유명 기업에서 사용

 

 

3. 그래서 왜 이동해야 해?

 

 

  꽁꽁 얼어붙은 Clint-side Rendering 위에 Server-side Rendering이 날라다닙니다.

 

html을 서버에서 만드는 법 - 서버 사이드 렌더링

 

 

 

CSR의 단점

• 구글 검색 노출이 좀 어렵다
• 첫 페이지 로딩 속도가 좀 느리다 

 

하지만 SSR은 다릅니다 !

•  유저한테 자바스크립트 코드를 많이 보낼 필요가 없어서 가볍다
• 구글 검색 노출도 잘 되는 편이다
• 일부 페이지에서 클라이언트 사이드 렌더링을 하고 싶다 그러면 그것도 선택적으로 가능하다

 

 

NEXT.JS : 안녕? 나는 풀스택 프레임워크야~

 

프론트엔드랑 백엔드 전부 다 개발할 수 있고 또한 리액트 문법을 그대로 쓸 수 있다

 

1. 파일과 폴더만 만들면 자동으로 html 페이지 막 생성

2. 클라이언트 사이드 렌더링도 자유롭게 가능! 

난 이런게 싫다? 그러면 아예  자바스크립트가 안 들어가 있는 아주 빠른 페이지도 되게 쉽게 만들어 낼 수 있다

3. 서버 데이터 캐싱 같은 것도 가능. 그리고 폰트랑 이미지 최적화 같은 것도 가능하기 때문에 그래서 되게 빠른 사이트를 만들어 낼 수 있다

 

 

 

 

 

 

 

아직 많이 이동하지 않았을 때 얼른얼른 써보는게 좋다 ~!

https://npmtrends.com/next.js-vs-react-is

next.js vs react-is | npm trends