Next.js

• React에서 서버 사이드 렌더링을 간편하게 해주는 프레임워크
• 특별한 설정 없이 SSR, SEO부터 Typescript까지 생산에 필요한 많은 기능들을 제공해주는 강력한 React 프레임워크

Next.js의 특징

1. Server Side Rendering (SSR)

📍 <SSR - 서버 사이드 렌더링>
서버 측에서 렌더링하여, 클라이언트 쪽으로 보내주는 것 요청이 올 때마다 해당하는 html 문서를 그때 그때 생성하여 반환
ex) next.js
📍 <CSR - 클라이언트 사이드 렌더링>
서버에서 데이터를 받아와, 클라이언트 환경에서 렌더링하여 브라우저 화면에 표시하는 것
ex) react

1. 초기에 사용자가 서버에 페이지 접속을 요청하면, 기본적으로 서버 측에서 React 코드 실행한다.
2. React.js를 서버 측에서 Pre-rendering 하여 html를 생성하고 브라우저에게 보낸다.
3. 그 후, 브라우저에서 React를 사용해 웹 페이지 완성한다.

Next.js의 장점

• 리액트는 CSR로 SSR에 비해 초기 페이지 로딩이 오래 걸리고 SEO가 어렵다는 단점이 있다.
• 그에 비해 Next.js는 초기 로딩 속도가 빠르다.
• javascript로 모든 페이지를 구성하는 react와 다르게, 서버 사이드 랜더링을 하게 되면 검색 엔진들이 html를 직접 검색할 수 있음으로 검색어 노출, 즉 SEO(search engine optimization)에 좋다.

• HTML 파일에 모든 정보가 포함되어 있기 때문에 봇이 데이터 수집 가능하다.

Next.js의 단점

• 모든 요청에 대해 필요한 부분을 수정하는게 아닌 새로운 html 페이지를 내려주기 때문에 속도 저하나 새로고침이 발생한다.
• 페이지를 요청할 때마다 새로고침되어 UX가 다소 떨어진다.
• CSR보다 서버에 부하가 많고 페이지 이동 시 깜빡임 현상이 있을 수 있다는 단점이 있다.

2. Search Engine Optimization (SEO)

기존의 리액트는 html구성이 안되어있는 상태이기 때문에 검색엔진이 쉽게 찾을 수 없다.
반면 넥스트는 서버에서 이미 html을 구성하였기 때문에 SEO가 좋다.

구글의 크롤러 봇은 자바스크립트를 실행할 수 있어 CSR의 크롤링도 가능하다.
하지만 아직 완벽한 상태는 아니며, 구글 측에서도 자바스크립트를 실행 전 더욱 빠른 크롤링과 다른 크롤러 봇들을 위해 SSR을 고려해보라는 말을 한다.

SEO가 좋으면 사용자가 검색했을 때 제작한 페이지가 상단에 노출되어야 유입이 증가한다.

3. Pre-rendering

Next.js는 모든 페이지를 사전 렌더링한다.

3-1. Static Site Generation (SSG)

정적 생성의 경우 프로젝트가 빌드되는 시점에서 html 파일이 생성됩니다.

3-2. Server Side Rendering (SSR)

SSR은 매 요청마다 html 파일이 생성됩니다.
이 부분에 대해서는 다음 글에 자세히 적어볼 생각이다.

4. 동적 라우트

리액트와 다르게 별도의 세팅 없이 폴더 및 파일 기반으로 라우팅을 지원한다.

📍 미리 정의된 URL 주소로만 라우팅하는 것이 아니라 사용자가 접근한 경로 혹은 상황에 따라 동적인 라우팅을 제공하고 싶을 때 사용할 수 있는 방식이다.
📍 이를테면, /my-profile/ 뒤에 이름을 주어서 회원들의 프로필을 표현하고 싶다면? /my-profile/apple 페이지에서는 apple 의 프로필을 제공하고, /my-profile/orange 페이지에서는 orange 의 프로필을 제공하고 싶을 때 사용할 수 있다.
📍 Next.js 에서는 [param] 과 같이 페이지에 존재하는 컴포넌트 파일명에 괄호를 씌우는 것으로 가능하다. 이를테면 pages/my-profile/[name].js 와 같이 경로를 구성하면 위에서 예로 들었던 /my-profile/jake-seo 와 같은 URL이 잘 매칭되어 라우팅된다.

5. 개발 중 저장하면 자동으로 리 렌더링이 일어납니다.

hot reloading이라고하며 개발 중 저장되는 코드는 자동으로 새로고침된다.

6. 강력한 페이지 이동

넥스트는 "< Link />" 로 페이지간 이동이 빠르고 매끄럽습니다.

a태그와 다르게 페이지가 리로딩되지 않으며 가 뷰포트에 보이면 해당 페이지를 백그라운드에서 미리 가져온다.

7. 코드 분할

첫 페이지가 로드될 때 모든 코드를 호출하는 것이 아닌, 번들을 여러 조각내어 처음에 필요한 부분만 전송해 주는 방식으로 로드 시간을 단축시킨다.
코드 분할은 webpack, parcel 등 모듈 번들러도 지원하는 기능이지만 넥스트는 별도의 설정 없이 사용 가능하다.

Next.js 시작하기

1. cmd 창을 열고 npx create-next-app 입력

• typescript 기반의 next.js 프로젝트를 생성하고 싶다면 npx creat-next-app --typescript 입력

2. 설치 명렁어

npx creat-next-app

npx create-next-app --typescript

Next.js 특징 살펴보기
Next.js 개념 알아보기