Nextjs 사용 이유

nextjs 로 개발한지 벌써 오래되었는데, 동작원리나 개념보다는 활용에 집중해 온 것 같다. 

오랜만에 공부하며 내용을 정리해봤다. 

Next.js는 왜 등장했을까?

CSR과 SSR의 한계와 Next.js의 탄생 배경

왜 CSR(Client Side Rendering)인가?

• 과거 웹은 JSP처럼 서버에서 HTML을 생성하고 전송하는 구조였음.
• Ajax(Asynchronous JavaScript and XML) 기술이 등장하면서, 웹페이지 전체를 새로 고치지 않고 필요한 데이터만 받아오는 방식이 가능해짐.
• Presentation Layer(화면)와 Data Layer(데이터)가 분리되면서, 사용자 경험(UX)이 크게 향상됨.
• CSR 덕분에 웹은 빠른 전환과 부드러운 UX를 제공할 수 있게 되었음.
• 그러나 CSR은 초기 로딩 속도가 느리고, SEO(검색 엔진 최적화)에 취약하다는 문제가 있음.

왜 SSR(Server Side Rendering)이 필요한가?

• SEO: CSR은 JS 렌더링 이후에 콘텐츠가 생성되기 때문에 검색 엔진이 제대로 인식하지 못하는 경우가 발생.
• 초기 로딩 속도 개선: 서버에서 미리 HTML을 렌더링해서 전달하면, 사용자가 빠르게 콘텐츠를 볼 수 있음.
• 번들 크기 감소: 서버에서 필요한 부분만 보내기 때문에, 클라이언트 부담이 줄어듦.

하지만 SSR은 다음과 같은 단점이 있음:

• 번들링, 컴파일링, 설정 파일(컨피규레이션) 관리가 복잡해짐
• 라우팅과 데이터 패칭, 서버 사이드 렌더링을 개발자가 직접 모두 다뤄야 함

그래서 등장한 것이 Next.js

• Next.js는 복잡한 SSR 과정을 프레임워크 레벨에서 추상화하여 제공.
• 개발자는 인터페이스만 사용하고, 내부 복잡성은 Next.js가 대신 처리함.
  (공식 문서에도 "zero-config" 철학이 강조됨)

Next.js가 제공하는 것들:

• 파일 기반 라우팅
• 자동 번들링 및 코드 스플리팅
• 서버 사이드 데이터 패칭
• API 라우트 등

---

 

https://dragon-developer.tistory.com/78

Next.js의 라우팅 시스템/코드 레벨에서 이해하기