[/\/] Next.js에서 말하는 '서버'란?

Next.js는 웹을 만들기 때문에 웹 서버를 실행할 수 있는 프레임워크이다.

그렇다면 Next에서의 '웹 서버'란 무엇일까?

 

React의 웹 서버의 역할은 빌드 시점에 빈 html(id가 root인 빈 div태그)과 JS 번들 파일을 제공한다.

그것을 받은 브라우저는 알아서 JS를 해석하여 빈 태그에 JS 파일들을 바꿔 끼우는 형식으로 페이지를 구성한다.

브라우저는 빈 html을 받았기 때문에 JS를 인식할 때까지 시간이 걸릴 수 밖에 없다. 즉, TTV가 길다.

클라이언트 사이드 렌더링(CSR)이 바로 이러한 방식이다.

 

Next.js의 웹 서버의 역할은 빌드 시점(SSG)과 요청 시점(SSR)에 HTML을 생성하고 API 라우트를 통한 데이터를 제공한다.

나누자면 html은 프론트엔드, API를 제공하는 건 백엔드의 역할이다. 마치 풀스택처럼 작동한다.

브라우저는 기본적으로 완성된 html을 받기 때문에 화면에 빠르게 나타낼 수 있다. 즉, TTV가 짧다.

 

런타임 환경 측면에서 보자면

Next는 서버에서 실행될 때 Node.js 환경을 사용하여 DB와 통신할 수 있다.

(웹 브라우저 바깥에서 JS 코드 실행 가능 / 터미널)

 

 

결론은,

전통적으로는 FE와 BE가 나누어서 작동하지만 이제는 Next가 풀스택처럼 작동한다.

Next.js에서 말하는 서버는 단순한 웹 서버뿐만 아니라, API 백엔드 역할까지 포함하는 개념이다.