신입이지만 스타트업이라서, 어쩌다보니 제가 프론트를 리드하게 됐습니다. 웹을 만들어야 하는데 react와 nextjs 중에 고민이 됩니다.

react 개발 경험은 있는데, nextjs는 처음이라서요.  어떤 걸 추천하시나요?

안녕하세요.

단순 React (Single Page Application)과 Next.js와 같은 정적 사이트 생성기 혹은 서버 사이드 렌더링에 도움을 주는 프레임워크의 차이점과 장단점을 알고나면 어떤 걸 선택해야 하는지 대충 감이 올 것 같아요.

단순 React (Single Page Application)은 하나의 페이지에서 모든 데이터를 주고 받아요. 사실 페이지 이동처럼 보이게 하는 것도 react-router-dom과 같은 대표적인 라우팅 라이브러리로 사실은 페이지 이동이 아니라 URL이 변경될 때 보여주는 컴포넌트가 달라지는 것 뿐이죠. 실제로 페이지가 이동되어서 다시 html과 javascript를 받아오는 건 아니에요.
그래서 단순 React와 같은 SPA에서는 맨 처음에 유저가 홈페이지에 들어와서 html을 받아오고 나서 css와 javascript(react)를 불러와서 앱을 실행시키면 그 이후에는 우리가 React안에서 작성해놓은 코드로 앱이 동작하게 돼요.

반면에 Next.js와 같은 정적 페이지 생성 프레임워크들은 미리 페이지를 생성해놔요. (HTML을 여러 개 생성해놔요) 그리고 유저가 홈페이지에 들어왔을 때 해당하는 URL의 HTML를 전달해줄뿐이죠. (모든 동작이 다 같다는건 아니에요. SSR, SSG에 따라서 조금 다르긴한데 이건 요기서 다루지 않을게요.)

그래서 React와 같은 SPA에서는 웹 페이지를 불러오고 나서 데이터를 주고 받을 일이 많을 때 조금 더 유리해요. Next.js와 같은 프레임워크는 HTML을 미리 생성해놓는데, HTML을 불러오고 나서 HTML이 많이 바뀔거라면 굳이 미리 생성해놓을 필요가 없는거죠. 그래서 어드민 페이지(단순 텍스트보다 주고 받는 데이터가 훨씬 많음) 혹은 한 페이지에서 모든 일을 처리하는 앱과 같은 경우는 굳이 Next.js와 같은 프레임워크를 사용할 필요가 없을 것 같네요.

반대로 HTML을 많이 생성해놓으면 유리한 앱들이 있어요. 예를들면 블로그나 공식문서와 같은 페이지들은 데이터가 자주 변할 일이 없어요. 거의 같은 HTML을 생성할거라면 굳이 유저가 웹페이지에 들어와서 HTML을 요청할 때 만들어주는게 아니라 미리 다 만들어놓고 만들어놓은 HTML을 단순히 전달해주면 되는거죠.

그리고 Next.js에서는 JavaScript는 실행하지 않는 검색엔진 로봇들에게는(구글봇은 이제는 Javascript도 실행한다고 하지만) HTML이 생성이 되어있어야 해당 HTML을 읽어서 검색엔진에 노출을 시켜주기도해요(SEO). 검색엔진에 노출되지 않아도 되는 앱들도 있어요. 예를들면 회사 내부에서만 쓰이는 웹사이트라던가, 어드민 페이지 같이 내부에서 쓰이는 페이지는 굳이 SEO를 신경쓰지 않아도 되겠죠.

또한 여러가지 프레임워크가 제공해주는 편의성 기능들이 있기도해요. 해당 기능들은 공식문서 ( https://nextjs.org/ )에 가면 조금 더 자세히 알 수 있으니 참고하시면 될 것 같아요.

결론

1. 데이터 교환이 많은 앱인가? (Yes: React, No: Next)
2. 검색엔진노출이 중요한 앱인가? (Yes: Next, No: React)
3. 또한 프레임워크가 제공해주는 여러 기능들이 마음에 들고 공감하는가? => 그럼 사용

위의 것들을 잘 고려하시고, 공식문서도 참고하셔서 잘 저울질 하셔서 선택하시면 될 것 같아요~ 감사합니다!

당근마켓 프론트엔드 개발자

정현수

당근마켓 디자인시스템팀에서 이것저것 개발하고 있어요!

nextjs에 대해서 좀더 알아보시면. 비단 ssr 용도로 사용되기에 이것을 쓴다 이것말고도 사용할이유가 엄청납니다
React 로 직접 환경을 구성한다고 해도 nextjs 에서 제공하는것만큼 깔끔하게 나오기 쉽지 않아요.. 게다가 스태틱빌드같은경우도 제공하고 하이드레이션을 할수있다거나 등등 🤣

디지털그지

kevin

next의 file-based routing도 정말 편한 기능이라고 생각합니다. react에서 routing 코드를 손수 짜다보면 프로젝트가 커질때마다 꽤나 복잡하더라구요.

코멘토 프론트엔드 개발

송동훈

seo가 중요하지 않은 웹서비스 만들 때 react랑 nextjs 중에 뭘 더 추천하시나요?

안녕하세요!!
token, refresh token 에 대한 global 상태관리를 해야 합니다. 이정도 규모의 상태관리는 어떤 기능을 활용하는게 적당할까요 ?
- redux (사용해본 경험이 있어서 편하긴 한데.. 고민이 됩니다)
- recoil

React 에서 token, refresh-token 을 전역 상태로 관리하려고 하는데 어떻게 구현하는게 좋을까요 ?

아래 코드와 같이 타입이 정의가 되어있는데
key={cancelActionPayload.action}
의 action에 빨간줄 쳐지고
'Property 'action' does not exist on type'
이라 에러가 뜨는데 제 생각에는 action 필드가 분명 있는 것 같은데 뭘 잘못 생각했을까요?ㅜㅜ

이미 정의된 타입에 'Property xxx does not exist on type' 오류가 발생해요

react에서는 route 파일에서 일괄적으로 처리하면 되는데 next.js는 페이지 별로 route가 처리되니까 어떻게 처리하고 계신지 궁금하네요

제가 생각한 방식은 _app.tsx 파일에서 일괄 처리해준다인데 추천할만한 다른 방법이 있을까요?

nextjs에서 페이지 별로 user redirect를 해주려면 어떻게 하나요?

데이터 교환이 많고 검색엔진 노출에 중요하지 않아서 React로 시작해야겠어요. 정성스러운 답변 감사합니다!