[Next] 01. Next.js란?

이제는 진짜 웹도 해야 할 때가 왔다

앱만 하다 보니 문득 이런 생각이 들었다.

“웹은 대체 언제 하지...?”

 

예전에 CRA(Create React App)로 몇 번 만져보긴 했지만 요즘은 다들 Next.js를 쓴다고 하니…
나도 이제 슬슬 공부 좀 해봐야겠다 싶었다.

 

---

Next.js란?

https://nextjs.org

Next.js by Vercel
The React Framework for the Web
풀스택 웹 애플리케이션을 위한 React 프레임워크

Next.js는 웹을 위한 React 프레임워크이며,
React로 UI를 만들고, Next.js로 기능과 최적화를 더하는 구조입니다.

---

프레임워크 vs 라이브러리

프레임워크라네요?

그 말은 곧…

주도권은 이제 내 손을 떠났다는 얘기겠죠.

• 라이브러리는 내가 필요한 기능만 골라 쓰는 도구
• 프레임워크는 “이렇게 쓰세요” 하고 전체 구조를 규정해버림

---

CSR vs SSR

Next.js는 기본적으로 SSR (Server Side Rendering) 방식을 씁니다.
그런데 원래 리액트는 CSR (Client Side Rendering) 기반이었죠.

그럼 이 둘은 뭐가 다를까요?

 

핵심은 렌더링을 누가 언제 하느냐입니다.

---

CSR (Client Side Rendering)

JS 번들을 받은 후에야 렌더링이 시작됨

• 브라우저는 HTML을 받지만 <div id="root"></div> 딸랑 있음
• 이후 JS 번들 다운로드 → 실행 → UI 렌더링
• 초기 로딩은 느림, 대신 이후 페이지 전환은 빠름
• SEO에 약함 (크롤러가 JS 실행을 못하면 화면을 못 봄)

---

SSR (Server Side Rendering)

JS 번들을 받기 전에도 이미 HTML이 보임

• 사용자가 페이지 요청하면 서버가 HTML을 미리 렌더링해서 전달
• 브라우저는 그걸 바로 표시
• 이후 JS가 로드되면 React가 hydrate() → 인터랙션 가능
• 초기 진입 속도 빠름, SEO에 유리

---

 

CSR은 JS 번들 받고 나서야 화면이 그려지고,
SSR은 그 전에 이미 렌더링된 HTML이 보인다는 점이 핵심이다.

[CSR]
사용자 요청 → 빈 HTML 전달 → JS 번들 다운로드 → JS 실행 후 렌더링 시작

[SSR]
사용자 요청 → 서버에서 완성된 HTML 전달 → 브라우저가 바로 렌더링 → JS 로드 → hydrate → 인터랙션 연결

 

제가 이해한 게 혹시 틀렸다면, 댓글 좀 써주세요.