Web Development/Next.js
[Next.js] 왜 우리는 Next.js를 사용하게 되었을까?
devflate
2024. 12. 22. 09:53
Next.js를 빈번히 사용하는 프론트엔드 개발자의 입장에서,
Next.js의 필요성에 대해서 정리해보았다.
Next.js의 필요성을 알기 위해서는 Next.js가 어떤 배경에서 나타난 기술인지를 알아야 한다.
웹 개발 방식의 변화 과정을 정리해보고, 거기서 어떤 문제를 해결하기 위해서 Next.js가 나타났는지 정리해보았다.
- 초기 웹사이트 개발
서버 개발자들은 JSP와 같은 템플릿 엔진을 활용하여 서버에서 데이터를 주입한 HTML을 생성하고, 이를 사용자에게 전달하였다. - AJAX의 등장
웹의 상호작용성이 중요해지면서, 페이지 이동 시 깜빡임 등의 문제를 해결하기 위해 비동기 처리를 지원하는 AJAX가 도입되었다. - CSR(Client-Side Rendering)의 부상
JavaScript를 통해 클라이언트 측에서 동적으로 콘텐츠를 생성하는 방식이 인기를 얻었다. - CSR의 한계
- 성능 저하: JavaScript 번들의 크기가 커질수록 로딩 시간이 증가하였다.
- SEO 최적화 어려움: 크롤러에게 빈 HTML이 전달되어 검색 엔진 최적화에 불리하였다.
- 보안 취약성: 클라이언트 측에서 모든 로직이 처리되어 보안에 취약할 수 있었다.
- CDN 캐싱 불가: 동적 콘텐츠로 인해 CDN을 통한 캐싱이 어려웠다.
- JavaScript 의존성: 사용자의 브라우저에서 JavaScript가 활성화되어야만 동작하였다.
- SSR의 재등장
이러한 문제를 해결하기 위해 서버 사이드 렌더링이 다시 주목받았다.
그러나 프론트엔드 개발자가 서버 운영, 인프라 관리, 서버 설정, 비즈니스 로직 구현 등 다양한 역할을 수행해야 하는 부담이 있었다. - Next.js의 등장
이러한 복잡성을 해소하고자 Next.js가 개발되었다.
Next.js는 라우팅, 렌더링, 데이터 패칭, 스타일링, 최적화, TypeScript 지원 등 다양한 기능을 추상화하여 제공함으로써, 개발자가 비즈니스 로직 구현에 집중할 수 있도록 돕는다.
이를 통해 Next.js는 현대 웹 개발에서 SSR과 CSR의 장점을 결합하여 효율적이고 최적화된 개발 환경을 제공한다.
참고 자료
- https://www.youtube.com/watch?v=EwY6hbAxdV8
- https://velog.io/@aksen5240/Next.js의-등장-배경
- https://ko-de-dev-green.tistory.com/88
- https://cathodicpro.tistory.com/entry/Nextjs의-등장-배경과-필요성-프론트엔드-개발의-진화