Next.js란?

📌Next.js란?

Next.js는 자바스크립트 프론트엔드 프레임워크이며 사용하기 쉽고 배우기도 쉬운편이다. 버전이 나올때마다 향상이 되며 제공하는 기능도 다양하다.

React와의 차이점?

리액트와 Next.js의 큰 차이점은 SSR과 CSR이다.

리액트 프로그램을 만들면 기본적으로 클라이언트 사이드 렌더링(CSR)이 된다.

CSR은 초 기에만 서버에서 리소스(HTML)를 클라이언트가 받고, 그 후에 js파일을 다운으며 이후에는 데이터만을 주고 받아 클라이언트에서 렌더링하게 된다.

이때 html은 비워져있고 js파일에 프레임워크, 로직, 라이브러리 등이 다 포함되어있기 때문에 초기에는 빈 화면이며 사이즈가 크기때문에 다운로드받는데 시간이 걸린다.

리액트는 이런식으로 UI를 제공하기 때문에 유저의 인터넷이나 컴퓨터, 핸드폰의 성능이 좋지 못하면 JS파일을 다운로드/프로세싱하는데 너무 오랜 시간이 걸리기 때문에 유저는 그냥 빈 화면만 보게될 수 있다.

프레임워크들은 이러한 문제점을 해결하고자 노력해왔고 이 때 사용된것이 서버 사이드 렌더링(SSR)이다.

SSR은 CSR처럼 클라이언트에서 모든 것을 처리하는 방식과는 다르게 서버에서 필요한 데이터를 모두 가져와서 HTML을 만들고 동적으로 조금 제어할 수 있는 소스코드(javascript)와 함께 클라이언트로 보낸다.

이때 HTML이 만들어져 있기 때문에 SEO에 유리하다.

이렇게 사용자는 HTML이 완성되어 받기 때문에 빈 화면을 볼 가능성이 낮아진다. 하지만 이후에 자바스크립트를 받아오기 때문에 동적인 반응이 없을 수 있으며, 페이지가 이동할 때마다 서버에서 모든 것을 처리하기 때문에 서버에 부담이 되기 쉽다.

Next.js는 대표적으 SSR프레임워크이며 페이지를 미리 생성할 수 있고 원한다면 서버측에서 코드를 실행할 수 있으며 리액트처럼 CSR도 가능하다.

또한 React의 Hook인 fetch, useState, useEffect 또한 사용할 수 있다.