React) Vite 프로젝트와 Next.js 프로젝트 차이

 

 

레퍼런스 참고중 도저히 코드가 안읽혀서 package.json을 보니 역시나 나와 다른 점이 있었다. 

난 Vite 프로젝트. 넌 Next.js 프로젝트. 차이점을 내 공부 메이트 아리에게 물어봤다.

 

---

아리답변

현재 진행 중인 Rumiware 쇼핑몰 프로젝트(Vite)와 Next.js 주요 차이점과 유사점을 비교

프로젝트 비교

1. 사용 기술

• Rumiware 쇼핑몰 프로젝트: Vite, React, TypeScript, Recoil, TailwindCSS, DaisyUI 등
• Next.js 프로젝트: React, TypeScript, Next.js (서버 사이드 렌더링, 정적 사이트 생성 등을 지원하는 프레임워크)

차이점:

• Rumiware 프로젝트는 Vite를 사용하여 빌드 시스템을 관리하고 있으며, React, TypeScript를 사용하여 SPA(Single Page Application)를 구축합니다. 반면, Next.js는 SSR(서버 사이드 렌더링), SSG(정적 사이트 생성) 등을 지원하는 전체 프레임워크입니다.
• Next.js는 자체적인 페이지 라우팅, 서버 사이드 렌더링, API 라우팅 등을 제공하므로 백엔드 API와 연결이 필요 없다면 Next.js 내에서 모든 것을 처리할 수 있습니다.

2. 페이지 라우팅

• Rumiware 쇼핑몰 프로젝트: React Router를 사용하여 페이지 라우팅을 관리.
• Next.js 프로젝트: pages/ 디렉터리에 있는 각 .tsx 파일이 자동으로 라우팅됩니다. pages/index.tsx는 /, pages/about.tsx는 /about처럼 자동으로 매핑됩니다.

차이점:

• Next.js에서는 페이지가 파일 시스템 기반 라우팅을 사용하여 자동으로 라우트를 설정하는 반면, Rumiware 프로젝트는 React Router를 사용하여 명시적으로 라우팅을 설정해야 합니다.

3. 서버 사이드 렌더링 (SSR) 및 정적 사이트 생성 (SSG)

• Rumiware 쇼핑몰 프로젝트: 클라이언트 사이드 렌더링(CSR)을 주로 사용하여 페이지 전환이 빠르고, SEO나 초기 로드 속도에서 직접적인 처리 방식은 따로 적용하지 않은 상태.
• Next.js 프로젝트: 서버 사이드 렌더링 (SSR) 및 정적 사이트 생성 (SSG) 을 기본적으로 지원하여 SEO 최적화 및 초기 로딩 속도를 대폭 개선할 수 있습니다.

차이점:

• Rumiware 프로젝트는 CSR 방식에 가깝고, Next.js는 SSR과 SSG를 통한 성능 최적화를 제공합니다. Next.js는 SEO가 중요한 애플리케이션에 유리하며, 초기 로딩 속도를 빠르게 할 수 있습니다.

4. 상태 관리

• Rumiware 쇼핑몰 프로젝트: Recoil을 사용하여 상태 관리를 진행.
• Next.js 프로젝트: 기본적으로 상태 관리 라이브러리나 방식은 정해져 있지 않지만, React의 Context API나 Redux와 같은 다른 상태 관리 라이브러리를 사용할 수 있습니다.

유사점:

• 두 프로젝트 모두 React와 TypeScript를 사용하므로, 상태 관리 라이브러리를 선택하는 방식은 비슷할 수 있습니다. 그러나, Recoil은 Next.js에서 동일하게 사용할 수 있으며, Next.js의 서버 사이드 렌더링이나 정적 페이지 생성을 할 때는 상태 관리와 관련된 부분을 다르게 처리해야 할 수 있습니다.

5. 빌드 및 배포

• Rumiware 쇼핑몰 프로젝트: Vercel을 통해 배포.
• Next.js 프로젝트: Next.js는 기본적으로 Vercel을 지원하며, Next.js 프로젝트는 next build 명령어를 통해 빌드하고, Vercel 또는 다른 클라우드 플랫폼에서 배포할 수 있습니다.

유사점:

• Next.js는 기본적으로 Vercel과의 통합을 지원하므로, Rumiware와 마찬가지로 Vercel을 이용한 배포가 가능하고, 빌드 및 배포 흐름은 매우 유사합니다.

6. 디자인 및 UI

• Rumiware 쇼핑몰 프로젝트: TailwindCSS와 DaisyUI를 사용하여 디자인 시스템과 컴포넌트 스타일링을 관리.
• Next.js 프로젝트: CSS, SASS, TailwindCSS와 같은 다양한 스타일링 옵션을 사용할 수 있습니다.

유사점:

• 둘 다 TailwindCSS를 사용할 수 있으며, UI 컴포넌트 라이브러리(예: DaisyUI)나 스타일링 시스템을 유연하게 사용할 수 있습니다.

7. API 라우팅

• Rumiware 쇼핑몰 프로젝트: 백엔드 API와 연결하여 데이터를 처리하고, API 호출을 클라이언트에서 처리하는 방식으로 운영.
• Next.js 프로젝트: Next.js는 API 라우팅 기능을 내장하고 있어, 별도의 서버 없이 pages/api/ 디렉터리 안에 API 라우트를 작성하여 서버리스 API를 구현할 수 있습니다.

차이점:

• Next.js는 내장된 API 라우팅 기능을 제공하므로, 서버리스 API를 쉽게 만들 수 있습니다. 반면, Rumiware 프로젝트는 외부 백엔드 API와 연결하여 데이터를 처리해야 합니다.

---

결론

현재 진행 중인 Rumiware 쇼핑몰 프로젝트와 Next.js는 React와 TypeScript 기반으로 유사한 점이 많지만, Next.js는 서버 사이드 렌더링, 정적 사이트 생성, API 라우팅 등을 기본적으로 지원하는 전체 프레임워크입니다. 만약 SEO나 초기 로딩 속도 최적화가 중요하다면 Next.js가 더 적합할 수 있습니다. 반면, Vite와 React Router를 사용한 현재 Rumiware 프로젝트는 더 **클라이언트 사이드 렌더링(CSR)**에 초점을 맞추고 있습니다.

 

---

우선! 현재 진행하고 있는 vite 프로젝트를 1차 MVP까지는 끝내고 추후 Next.js 프로젝트로 마이그레이션 도전을 해봐야 겠다. 취업요건에 Next.js 프로젝트 사용이 많이 보이는걸 보니 경험해보는게 좋겠다.

 

 

 

 

 

 

 

 

 

 

참고 쳇지피티