REMIX vs NEXT.JS 비교하기

 

최근 클라이언트 사이드 렌더링(CSR)을 기반으로 발전해온 프론트엔드 개발에서 

 

이 CSR의 단점을 보완하기 위해 과거의 웹 동작 방식인 서버 사이드 렌더링(SSR)을 채택하는 경우가 많아졌습니다.

 

 

(이 글을 읽기 전 , 브라우저 렌더링에 관한 글을 읽고 보시면 좋을 것 같습니다.)

브라우저 렌더링 CSR와 SSR

 

 

 

 

 SSR을 가능하게 하는 React 메타 프레임워크인 Remix 와 Next.js 에 대해 비교하며 설명하겠습니다.

 

 

 

Remix

 리액트 메타 프레임워크로 2021년 개발된 오픈소스입니다. 리액트에서 SSR, SSG 방식을 사용할 수 있도록 해줍니다.

2022년 12월, 약 10%의 사용율을 보이며 올해 급속도로 사용율이 높아졌습니다. 

 

Remix는 사용자 인터페이스에 집중하고 웹 기본 사항을 통해 작업하여 빠르고 매끄럽고 탄력적인 사용자 경험을 제공할 수 있는 풀스택 웹 프레임워크입니다.

 

 

Remix - Build Better Websites

Remix — The Hottest New JS Framework (Winter 2021)

출처: 드림코딩

 

 

왜 사용자가 많아졌는가?

 

먼저 Remix는 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)을 모두 지원하는 Full-stack 프레임워크입니다. 이는 초기 렌더링 속도와 검색 엔진 최적화(SEO)를 향상시킬 수 있습니다. 

 

Remix는 페이지의 데이터 로딩을 도와주는 기능을 제공합니다. 데이터 로딩은 컴포넌트 수준이 아니라 라우터 수준에서 이루어지며, 이를 통해 코드의 중복을 최소화하고 성능을 최적화할 수 있습니다. 정적 경로와 동적 경로를 모두 지원하며, 비동기 라우팅을 쉽게 구현할 수 있습니다.  보안 측면에서는 사용자 인증, CSRF 방지 등과 같은 기능들이 프레임워크에 기본적으로 내장되어 있습니다.

 

이러한 기능들과 뛰어난 성능으로 인해 관심을 받고, 사용자들의 선호를 얻은것으로 생각합니다. Remix는 오픈소스가 된지 얼마 되지 않았지만, 웹 표준을 따라 프로젝트를 만들고 협업하는 매우 활발한 커뮤니티를 가지고 있는 만큼, 앞으로가 기대되는 프레임워크라고 합니다.

 

---

Next.js

Vercel에서 만든 리액트 기반의 웹 프레임워크로서, 2016년에 등장하였습니다. 서버 사이드 렌더링과 정적 사이트 생성, 개발 생산성, 성능 최적화 등 리액트를 기반으로 하여 다양한 장점과 유용한 기능들이 있기 때문에 많이 사용되고 있습니다. React + 유사 Express.js + SSR을 한번에 통합하여 구현할 수 있도록 도와줍니다.

 

 

1. Next.js는 React 애플리케이션을 서버에서 렌더링하여 초기 로딩 속도를 개선하고 검색 엔진 최적화(SEO)를 향상시키는 서버 사이드 렌더링을 지원합니다. 이는 애플리케이션의 성능을 향상시키는 데 도움이 됩니다. 또한, Next.js는 정적 사이트 생성(Static Site Generation, SSG)을 지원하여 사전에 페이지를 미리 렌더링하여 성능을 높이고 서버 부하를 줄일 수 있습니다. 이를 통해 페이지가 고정적이거나 변경 빈도가 낮은 경우에도 서버 측에서 캐싱하여 사용자에게 빠르게 제공할 수 있습니다. 

 

