[React] Next.js VS Vite VS CRA

사실 CRA는 꼽사리임. 안쓰게 됨.

 

오늘은 React App을 생성하고 사용하는 세가지의 세계관을 이야기하려고 하는데, 뭐 정확히 어떤 용어를 써야할지 모르겠어서 난 세계관이라고 부른다. React App을 생성하는 방법은 다양하다. 뭐 지금 내가 언급할 이 세가지를 제외하고 더 있을 수도 있음. 근데 주로 이 세가지를 사용하게 된다. 

 

1. 기본 소개

첫번째는 CRA (Create React App) 이다. 전통적으로, 가장 기본적으로 React를 시작할 때 사용하게 되는데 진짜 우리가 알고 있는 가장 기본적인 Webpack이라는 번들러랑 Babel이라는 컴파일러등 으로 세팅되어있는 React App을 세팅해준다. React 자체가 SPA, CSR을 목적으로 나왔던 프레임워크이기 때문에 기본적으로 SPA, CSR에 큰 비중을 두고 있다.

 

두번째는 Vite다. 이건 이제 vue를 위해서 나왔던 번들러긴 한데(실제로 vue는 얘 쓰는걸 권장함.) , React도 사용할 수 있다. 내가 주로 사용하는게 얘임. SPA, CSR이 성숙해져가면서 빌드 속도나 간편한 번들 최적화 등의 요구사항이 생겨나고 이런 흐름에 발 맞춰서 많이 사용되고 있다. (애초에 얘가 esbuild를 사용한 빌드 속도를 자랑거리로 들고 나왔음.) 당연히 이런 이유로 SPA, CSR에 큰 비중을 두고 있다. 뭐 최근에 공식문서 안에 SSR 이런거도 있긴 하던데, 자세히 안읽어봐서 이게 진짜 Next와 같은 SSR을 제공하는지 ISR을 할 수 있는지 이건 모르겠음. (사실 ISR 써야할땐 레퍼런스 많은 Next를 쓰는게 정배라서 Next 쓰긴함.)

 

세번째는 Next.js 다. 출시때 부터 React App을 이 놈 하나로 한 큐에 끝낼 수 있다. 라는 너낌으로 Vercel이 내놓은 프레임워크임. 살짝 Front 계의 Spring을 지향하는 느낌이 없잖아 있다. 자신들만의 생태계 구축이 확실하게 되어있고, 개발자 입장에서 정말 손 많이 안대고 React App 개발을 할 수 있게끔 많은 기능을 제공한다. 확실히 어려운 내용 공부할 거 없이 Next 공부하면 React App 하나 뚝딱 만들게끔 해줌. 근데 최근에 Next14 발표 때 예전 PHP랑 유사한 행보를 보여서 쎄한 느낌을 지울 수가 없음. 

 

 

2. 본론

이 내용을 쓰는 이유는 사실 용도 분간 못하고 막 쓰는 경우가 생기니 그러지 말자고 쓰는건데, 예를 들면 이런거다. React는 애초에 SPA, CSR을 얘기하면서 나온 프레임워크다. 기존의 Application이 데이터도 만져 화면도 그려 이것저것 할 일이 너무 많으니까 클라이언트도 좀 도와봐라. 화면 그리는거 정도는 클라이언트가 하면 되지 않겠냐 이런 방향성임. SPA, CSR, SSR 이런 개념은 이전 글을 보자.

2023.06.02 - [Dev/envSet] - [FrameWork] Next.js를 시작하기 전에 (SSR은 무엇인가?)

[FrameWork] Next.js를 시작하기 전에 (SSR은 무엇인가?)

 

하여튼 이 SPA, CSR이라는게 React의 방향성이었는데, 왜 Next는 SSR을 할까? 바로 SEO때문이다. Search Engine Optimization 이라고 검색 엔진 최적화라는 뜻임. 이게 뭐냐면 이제 우리가 알고 있는 유명한 검색엔진들(Google, Naver 등)은 크롤링 봇을 통해서 이제 웹사이트들의 정보를 수집을 하게 되는데, 이 수집을 통해 포털사이트에서 노출이 많이 되는 효과를 누릴 수가 있다. 

근데 이걸 하려고 하니 이게 서버로부터 HTML을 최초에 받아온 직후에 HTML이 텅비어있는 SPA의 경우에는 이 효과를 누릴 수가 없는거다. 그러니 React로 개발된 Web App들이 죄다 사실상 크롤링봇들에게 있어선 빈 페이지로 보인다는거임. 이걸 해결하는 방법이 이미 화면(HTML)이 그려진 채로 클라이언트에게 전달 되는 SSR이었는데, 이걸 React는 그대로 사용하면서 해낼 수 있게 만든게 Next.js라는 프레임워크인거다. 

 

하여튼 퍼블릭하고, 검색엔진에 노출이 많이 되면서 소비자들을 끌어모아야하는 웹사이트들의 경우엔 이 SEO가 필요해졌기 때문에 Next사용이 불가피해졌다고 보면 되겠다. 

 

그렇다면, 이렇게 이해할 수도 있다. 사내에서 사내시스템류인 private 한 웹페이지를 개발하는데에는 굳이 Next를 사용할 필요가 없다는거다. 개발 생산성나 뭐 서버에서 렌더링하는 걸 통해 렌더링 속도를 향상시키는 의도에서는 의미가 있을 수 있겠지만 뭐 그냥 진짜 꼭 필요해! 가 아니라 선택지 중 하나가 되어버린다는 거임.

 

 

3. 결론

사실 대단한 얘기는 없고, 걍 이렇다 그러니 이렇게 쓰자를 얘기하려고 한 글이긴함. 

내가 SSR, SEO가 꼭 필요하다. 그럼 Next를 쓰자. 아니면 뭐 React 안쓰겠다 그러면 그냥 Spring Web App 만드는거도 아주 괜찮다고 생각한다. 

저런거 굳이 필요없다. 하면 Vite쓰자 이런거임. 내가 이거 씁시다 라고 얘기하는데 근거 딱딱 얘기하면서 이래서 써야해요 라고 할 수 있으면 간지나지 않는가? 그게 개발자의 멋이다.