[NEXT.JS] next.js에 대해서

안녕하세요 오늘은 NEXT.js 웹사이트를 읽고 번역을 해보려 합니다. 

nextjs.org/learn/basics/create-nextjs-app?utm_source=next-site&utm_medium=homepage-cta&utm_campaign=next-website

Learn | Next.js

Next.js 프레임워크와 React 라이브러리를 이용해서 웹 어플리케이션을 만들 때, 고려해야 할 사항들이 몇 가지 있다고 합니다. 

1. 코드가 webpack처럼 번들러를 이용해서 묶여있어야 하고, Babel(Javascript 컴파일러)같은 컴파일러를 통해서 변형되어있어야 하는 경우

2. 코드를 쪼개두는것과 같은 상품 최적화를 해야 하는 경우. 

3. 성능이나 SEO(Search Engine Optimization)검색엔진의 최적화를 위해서 페이지를 미리 정적으로 렌더링 하고 싶거나, server-side rendering이나 client-side rendering을 모두 사용하고 싶은 경우.

server-side rendering은 서버쪽에서 자바스크립트 파일을 컴파일해서 html을 사용자(client)에게 보내주는 것을 의미하고, client-side rendering은 사용자 즉, 클라이언트의 컴퓨터에서 javascript와 같은 언어를 컴파일해서 화면에 띄워주는 것을 말합니다. 간단한 차이를 말하면 서버사이드 렌더링은 서버에 부하가 많이 가는 작업을 하는 대신에 사용자가 빠르게 화면을 볼 수 있다는 장점이 있습니다. 그에 반해 클라이언트 사이드 렌더링은 서버에 부하가 적지만 사용자가 빈 화면을 볼 수 있는 확률이 있다는 점입니다. 

4. React app에 data를 저장하기 위해 server-side code를 적어야하는 경우

 

위와 같이 4가지 경우일 때 next.js를 해결을 해 줄 수 있다고 합니다. 다른 프레임워크 같은 경우애는 이런 문제점들을 해결해주지 못하였고, Next.js는 User Experience 사용자 경험이 아닌 개발자 입장에서 만들어진 프레임워크여서 팀 단위의 작업 시 코드를 적을 때 엄청난 이점을 발휘한다고 합니다. 

 

Next.js의 특징으로는 

1. 직관적인 페이지 단위의 라우팅 시스템(동적인 route도 가능)

2. Pre-rendering, 정적인 generation(SSG)나 서버사이드 렌더링(sever-side rendering; SSR)을 페이지별로 지원해준다고 합니다. 

3. 빠르게 페이지를 불러오기 위해 자동으로 코드를 분리해주는 기능 

4. client-side의 routing을 위해 미리 최적화시킨 fetching

5. Built-in CSS와 Sass를 지원하고 CSS에 들어간 JS 라이브러리를 모두 지원

6. 빠른 새로고침이 가능한 개발환경 

7. Severless Function을 API endpoint를 build 하기 위한 API route기능 

8. 확장성 

 

이라고 합니다. 더 많은 내용은 차차 공부하면서 또 적어볼테니 간단하게만 읽고 가보자고요!