next.js를 사용하는것의 의미

안녕하세요, 저도 아직 경험이 많지 않은 주니어 개발자이지만, 조금이라도 도움이 될 수 있을까 싶어 답변 남겨드립니다. 우선 리액트는 기본적으로 CSR 렌더링으로 화면을 구성합니다. 이러한 CSR 렌더링은 초기 렌더링 이후, 빠르게 화면 전환을 통해 컨텐츠를 제공하며 사용자 경험에 도움을 주고 있습니다. 빌드 파일에 index.html을 살펴보시면 껍데기만 있는 정적 html 파일과 번들 파일을 연결하여 자바스크립트 동작으로 화면을 구성합니다. 초기 렌더링에 사용자는 필요한 리소스를 모두 다운로드 받기 전까지는 빈 화면을 바라보게 된다는 단점이 있습니다. 따라서 SEO 검색 엔진 최적화에 적합하지 않을 수 있습니다. 이러한 문제는 SSR을 통해 서버에서 미리 화면을 그려낸 html을 제공하여 SEO 문제를 해결하고 초기 렌더링 문제를 해결할 수 있습니다. 리액트에서도 SSR을 충분히 구현할 수 있지만, 구현을 위한 설정 작업이 많고 복잡하기도 합니다. 위에서 말씀 드린 여러가지 문제들을 해결하기 위해 리액트 프레임워크인 Next.js 를 개발하게 되면서 SSR 렌더링 환경도 쉽게 구성할 수 있게 되었습니다. SSR 뿐만 아니라 CSR, SSR, SSG, ISR 등 다양한 렌더링 방식도 구성할 수 있기 때문에 필요한 렌더링 방식을 선택하여 화면을 구성할 수 있게 되었습니다. Next.js는 next/image, api router 등등 .. 강력한 기능도 많아 화면 개발에 있어 많은 도움을 얻을 수 있습니다. 이렇듯, 많은 장점을 가지고 있는 프레임워크라 필요에 따라 많은 기업이 쓰기도 합니다. 중요한 건 리액트와 Next.js에 대한 차이점을 이해하고, 개발하고자 하는 사이트의 특징을 잘 파악하여 기술을 선택해야 합니다. 예를 들어, SEO 최적화가 필요 없는 사이트의 경우 리액트를 선택하고 회사 홈페이지와 같이 SEO 최적화가 중요한 사이트는 Next.js를 선택할 수도 있을 거 같습니다. Next.js ISR ( Incremental Static Regeneration ) 렌더링과 같이 빌드 타임에 정적 파일을 생성하여 컨텐츠를 미리 생성한 화면을 제공하고 일정 시간마다 새롭게 빌드하여 새로운 데이터를 반영한 정적 파일을 제공하는 기능을 통해 데이터 변화가 많지 않은 블로그와 같은 사이트에도 활용할 수 있습니다. 저도 답변드리면서 헷갈리는 부분도 있었지만, 조금이라도 도움이 되었다면 좋겠습니다. 앞으로의 개발을 응원합니다!

