Nextjs 왜 쓸까?

한번 쯤 가져볼만한 생각이고 실제로 많은 프론트엔드 개발자들 사이에서 왈가왈부 되는 주제인 것 같다.

공식문서에서 추천하고 있다.

리액트 공식문서에서 새로운 프로젝트를 시작하면 Nextjs의 사용을 추천하고 있다. (https://react.dev/learn/creating-a-react-app)

일단 공식문서 내용을 살펴보자! 하단에 영어로 적혀있는 내용은 공식문서에 기재된 내용이다.

If you want to build a new app or website with React, we recommend starting with a framework.
-> 새로운 앱이나 웹사이트를 React로 만들고 싶다면 프레임워크로 시작하는 것을 추천한다.

대놓고 추천한다는건 앞으로 트렌드가 Nextjs로 흘러갈 가능성이 높다고 나는 생각한다. 이 점은 굉장히 중요하다. 모든 기술은 레퍼런스, 앞으로 기술의 사양 가능성을 생각하면 이렇게 공식문서의 추천을 따라가는게 여러모로 좋다.

If your app has constraints not well-served by existing frameworks, you prefer to build your own framework, or you just want to learn the basics of a React app, you can build a. React. app from scratch.
-> 만약 당신의 앱이 기존 프레임워크로 잘 해결되지 않는 제약이 있거나, 당신은 당신만의 프레임워크를 구축하는 것을 선호하거나, 단지 React 앱의 기본을 배우고 싶다면, React 앱을 처음부터 구축할 수 있다.

프레임워크 구축해보고싶다. 리액트의 기본을 배우고싶다. 프레임워크로 해결되지 않는 어떤 제약이 있는 프로젝트가 있다.
이런경우에는 Nextjs 사용하지 않아도 된다고 하는데 ... 이 말은 즉슨, 특별하지 않은 상황이면 Nextjs 를 쓰라고 권장하는 말로 해석된다.
동시에 위와 같은 특별한상황에서는 create vite@latest my-app -- --template react 를 이용해서 리액트를 시작하라고 한다.

Full-stack frameworks do not require a server.

여기서 말하는 Full-stack frameworks 에는 Nextjs 도 포함이다. 여기서 중요한 사항 Nextjs는 서버가 필요없다. 이 말은 모순으로 들릴 수 있다. 왜냐하면 서버사이드 렌더링이 필요하다고 알고 있기 때문이다. 이 의문은 다음 문장에서 해소된다.

All the frameworks on this page support client-side rendering (CSR), single-page apps (SPA), and static-site generation (SSG). These apps can be deployed to a CDN or static hosting service without a server.

Nextjs는 CSR, SPA, SSG를 지원하고 서버 없이 CDN이나 정적 호스팅 서비스에 배포할 수 있다. -> SSG를 사용하면 빌드시점에 HTML을 생성하여 CDN에 배포할 수 있기 때문에 서버가 필요없다는 말이다. 즉 SSG를 사용하면 서버가 필요없다는 말인데 이말은 SSG를 사용하지 않고 SSR이나 ISR을 사용하면 서버가 필요하다는 말이 된다.

Additionally, these frameworks allow you to add server-side rendering on a per-route basis, when it makes sense for your use case.

서버사이드 렌더링이 필요할때는 라우트 단위로 서버사이드 렌더링을 할 수 있다는 이야기이다.

This allows you to start with a client-only app, and if your needs change later, you can opt-in to using server features on individual routes without rewriting your app. See your framework’s documentation for configuring the rendering strategy.

랜더링 전략에 따라 유동적으로 서버사이드 렌더링을 사용할 수도 안할수도 있다는 이야기다. 즉, Nextjs는 SSG를 사용하여 서버가 필요없는 앱을 만들 수 있고, 필요에 따라 SSR을 사용할 수 있는 유연성을 제공한다는 것이다.

나의 의견

나는 현재 회사에서 Nextjs를 이용하여 프로젝트를 진행하고 있는데 내 경험상 Nextjs를 사용하는 건 나쁘지 않은 선택인 것 같다.

왜냐하면 폰트 최적화, 이미지 최적화, 페이지별 코드 스플릿팅, 여러가지 내장 Hook, middleware, 라우팅 등 리액트 기반 필요한 여러가지 기능들을 한번에 제공해주기 때문에 개발 생산성이 올라간다.

보통 Nextjs를 안쓰는 이유 중 하나가 서버가 필요하다고 말하는 분들이 있는데 SSG를 사용하면 이 문제도 해결된다. 그리고 렌더링 전략이 바뀌면 SSR로 전환도 가능하다. 즉 유연하게 대처할 수 있다.

결론

• Nextjs는 공식문서에서 새로운 프로젝트를 시작할 때 추천하는 프레임워크이다. -> Nextjs는 앞으로 트렌드가 될 가능성이 높다.
• Nextjs는 SSG를 사용하여 서버가 필요없는 앱을 만들 수 있고, 필요에 따라 SSR을 사용할 수 있는 유연성을 제공한다. (처음에 나는 무조건 별도의 프론트 서버가 필요한 줄 알았는데 오해였다.)
• Nextjs는 리액트 기반의 여러가지 기능들을 한번에 제공해주기 때문에 개발 생산성이 올라간다. (대신 숙련도가 필요하다.)
• 특별한 상황이 아니라면 Nextjs를 사용하는게 여러모로 좋아보인다.

물론 이 모든 결론은 Vercel에서 Nextjs를 버그없이 잘 만든다는 걸 가정하고 내린 결론이다.
개인적으로 공부한게 아까워서라도 제발 잘 만들어서 트렌드로 완전히 굳혔으면 좋겠다!