Next.js의 서버

안녕하세요~

모두들 잘 지내고 계신가요? 

 

오늘은 디프만 활동을 하면서 제가 부족하다고 느낀 부분을 제대로 정리해보기 위해서 왔어요!!

 

디프만 활동을 하면서 저희 팀은 서비스의 빠른 초기 렌더링과 팀원들의 Next.js 역량 증진을 위해서

Next.js 프레임워크를 선택하게 되었어요.

 

백엔드 팀원들과 얘기를 나누던 중, 

Next.js의 "서버"는 백엔드 개발자들이 흔히 얘기하는 서버와 어떤 차이가 있고, 왜 존재하는지 질문을 했었어요.

 

저는 이 내용을 자신있게 대답하지 못 했고,,, 바로 찾아보고 다시 머릿속에 넣고자 했어요..🥲🥲

 

---

Next.js

우선 Next.js는 무엇일까요?

Next.js는 React 기반의 프레임워크로, 클라이언트와 서버의 경계를 넘나들며 동작할 수 있는 풀스택 프레임워크입니다.

 

특히, 서버 측 기능을 활용하여 동작인 웹 페이지를 생성하거나 API를 제공할 수 있는 점에서

다른 프론트엔드 프레임워크와 차별화됩니다.

 

그렇다면 Next.js에서의 서버 개념과 역할은 무엇인지 아래에서 확인해보죠..!!

 

---

Next.js에서의 서버

next에 의해 구현되어 있는 웹 서버에요.

 

서버는 말 그대로 '클라이언트의 요청에 응답하는 프로그램'을 통칭해요.

 

따라서 어떤 요청에 응답하는지에 따라 HTML/CSS/JS 등 정적 파일을 보내주는 프론트엔드 서버와
DB 데이터를 보내주고 연산하는 백엔드 서버로 나눌 수 있어요.

 

Next.js에서의 서버는 데이터를 처리하고 클라이언트 요청을 응답하는 기능을 포함하면서도,

React 컴포넌트를 서버에서 렌더링하는 기능에 초점을 맞춰요. 

 

이는 Next.js가 클라이언트 렌더링(CSR)뿐만 아니라, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)도 지원하기 때문이죠.

 

---

Next.js 서버의 주요 역할

1. 서버 사이드 렌더링 (SSR)

서버 사이드 렌더링이란 서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법을 의미해요.

Next.js는 getServerSideProps 함수를 통해서 SSR을 구현할 수 있어요.

 

특징으로는 

• SEO 최적화: HTML이 서버에서 완전히 생성되므로 검색 엔진 크롤러가 페이지를 쉽게 읽을 수 있어요.
• 동적 데이터 처리: 요청마다 데이터를 처리하고 렌더링할 수 있어 유연함 제공

Server-side Rendering

 

 

2. 정적 사이트 생성 (SSG)

Next.js 서버는 빌드 시점에 HTML 파일을 생성하여 정적 페이지로 제공할 수 있어요.
이는 getStaticProps와 getStaticPaths로 구현이 가능해요.

 

특징으로는

• 빠른 응답 속도: 빌드 시 HTML이 생성되므로, 요청 시 서버 부하 없이 즉시 응답 가능해요.
• CDN 캐싱: HTML파일만 주고 받으면 되기 때문에 CDN에 캐시가 가능해요.
• 페이지 로딩 시간 (TTV): 서버에서 들어둔 HTML파일만 받아서 표기하면 되기 때문에,
  리액트 라이브러리나 자바스크립트 소스코드들을 클라이언트 측에서 받을 필요가 없기 때문에 페이지 로딩 시간이 빨라요.

 

Static Generation

 

 

 

다음 시간에는 Next.js의 작동 방식에 대해서 구체적으로 다뤄보겠습니다.