2. Hot Module Replacement (HMR)을 지원하여 개발 중에 코드 변경 사항을 실시간으로 반영할 수 있습니다. 개발자가 코드를 수정하는 동안 애플리케이션을 다시 빌드하지 않아도 변경 사항이 즉시 브라우저에 반영되어 빠른 개발을 도와줍니다. 

 

3. Next.js의 라우팅 시스템은 파일 시스템 기반으로 동작합니다. /pages 디렉토리 내에 만든 파일들이 자동으로 라우팅 경로로 매핑되며, 이를 통해 별도의 라우팅 설정이 필요 없어 간단하게 라우팅을 구현할 수 있습니다. 예를 들어, /pages/about.js 파일은 /about 경로로 자동 매핑됩니다. 

 

4. /pages/api 디렉토리를 통해 API Routes를 제공합니다. 이를 사용하면 서버리스 환경에서 쉽게 백엔드 API를 구현할 수 있습니다. 클라이언트와 서버 사이의 데이터 통신에 유용하며, RESTful API나 GraphQL과 같은 백엔드 API를 쉽게 구현할 수 있습니다. 

 

5. config 파일을 통해 프로젝트의 환경 설정을 관리할 수 있습니다. 또한, 환경 변수를 사용하여 개발과 배포 단계에서 다른 설정을 적용할 수 있습니다. 이는 프로젝트의 구성 관리를 용이하게 해주고, 환경별로 다른 설정이 필요한 경우 유용하게 사용됩니다. 

 

6. 코드 분할을 자동으로 처리하여 각 페이지에 필요한 최소한의 JavaScript를 불러오도록 도와줍니다. 이를 통해 초기 페이지 로딩 속도를 개선하고, 사용자가 방문하지 않는 페이지의 자원을 불러오지 않아도 되므로 효율적인 자원 사용을 도모합니다. 또한, Next.js는 자동으로 최적화를 수행하여 웹 애플리케이션의 성능을 최대한으로 끌어올립니다. 이로 인해 개발자는 성능 최적화에 신경 쓰지 않고도 높은 퍼포먼스를 가진 애플리케이션을 구축할 수 있습니다. 

 

7. 플러그인 시스템을 지원하여 개발자가 필요한 기능을 쉽게 추가하고 확장할 수 있습니다. 다양한 플러그인들이 커뮤니티에 의해 개발되어 있으며, 필요에 따라 사용하거나 직접 플러그인을 개발하여 활용할 수 있습니다.

 

 

 

 

Next.js by Vercel - The React Framework

출처: stack overflow

 

---

 

차이점

 

1. Remix는 Full-stack 프레임워크로서 서버 사이드 렌더링과 클라이언트 사이드 렌더링을 모두 지원합니다. 반면에 Next.js는 SSR과 SSG을 지원하지만 클라이언트 사이드 렌더링은 사용자가 구현해야 합니다. 

 

2. 두 프레임워크의 라우팅 시스템은 구성 방식에 차이가 있습니다. Remix는 각 페이지를 라우트 모듈을 이용하여 구성하는 반면, Next.js는 파일 시스템 기반의 라우팅을 지원합니다. 

 

3. Remix는 사용자 인증과 CSRF 방지 등의 기능을 프레임워크에 기본적으로 내장하고 있습니다. Next.js는 이러한 보안 기능들을 개발자가 직접 구현해야 합니다. 

 

 

 

두 프레임워크 모두 다양하고 뛰어난 기능을 제공하기 때문에 프로젝트의 요구사항이나 개발자의 선호에 따라 적절히 선택하면 좋을 것 같습니다.

 

풀스택 애플리케이션을 구축하고 초기 렌더링 속도가 중요하다면 Remix가 더 적합하다고 생각합니다. SSR과 SSG를 선택적으로 사용하고, 개발 생산성이 중요하다면 Next.js가 적합하다고 합니다. 커뮤니티와 생태계를 생각하면 Next.js가 더 적합할 것 같습니다. 

 

 

 

 

 

참고자료

Stack Overflow Developer Survey 2022

스택오버플로우 사용자 대상 설문결과 ( ex) hot frameworks in 2022 )