1) nextjs를 쓰면 백엔드 서버를 만들 필요 없는건가요? 네, 이론상 필요 없습니다. react나 vue는 화면단을 사용자에게 넘겨주는 서버만 필요합니다. 그러나 nextjs는 우리가 알고 있는 백엔드로써의 역할이 가능하고, 이러한 서버가 내장되어 있습니다. --------------------------- 2) 클라단만 신경쓰면 될듯한데 왜 프론트를 풀스택 프레임워크를 쓰나요? 이래서 일부 개발자들은 결국 nextjs는 과거 개발형태의 회귀라고 합니다. 그런데 자세히 보면 결국 CSR과 SSR의 양쪽 이득을 다 보려고 이 프레임워크를 쓰는겁니다. react 이전에는 모든 웹페이지가 SSR이었고 react 이후에는 CSR의 형태가 주류를 이루었고 nextjs나 remix는 SSR+CSR을 가지고 있는 형태로 이해하셔야 합니다. 이게 무슨 의미가 있나요?라면 대표적으로 SEO로 꼽습니다. 이론은 직접 찾아보시길 권장하고, CSR로만 만들면 검색 엔진들이 내가 만든 페이지가 있는지 없는지를 잘 몰라서 상위 검색어 오르는게 힘들다. 라고 이해하시면됩니다. 그래서 노출이 핵심인 웹 어플리케이션은 SSR의 중요도가 높아질 수 밖에 없습니다. SSR이 필요한데 react나 vue만 써서 SSR 가능하게 개발해보시면 이게 얼마나 그지 같은지 바로 체감옵니다. 실제로 react나 vue만으로는 SSR 개발 불가능합니다. 말 그대로 서버 사이드 렌더링이라 브라우저가 react 코드 받아서 렌더링 하던짓을 서버한테 시켜야 합니다. 이짓이 순수 SSR로 짜는것보다 3배 4배 어렵습니다. 이게 정형화 된 방법도 없고, 방법이 너무 복잡하다보니 순수 react로 SSR 구현하는 인강은 존재하지도 않습니다. 그런데 이게 프레임워크로 나와버리니까 이전과 비교도 안될 정도로 쉽게 react나 vue로 SSR이 되는겁니다. --------------------------- 3) SSR, 그게 그렇게 중요하면 SSR 가능한 예전 기술로 아예 만들면 되지 않나요? 예. 됩니다. 그런데 지금 우리 나라 공공사이트 한번 가보시면 느낌 팍 옵니다. 홈택스, 국민건강보험 등등... 사용감이 Next.js로 개발된 사이트 가보시면 체감이 될 정도로 다릅니다. 결론적으로 SSR이 주류였던 과거 웹개발에서 CSR로 사용자의 사용감을 끌어올렸고 CSR만으로는 포기해야할 것들이 있었는데 Next.js 쓰니 이전보다 쉽게 이게 해결이 되고 SSR+CSR을 쓸 수 있더라 로 해석하시면 됩니다. 그런데 Next.js를 백엔드로 쓰기에는 java나 .net 기타 백엔드 프레임워크에 비해서 지원하는 기능들이 성에 안찰 수준입니다. 그래서 Next.js로는 프론트개발만 하는 것이지요. 즉, 팀에서 허용한다면 간단한 백엔드 기능들은 Next.js에서 추가하셔도 무방하다는 생각입니다.

클라이언트 그리고 서버 진영에서 발달해 온 프레임워크들은 각각 특화된 부분이 매우 다릅니다. (이 부분은 저도 그저 아티클 등으로 접했을 뿐 잘 아는 부분은 아닙니다.) 넥스트의 역할을 다루기 앞서 짚고 넘어가야 할 사실이 이미 풀스택을 지원하는 프레임워크들은 이전부터 있어왔습니다. 전통의 php+라라벨이 그러하고, 가장 지배적인 백엔드 프레임워크로 알려진 스프링조차도 풀스택을 지원한다고 합니다. 빠른 시장 검증을 위한 mvp개발엔 넥스트 만으로 웹 서비스를 만드는 게 매우 효율적일 수도 있습니다. 하지만 서버 진영에서 전통적으로 잘 처리해온 것들(대규모 트래픽 처리, 동시성 제어 등)은 당연히 넥스트보단 다른 백엔드 프레임워크들을 이용하면 더 잘 다룰 수 있겠죠. 넥스트로 모든 백엔드의 역할을 대체하기는 어렵습니다. 한편 넥스트의 의의가 단순히 풀스택 프레임워크에 국한되지는 않습니다. 파일 기반 라우팅 및 api 라우팅, 미들웨어 등 유용한 기능들이 많이 있죠. 당연히 csr, ssg, ssr 등을 상황에 맞게 취사 선택해서 사용할 수 있다는 것도 매우 큰 장점입니다. 프로그래밍 영역이 으레 그렇듯 어느 때나 정답인 실버불릿은 없고 상황에 맞게 적절한 도구를 사용하면 됩니다. 각자 장단점이 있고 트레이드오프가 있습니다. 추가적으로 웹 및 웹 프레임워크들의 발전사 등을 찾아서 공부해보시면 지금 갖는 의문들을 해결하는데 도움이 될 거 같습니다!

많은 분들이 좋은 답변 달아주셨는데 추가로 답변을 드립니다. Next.js가 풀스택 프레임워크는 맞지만 백엔드는 '서버리스'로 동작하게 됩니다. 서버리스 동작 방식 자체가 요청이 들어오면 함수를 새로 돌리는 형태라서 기존의 자바나 노드 등으로 구현한 서버보다 시간이 약간 오래걸린다고 알고 있습니다. 소규모의 프로젝트에선 Next.js로 풀스택 구현하는 것은 괜찮을 수 있어도 트래픽이 증가하고 대규모 프로젝트가 되는 순간 한계가 있지 않을까란 생각입니다.