Nextjs

* 본 강의는 Udemy의 Next.js & React - 완벽 정복 가이드 (incl. Two Paths!)를 바탕으로 제작된 내용입니다. *

NextJS

1. NextJS

React는 라이브러리이다. NextJS는 프레임워크이다. 프레임워크와 라이브러리의 차이는 프레임워크가 더 규모가 크다는 것이다. React는 SPA를 구현하기 위한 JS 라이브러리이지만 실제 Production에 사용하기 위해서는 또 다른 라이브러리들이 필요하다(라우팅, 인증, …) 따라서 이러한 부분을 내장하여 React를 조금 더 Production 레벨에서 사용하기 쉽게 만든 것이 지금의 NextJS이다. 이러한 NextJS의 가장 큰 특징들이 SSR 지원,파일 기반 라우팅, API 기능 지원이다.

2. SSR(Server-Side Rendering)

SSR은 서버에서 미리 페이지를 만들어서 클라이언트 브라우저에 전송하는 렌더링 방식이다. React에서 사용하는 CSR과는 다르게 미리 페이지를 만들어서 주기 때문에 Data를 fetching하기 위한 Loading 시간이 없고 SEO(Search-Engine Optimization)이 잘 되어 검색 엔진에 더 잘 노출될 수 있다. 그러면서도 여전히 SPA(Single Page Application)의 렌더링 방식은 유지하여 사용자가 다른 페이지로 이동했을 때 깜빡임(Flickering)의 현상을 방지할 수 있다.

3. 파일 기반 라우팅(File based Routing)

여러 경로(url)을 탐색하며 페이지를 로드하는 것이 라우팅의 역할이다. 라우터는 URL의 변경을 감지하여 브라우저가 요청을 서버로 보내는 기본 동작을 방지하고 그 대신에 React를 통해 페이지 상에 다른 콘텐츠를 렌더링할 수 있다.

4. 풀스택 프레임워크(Full-Stack Framework)

데이터베이스에서 데이터를 가져오거나 인증을 추가하는 등의 코드를 추가하는 작업이 NextJS를 사용하면 아주 간편해진다.