Next.js는 왜 사용할까? SSR을 위해?

Nextjs관련해서 다른 개발자의 블로그를 살펴보던 중 "Nextjs를 왜 사용하나요?" 라는 질문에 "주로 SSR을 사용하려고 Next.js를 사용합니다." 라는 답변을 합니다. 저 또한 최근 면접에서 같은 질문을 받았는데 정말로 같은 답변을 했었습니다. 

 

하지만 최근 개발바닥이라는 유튜브를 보면서 다른분들의 이력서를 보던 중 프론트엔드 개발자의 이력서를 보게 되었는데 해당 블로그에 "Next.js가 무엇이고 왜 뜨는걸까?" 라는 블로그 게시글이 있었습니다. 

해당 블로그 또한 글의 대부분은 Next.js의 SSR기반으로 설명이 되어있었는데 이 글을 보고 개발바닥 유튜브를 운영하시는 분들 께서

"Next가 SSR, CSR 관점에서는 아예 아니다, 이러면 Next를 아예 잘 모르는 것이나 마찬가지다." 

라는 이야기를 남겼다. Next가 갖고 있는 기능 중에 하나가 SSR을 쉽게 만들어 주는 것 일 뿐이지 실제 면접에서 신입 프론트엔드 개발자가 Next.js를 활용해서 어떠한 프로젝트를 만들었다면 면접관은 당연히 Next에 대해서 어느정도 이해하고 있는지 물어볼 것인데, 이런 이해도 관점에서 SSR관점으로만 설명을 하면 Next를 모르는 것이나 마찬가지 인 것이다. (그래서 내가 떨어졌나보다 ㅠ.ㅠ)

 

Next.js란 무엇인가?

그렇다면 Next.js는 무엇인가에 대해서는 공식 문서를 살펴보면 정답이 있다. 공식 문서를 살펴보면 The React Framework for the Web 이라고 설명이 되어있다. Next.js가 단순히 SSR을 제공하는 프레임워크가 아니라, React를 이용해서 웹 애플리케이션을 만들기 위한 프레임 워크임을 나타내고 있다.

그러면 그냥 React를 쓰는거랑 별차이 없는거 아니야?

React는 무엇인가?

React 홈페이지에선 A Javascript libaray for building user interfaces 라고 설명되어있다. 

React는 UI를 구축하기 위한 자바스크립트 라이브러리 라는 것이다. 해당 의미는 React 자체는 UI 컴포넌트 작성에 중점을 두며, 라우팅, 데이터 패칭, 빌드 설정 등 애플케이션 개발에 필요한 다른 부분들은 포함하지 않습니다.

React의 빠른 발전과 호환성 문제

React는 새로운 기능과 성능 최적화, 개발자 경험 개선을 위해 지속적으로 업데이트를 하는데 예를들어 React 16버전의 hook도입과 같이 클래스형에서 함수형으로 좀더 간단하고 성능또한 빠르게 개선되는 업데이트를 지속적으로 해오고 있습니다.

업데이트를 지속적으로 하면 개발자 입장에서 좋은거 아니야?

어떠한 경우에선 좋다고 이야기 할 수 있지만 서드파티 라이브러리 호환성 문제는 React 생태계에서 개발자들이 자주 겪는 어려움 중 하나입니다. 기존에 React와 함께 사용되는 많은 서드파티 라이브러리들이 이 발전 속도를 따라가지 못할 때가 있습니다.

작성자 또한 예전에 인턴십 생활때 React 18.2버전을 사용하고 있었는데 글 작성 관련 개발이 필요하여 WYSIWYG 관련 라이브러리를 찾아보다 Toast UI라는 라이브러리가 적합해보여 적용을 시키려고 했지만  Toast UI가 지원하는 리액트 버전이 17버전이라서 사용을 할 수 없었던 경험이 있었고 또한 라이브러리에서 타입을 지원하지 않는 경우도 있었습니다.

서드파티 라이브러리의 호환성 문제

1. React와 함께 사용되는 많은 서드파티 라이브러리들은 React의 특정 버전에 의존하는 경우가 많다.
2. React가 업데이트될 때, 서드파티 라이브러리들이 이를 빠르게 따라잡지 못하면 호환성 문제가 발생할 수 있다.

이러한 이유 때문에 최신 React 기능을 사용하고 싶어도 라이브러리의 호환성 문제로 인해 업데이트를 미루게 되는 경우가 있습니다.

Next.js의 역할

Next는 위에서 말했던 React의 생태계의 문제점을 해결하기 위해서 필요한 나머지 부분들을 다 채워주는 프레임워크를 제시했습니다.

Next는 다음과 같은 주요 기능을 제공합니다.

• User Interface : React를 사용하여 UI를 구축합니다.
• Routing : 이전 버전에서는 페이지 기반 라우팅을 제공하고 있고, 현재 13,14버전부터는 app 기반 라우팅을 제공함으로써 복잡한 라우팅 설정을 간편하게 만듭니다.
• Data Fetching : 서버 측 데이터 패칭, 클라이언트 측 데이터 패칭 등 다양한 패칭 방법을 지원합니다.
• Rendering : SSR, SSG, CSR 등 다양한 렌더링 방식을 제공합니다.
• Integrations : GraphQL, REST API 등과의 통합을 쉽게 할 수 있습니다.
• Infrastructure : 성능 최적화를 위한 다양한 도구와 설정을 제공합니다.
• Scalability : 대규모 애플리케이션에서도 효율적으로 동작하도록 설계되었습니다.
• Developer Experience : 개발자 경험을 극대화 하는 다양한 기능들을 제공합니다.

SSR과 Next.js의 역할

SSR은 Next.js가 제공하는 많은 기능들 중에 Rendering의 한 파트로 포함되어 있을 뿐입니다. Next.js는 다양한 렌더링 옵션을 제공하여 애플리케이션의 요구사항에 맞게 선택할 수 있게 합니다. SSR외에도 정적 사이트 생성인 SSG 와 CSR 등을 지원하면서 유연한 개발이 가능합니다.

 

결론

Next.js는 이러한 React 생태계의 문제점들을 해결하기 위해 탄생한 프레임워크로, React 애플리케이션을 쉽고 효율적으로 개발할 수 있게 해줍니다. 따라서 특별한 이유가 없다면 React 애플리케이션을 개발할 때 Next.js를 사용하는 것이 좋아보입니다. 이러면 기존에 겪었던 라이브러리 조합 및 버전 문제, 해당 라이브러리의 에러 해결 등에서 많은 불편함을 해결해줄 것입니다.

 

또한 이젠 면접에서 "Next.js를 왜 사용했나요?" 라는 질문에 대한 답변으로는, "SSR을 사용하려고" 라는 답변보다는 "Next.js는 이러한 생태계의 문제점들을 해결하고, 다양한 렌더링 옵션과 더불어 개발에 필요한 포괄적인 기능들을 제공하기 때문에 사용했었다." 고 답변하는 것이 면접관 입장에서 "이 사람이 Next에 대해서 모르진 않는구나" 라고 생각하여 깊은 인상을 줄 수 있을 것이라고 생각합니다.

 

 

참고문서

https://nextjs.org/docs