Next.js에 대해서 - prologue

 

 

작년 11월, 프론트엔드 프로젝트에 참여하면서 Next.js 라는 프론트엔드 프레임워크에 대해서 배웠다.

 

그때 했던 토이프로젝트들..

https://github.com/seongyun4359/Board-NextJS

GitHub - seongyun4359/Board-NextJS: NextJS TypeScript를 활용한 웹 보드

 

https://github.com/seongyun4359/Weather-Dashboard

GitHub - seongyun4359/Weather-Dashboard: React TypeScirpt dashboard

 

 

그 당시에는 프로젝트를 위해서 학습을 했고, 그 프로젝트가 끝나고는 React만 사용했다.

 

그때 배웠던 기억을 되새기며, 추가적인 학습을 통해 Next.js에 대한 개념 공부를 다시 시작하려고 한다.

(앞으로의 프로젝트에서는 Next.js를 사용하는 빈도를 늘려야겠다.)

 

---

 

Next.js에 대해 알기 전에 SSR과 CSR에 대해서 아는가?

 

우리가 브라우저에서 보는 웹 페이지는 결국 HTML, CSS, JavaScript 코드가 합쳐져 '그려진(렌더링 된)' 결과물이다.

이 렌더링을 어디서 하느냐에 따라 크게 CSR과 SSR로 나눈다.

 

 

1. 클라이언트 사이드 렌더링 (CSR: Client-Side Rendering)

CSR은 말 그대로 클라이언트(사용자의 브라우저)에서 페이지를 렌더링하는 방식이에요. 우리가 create-react-app으로 만든 React 프로젝트가 대표적인 CSR 방식이다.

 

동작 과정:

1. 사용자가 웹사이트에 접속하면, 서버는 거의 비어있는 HTML 파일과 페이지 렌더링에 필요한 JavaScript 파일을 전송
2. 브라우저는 이 JavaScript 파일을 다운로드해서 실행
3. JavaScript 코드가 동적으로 DOM(Document Object Model)을 생성하고 콘텐츠를 페이지에 그려냄

장점:

•  빠른 인터랙션: 첫 로딩 후에는 필요한 데이터만 서버에 요청해서 받아오므로, 페이지 전환이 빠르고 부드럽다
•  서버 부하 감소: 렌더링을 클라이언트가 담당하기 때문에 서버는 데이터 제공에만 집중 가능하다

단점:

• 느린 초기 로딩 속도: 모든 JavaScript 파일이 다운로드되고 실행될 때까지 사용자는 빈 화면을 봐야 한다. (Time To View, TTV가 길다.)
• 검색 엔진 최적화(SEO)의 어려움: 검색 엔진 봇이 처음 접속했을 때 HTML이 비어있어서 콘텐츠를 제대로 수집하기 어려울 수 있다.

CSR은 언제 사용하면 좋을까? 사용자와의 상호작용이 많고, 데이터가 실시간으로 변하는 대시보드, 관리자 페이지 등 SEO의 중요성이 덜한 서비스에 적합하다.

---

2. 서버 사이드 렌더링 (SSR: Server-Side Rendering)

SSR은 서버에서 렌더링을 마친 완성된 HTML 파일을 클라이언트에게 전달하는 방식이다. Next.js는 바로 이 SSR을 손쉽게 구현할 수 있도록 도와주는 프레임워크!!

동작 과정:

1. 사용자가 웹사이트에 접속하면, 서버는 요청받은 페이지를 즉시 렌더링. (데이터베이스 조회 등 필요한 작업을 수행하죠.)
2. 서버는 렌더링이 완료된 HTML 파일을 브라우저로 보냄.
3. 브라우저는 완성된 HTML을 바로 표시하고, 이후 페이지의 인터랙션을 위해 JavaScript 파일을 다운로드해서 적용. (이 과정을 'Hydration'이라고 함.)

장점:

•  빠른 초기 로딩 속도: 사용자는 완성된 페이지를 즉시 볼 수 있어서 초기 로딩 속도가 빠름. (TTV가 짧아요.)
•  검색 엔진 최적화(SEO)에 유리: 검색 엔진 봇이 콘텐츠가 모두 포함된 HTML을 받아보니까, 페이지를 분석하고 인덱싱하기에 매우 유리함.

단점:

•  서버 부하 증가: 모든 요청마다 서버에서 렌더링을 해야 해서, 사용자가 많아지면 서버에 부하가 갈 수 있음.
•  깜빡임 현상 (Blinking): 페이지를 이동할 때마다 서버에 새로운 페이지를 요청하고 받아와야 해서, CSR에 비해 전환이 부드럽지 않을 수 있음.

SSR은 언제 사용하면 좋을까?
블로그, 뉴스 기사, 이커머스 사이트처럼 콘텐츠의 첫 노출이 중요하고 SEO가 필수적인 서비스에 매우 효과적이다.

 

---

Next.js는 이 두 가지 방식의 장점을 모두 취할 수 있도록 도와주는 강력한 프레임워크다. 초기 접속 시에는 SSR 방식으로 빠르게 페이지를 보여주고, 그 이후의 동작은 CSR 방식으로 부드러운 사용자 경험을 제공하는 하이브리드 전략을 기본으로 사용한다.

다음 포스팅에서는 Next.js에 대해서 더 깊게 공부해봐야지 파이튕!!

 

 

 

 

이미지 출처

https://codingapple.com/unit/nextjs-0-ot/