인프런 커뮤니티 질문&답변
작성한 질문수
Next.js vs React.js
해결된 질문
작성
·
88
·
수정됨
0
강사님, 안녕하세요.
강의를 들으면서 살짝 혼란스러운 부분이 있습니다.
사실 Next.js 도 바탕은 React 인데요.
React 에서 제일 많이 언급되고 중요시되는 부분은 상태(state)관리라고 생각이 되는데
Next.js 로 SSR 위주의 페이지를 작성하게 되면 결국 상태관리는 최소화하게 되는 것인데
이게 React 의 컨셉과 맞는 것인지 살짝 이해가 되지 않습니다.
(강의에서도 state 는 거의 언급이 되지 않고요)
그렇다고 상태관리를 최대한 활용하는 CSR 위주의 개발을 하게 되면 Next.js 의 장점을 거의 얻지 못하게 될 것 같기도 하고요.
저는 Next.js 가 제공하는 프레임워크 측면의 혜택을 얻고자 Next.js 로 어플리케이션 구축을 해보고 싶은데 해당 어플리케이션이 CSR 의 비중이 적지 않을 것 같아서 좀 망설여지는 부분이 있습니다.
현대 애플리케이션들은 사용자들과의 상호작용이 적을 수가 없을텐데 대다수의 앱들이 Next.js 의 SSR 위주의 개발로 충분히 커버가 가능한 것일까요?
답변 2
0
안녕하세요 아리마님 이정환입니다. 좋은 질문 감사합니다 🙇♂
우선 우리 강의의 실습 프로젝트는 최대한 Next.js에서 제공하는 기능들만을 위주로 사용하도록 제작 되었기에 실제 프로덕트와는 다소 거리가 있다는 점을 먼저 말씀드려야 할 것 같습니다. 실제 유저들이 사용할 프로덕트에서는 말씀하신 것 처럼 서버사이드측의 기능 만으로는 해결하기 어려운 문제들이 많습니다. 따라서 결국 Next.js에서 제공하는 다양한 서버사이드 측의 기능들과 React.js 및 기타 라이브러리들에서 제공하는 CSR 측의 기능들을 조화롭게 잘 사용하는 것이 궁극적으로 우리가 지향해야 할 부분이라고 생각합니다.
또 Next.js의 기능들이 React.js의 상태관리 기능을 모두 대체하도록 제작되어 있지는 않다고 생각합니다. Next.js의 대부분의 기능들은 초기 로드시에 서버사이드에서 최대한 많은 기초작업들을 수행하도록 함으로써 CSR의 부담을 오히려 줄여 준다고 생각해요 따라서 Next.js의 장점을 최대한 활용하면서도 CSR과 상태관리를 충분히 사용할 수 있습니다. 서버사이드에서 1차적으로 처리된 데이터를 CSR 환경에서 상태관리 도구를 이용해 충분히 핸들링 할 수 있다고 봅니다.
"상태관리를 최소화 한다는 것이 React.js의 취지에 올바른 것이냐?" 라는 질문에는 사람마다 의견이 엇갈릴 수 있을 것 같습니다만 저는 틀리지는 않았다고 생각합니다. 올바른 것인지 까지는 모르겠어요 ㅎㅎ..!
모든것을 상태로 관리해 복잡성을 늘리는 것 보단 정말 필요한 부분만 상태로 관리하여 코드의 복잡성을 줄이는 방향이 좀 더 옳다고 생각합니다. 이를 뒷받침 하듯이 React.js Only 프로젝트에서도 모든 데이터를 상태로 관리하기보다는 쿼리스트링이나 URL 파라미터를 사용하기도 하고 또는 브라우저의 스토리지를 활용하기도 한다고 알고 있습니다 😃
0
안녕하세요, 인프런 AI 인턴입니다. 아리마님.
Next.js와 React의 사용에 대한 질문을 주셨네요. 두 라이브러리의 특성과 상황별로 적절히 사용하는 방법에 대해 몇 가지 정보를 제공해 드릴게요.
Next.js와 React의 차이
React.js: 클라이언트 측에서 UI를 구축하기 위해 사용되는 라이브러리로, 주로 CSR(Client-Side Rendering)을 염두에 두고 설계되었습니다. 상태 관리를 통해 동적이고 반응적인 UI를 개발할 수 있으며, 다양한 상태 관리 라이브러리(Redux, Zustand 등)를 지원합니다.
Next.js: React를 기반으로 서버 측 렌더링(SSR) 및 정적 사이트 생성(SSG)을 용이하게 만들기 위해 만들어진 프레임워크입니다. SEO 향상, 초기 페이지 로드 속도 개선 등의 목적으로 사용합니다.
상태 관리를 최소화하는 이유
Next.js에서 SSR을 선택할 때, 서버에서 페이지가 미리 렌더링되기 때문에 클라이언트에서의 상태 관리 필요성이 줄어듭니다. 하지만 CSR이 필요한 부분에서는 여전히 클라이언트 측에서 상태 관리가 중요할 수 있습니다. 이는 사용자와의 상호작용이 많거나, 즉각적인 UI 업데이트가 필요한 경우 특히 중요합니다.
CSR과 SSR/SSG의 혼합
현대 웹 애플리케이션에서는 CSR과 SSR을 적절히 혼합하여 사용하는 것이 일반적입니다. Next.js는 페이지 별로 CSR, SSR, SSG를 다르게 적용할 수 있는 유연성을 제공합니다. 예를 들어, 사용자와의 상호작용이 많은 페이지에서는 CSR을 사용하고, 정적 콘텐츠가 제공되는 페이지에서는 SSG를 사용하는 식으로 말이죠.
추가 리소스
유사한 주제를 다루고 있는 질문 및 답변을 참고하시면 도움이 될 것 같습니다:
이 게시물에서는 SSR과 SSG의 원칙에 대한 설명과, 언제 어느 것을 사용하는 것이 적절한지를 다루고 있습니다.
이 게시물에서는 React의 상태 관리 중요성과 Next.js 내에서의 상태 관리가 다루어집니다.
다양한 프로젝트 특성과 요구에 따라 CSR과 SSR/SSG를 병행하실 수 있으며, 이를 통해 적절한 퍼포먼스 또한 유지할 수 있을 것입니다. Next.js를 사용하여 구축할 때 애플리케이션의 전체적인 아키텍처와 목적에 맞게 각 렌더링 방식을 결합하면 더욱 최적화된 결과를 얻을 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.