Next.js VS React.js

오늘은 리액트만 사용할 때와 비교해서 Next.js 사용하는 이유에 대해서 포스팅을 진행하려고 합니다.

 

Next.js에 대해서 먼저 알아봅시다.

---

Next.js의 공식 사이트: https://nextjs.org/

Next.js란? 
서버 사이드 렌더링, 정적 웹 페이지 생성 등 리액트 기반 웹 애플리케이션 기능들을 가능케 하는 Node.js 위에서 빌드된 오픈 소스 웹 개발 프레임워크이다.

 

라고 사전에 나와있지만, 간단히 말하면 리액트에서 기본 기능을 확장하여 안정되고 빠른 웹 어플리케이션을 개발할 수 있습니다!

 Next.js 안정화된 버전인 15.0.0이 2024년 10월 21일에 발표가 되었다는 소식도 있답니다..ㅎ 안정화된 버전이지만 아직은 두고보고 사용할 예정입니다.

 

이제 React.js와 비교해서 Next.js를 사용하는 이유를 작성하겠습니다.

---

1. 서버 사이드 렌더링(SSR)

• React.js: 클라이언트 사이드 렌더링(CSR) 방식을 사용합니다.
  • 예를 들어, 사용자가 처음 페이지에 접근할 때 브라우저에서 자바스크립트를 모두 다운로드한 후에야 화면이 보입니다. 그렇기 때문에 첫 페이지 로딩이 느려질 수 있으며, SEO(검색엔진 최적화)에 불리할 수 있습니다. 예를 들어, 구글 봇이 페이지 내용을 분석하려고 할 때 콘텐츠가 브라우저에서 렌더링되기 전이라면 빈 페이지를 읽게 됩니다.
• Next.js: 서버 사이드 렌더링(SSR) 방식을 사용합니다.
  • 서버에서 미리 HTML을 생성하여 클라이언트로 전달하기 때문에 첫 로딩 속도가 빠릅니다. 예를 들어, 뉴스 웹사이트 같은 경우, 서버에서 HTML을 렌더링해 사용자에게 즉시 보여줍니다. 또한 검색엔진이 HTML 구조를 그대로 읽을 수 있어 SEO에도 유리합니다. 구글 같은 검색엔진은 페이지의 완성된 HTML을 보고 콘텐츠를 크롤링할 수 있습니다.

CSR과 SSR, 아래 내용인 SSG은 이전 게시글에 있습니다.

2. 정적 사이트 생성(SSG)

• Next.js: 자주 변하지 않는 페이지를 미리 정적으로 생성할 수 있습니다.
  • 예를 들어, 포트폴리오 사이트나 블로그 같은 경우, 빌드 시점에 HTML로 페이지를 미리 생성해 배포하면, 서버에 요청하지 않고도 즉시 로딩이 가능합니다. 사용자가 포트폴리오 페이지를 열면 서버에 요청할 필요 없이 이미 생성된 HTML을 빠르게 제공합니다.
• React.js: 정적 사이트 생성을 기본적으로 지원하지 않습니다.
  • 예를 들어, 블로그를 만들 때 페이지 로딩 속도를 높이기 위해 Gatsby.js 같은 별도의 도구를 사용하여 설정을 해야 합니다.

Gatsby.js는 정적 페이지를 만들 때 사용하는 리액트 생성기입니다.

3. 자동 경로 설정(파일 기반 라우팅)

개발하면서 저는 이게 가장 큰 장점인 것 같습니다!

• React.js: 경로 설정 시 react-router 같은 라우팅 라이브러리를 사용해야 합니다.
  • 예를 들어, /about 페이지를 만들고 싶다면 react-router로 직접 해당 경로를 설정하고, 컴포넌트를 연결해야 합니다. 경로가 많아질수록 관리가 복잡해질 수 있습니다.

src/
  ├── components/
  │    ├── Home.js
  │    ├── About.js
  │    ├── Blog.js
  │    └── BlogPost.js
  ├── App.js
  ├── index.js
  
  // App.js 안에 일부 코드
  import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
  
  ...
  
  <Router>
      <Routes>
        <Route path="/" element={<Home />} />             {/* / 경로 */}
        <Route path="/about" element={<About />} />       {/* /about 경로 */}
        <Route path="/blog" element={<Blog />} />         {/* /blog 경로 */}
        <Route path="/blog/:id" element={<BlogPost />} /> {/* /blog/:id 경로 (동적 라우팅) */}
      </Routes>
    </Router>

• Next.js: 파일과 폴더 구조만으로 경로가 자동으로 설정됩니다. pages 폴더 안에 파일명을 작성하면 경로가 자동적으로 만들어집니다. 
  • 예를 들어, pages/about.js 파일을 생성하면 /about 경로가 자동으로 만들어집니다. 추가적인 라우터 설정 없이 바로 접근할 수 있어 라우팅 설정이 간편해집니다.

pages/
  ├── index.js         
  ├── about.js         
  ├── blog/
  │    ├── index.js   
  │    └── [id].js

 

딱 봐도 Next.js가 간편해보입니다

4. SEO( Search Engine Optimization )

• React.js: 클라이언트 사이드 렌더링(CSR) 특성상, 초기 페이지 로드 시 검색엔진이 콘텐츠를 제대로 읽지 못할 수 있습니다.
  • 예를 들어, 구글 같은 검색엔진이 페이지를 크롤링할 때 자바스크립트가 실행되기 전의 빈 페이지를 크롤링할 수 있습니다. 따라서, react-snap 같은 프리렌더링 도구를 사용하거나 추가적인 설정이 필요합니다.
• Next.js: 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 덕분에, 처음부터 완성된 HTML이 제공됩니다.
  • 예를 들어, 검색엔진 노출이 중요한 페이지의 경우, Next.js는 처음부터 페이지의 완전한 콘텐츠를 검색엔진에 노출시킬 수 있어 SEO에 매우 유리합니다.

5. 개발자 경험(Developer Experience)

통합적으로 말하자면!

• Next.js: 기본적으로 서버 렌더링, 정적 사이트 생성, 파일 기반 라우팅 등 다양한 기능을 제공하기 때문에 추가적인 설정이 거의 필요 없습니다. Next.js는 빠르게 프로젝트를 세팅하고 기본적인 성능 최적화도 되어 있어 개발 속도가 빠릅니다.
• React.js: 유연성이 높지만, 그만큼 설정해야 할 부분이 많습니다.
  • 예를 들어, 서버 렌더링이 필요한 경우 react-dom/server와 Express.js를 함께 사용해야 하며, 라우팅, API 서버, 성능 최적화 등 필요한 기능을 하나하나 설정해야 합니다.

---

결론

같은 css 형태나 기능이 있을 때에도 무작정 HTML 파일에 다 넣었는데, React.js를 사용했을 때는 컴포넌트화를 시켰을 때 sensation하게 느끼고 편안함을 느꼈습니다. 그러나 Next.js를 사용하고 나서는 Next.js는 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 자동 경로 설정 같은 다양한 기능을 기본으로 제공해서 개발 속도도 빠르고, 성능 최적화도 신경 쓸 부분이 적어서 더 큰 매력을 느꼈습니다. 그래서 React와 비슷하면서 더욱 편리함을 느낀 Next.js 공부에 집중하려고 합니다.

 

React.js로 충분하게 프로젝트를 진행이 될 수 있지만, 복잡한 기능이 필요하거나 성능이나 SEO 최적화가 중요한 웹사이트를 만든다면, Next.js를 한번 써보시는 걸 추천드립니다. 개발 시간이 줄어들고 고민할 시간을 줄어 들게 만들어 줄 것입니다!