[번역] Remix는 무엇이고 Next.js와 어떻게 다른가요?

원문: https://www.smashingmagazine.com/2022/07/look-remix-differences-next/

간단 요약
서버사이드 렌더링을 사용하는 자바스크립트 프로젝트를 만드는 프레임워크인 Remix에 대해 이야기해봅시다. 주요 기능과 개념을 살펴보고 Next.js와의 유사점과 차이점을 알아보겠습니다.
Remix는 오픈 소스가 된 지 얼마 되지 않았으며 미래가 밝습니다. 어떻게 발전하는지, 어떤 기능이 추가되는지, 개발자 경험을 개선하기 위해 어떤 관련 프로젝트가 생성되는지, 또 어떤 문제를 해결하려고 하는지 살펴봅시다.

개발자 커뮤니티에서는 매일 새로운 프레임워크와 도구가 등장하는 것을 흔히 볼 수 있습니다. 그 중 일부는 현재 다른 도구로 해결 중인 시나리오를 해결할 수 있는 다른 접근 방식을 제공합니다.
또 다른 일부는 새로운 개념이나 아이디어를 가져와 프로젝트를 대하는 다른 방법을 제안합니다. 목수가 다양한 작업을 수행하기 위한 여러 도구를 가지고 있듯이, 개발자들은 다양한 사용 사례에 적합한 여러 프레임워크와 라이브러리를 가지고 있습니다.

서버사이드 렌더링을 사용하는 자바스크립트 프로젝트를 만드는 새로운 프레임워크인 Remix에 대해 이야기해봅시다. 주요 기능과 개념을 살펴보고 다른 인기 있는 자바스크립트 프레임워크인 Next.js와의 유사점과 차이점을 알아보겠습니다.

Remix가 무엇인가요?

공식 웹사이트에 따르면, Remix는 개발자들이 웹 표준에 초점을 맞춘 훌륭한 사용자 경험을 만들 수 있도록 해주는 엣지 우선(edge-first) 풀 스택 프레임워크입니다.
Remix를 통해 React와 자바스크립트를 사용한 클라이언트 사이드 렌더링, 서버 사이드 렌더링 웹 애플리케이션을 모두 만들 수 있습니다.

웹 Fetch API를 기반으로 하기 때문에 Remix로 만든 애플리케이션은 어디에서나 실행 할 수 있습니다. Remix는 서버사이드 렌더링을 사용하여 데이터를 조작하고 서버에서 HTML 콘텐츠를 렌더링하여 클라이언트에 가능한 적은 양의 자바스크립트를 보냅니다.

Remix는 원래 구독 기반의 프리미엄 프레임워크였으나 1년도 채 되지 않아 오픈 소스 프레임워크로 출시되었습니다. 이후 Remix 개발자들과 사용자들의 커뮤니티는 성장하고 인기를 얻기 시작했습니다.

Remix 주요 기능

Remix에서 제공하는 몇 가지 주요 기능을 확인해보겠습니다.

• 라우트
  다른 프레임워크와 마찬가지로 Remix는 웹 프로젝트의 다양한 라우트를 핸들러 함수를 포함하고 있는 자바스크립트/타입스크립트 파일을 통해 관리할 수 있도록 제공합니다.
  프로젝트의 파일 시스템 계층을 따르는 파일을 만들어 페이지에 대한 아날로그 URL을 만들고 라우트를 생성할 수 있습니다. Remix 라우터는 React-Router가 제공하는 라우팅 기능 중 일부를 사용하여 작동합니다. 이러한 접근 방식을 염두에 두면 다음과 같은 이점을 확인할 수 있습니다.

• 중첩된 컴포넌트
  Remix를 사용하면 중첩된 페이지와 컴포넌트를 관리할 수 있습니다. 특정 라우트를 처리할 파일을 만들고 파일 시스템의 동일한 수준에서 동일한 이름을 가진 폴더를 만들 수 있습니다. 해당 폴더 내에 만드는 모든 파일은 서로 다른 페이지가 아닌 상위 경로의 중첩된 컴포넌트가 됩니다.

• 에러 핸들링
  중첩된 컴포넌트는 특정 컴포넌트를 렌더링하는 동안 에러가 발생하더라도 페이지의 다른 중첩된 부분에는 영향을 주지 않는다는 또 다른 이점을 제공합니다. 따라서 일반적인 페이지 에러가 발생하는 대신 에러가 발생한 부분에 에러를 캡슐화할 수 있습니다.

• 폼(Forms)
  Remix는 웹 표준에 중점을 두고 있기 때문에 자바스크립트를 사용하는 대신 기본 메서드(POST, PUT, DELETE, PATCH)를 사용하여 폼을 처리합니다.

• Loaders와 Actions
  Remix는 서버사이드 동적 콘텐츠를 만들기 위해 두 가지 함수를 제공합니다. loader 함수는 서버에서 GET HTTP 요청을 처리하는 데 사용되며 주로 다른 소스로부터 데이터를 가져오는 데 사용됩니다. action 함수는 데이터 조작과 수정에 중점을 두고 POST, PUT, DELETE, PATCH 요청을 모니터링합니다.

여기까지 Remix의 주요 기능에 대해 살펴보았습니다. 이제 현재 가장 많이 사용되고 있는 React 프레임워크 중 하나인 Next.js와 비교해 봅시다.

Remix와 Next.Js는 무엇이 다른가요?

Next.js와 Remix는 같은 목표를 갖고 있는 것처럼 보일 수 있으며, 아마도 그럴 것입니다. 그러나 이들이 제공하는 특징과 접근방식을 분석해보면 유사점과 차이점을 파악할 수 있고, 각 시나리오별로 어떤 프레임워크가 더 적합한지 생각해 볼 수 있습니다.

REACT를 기반으로 한 프레임워크

두 프레임워크 모두 React를 기반으로 만들어졌지만 Remix는 React로부터 분리하려고 합니다. Remix가 더 높은 수준의 추상화를 제공한다는 것을 알 수 있죠. 또한 Remix 커뮤니티 구성원들은 Vue.js, Angular 및 Svelte와 같은 다른 프레임워크를 사용한 구현도 진행하고 있습니다. Next.js는 React에 의존하며 현재로서는 이를 변경할 계획이 없습니다.

서버사이드 렌더링

위에서 언급한 기능들 외에도 Remix와 Next.js는 모두 서버사이드 렌더링(SSR)을 제공하여 웹 서버에서 페이지의 마크업과 콘텐츠를 생성한 후 클라이언트로 전송한다는 것을 알 수 있습니다.

Next.js와 Remix는 모두 React를 사용하므로 클라이언트 사이드 하이드레이션과 같은 기능에 의존할 수 있습니다. 또한 두 프레임워크 모두 서버에서 HTML을 미리 렌더링하는 것도 지원합니다. 프로젝트에 따라 서버 측에서 가능한 한 많은 콘텐츠를 생성하여 자바스크립트 코드 전송을 피하고 클라이언트에서 데이터를 가져오지 않도록 할 수 있습니다.

정적 사이트 생성

Next.js는 정적 사이트 생성(STATIC SITE GENERATION, SSG)을 사용하여 빌드 시 정적 페이지와 콘텐츠를 사전 생성할 수 있는 반면, Remix는 그렇지 않습니다. 만들려는 페이지 유형에 따라 이 기능은 큰 이점을 제공할 수 있습니다. SSG를 사용하면 빌드 타임에 데이터를 가져오고 페이지를 렌더링 할 수 있습니다. 따라서 사용자가 웹 사이트를 방문하기 전에 정적 페이지를 생성하여 사용자는 콘텐츠가 생성될 때까지 기다릴 필요가 없습니다.

하지만 SSG는 문제가 될 수도 있습니다. 코드나 애플리케이션의 내용을 변경할 때마다 새 버전의 정적 애셋을 생성하기 위해 빌드 프로세스를 기다려야 합니다. 프로젝트가 커짐에 따라 빌드 시간이 늘어나기 때문에 문제가 될 수 있습니다. 이 문제를 해결하기 위해 Next.js 팀은 ISR(Incremental Static Regeneration)이라는 기능과 새로운 온디맨드 ISR을 개발했습니다.

STALE WHILE REVALIDATE

콘텐츠를 최대한 빨리 제공하기 위해 Remix는 stale-while-revalidate(SWR) 캐싱 디렉티브(directive)를 사용합니다. 정적 콘텐츠를 미리 생성하는 대신 앱이 트래픽을 받으면 캐시를 준비합니다. 페이지와 문서는 캐시에서 제공되며 다음 방문자를 위해 백그라운드에서 유효성을 다시 검증합니다.
Next.js도 stale-while-revalidate로 작업할 수 있습니다. getServerSideProps​ 함수 내에서 stale-while-revalidate 캐시 제어 헤더를 사용할 수 있습니다.

클라이언트 사이드 내비게이션

사용자에게 원활한 내비게이션을 제공하기 위해 Next.js가 사용하는 기능 중 하나는 프리페치(prefetching)입니다. 우리는 웹 사이트에서 엘리먼트가 뷰포트에 나타날 때 <link>가 리다이렉션하는 페이지를 미리 로드하기 위해 <Link> 컴포넌트를 사용할 수 있습니다. 웹 사이트의 홈페이지를 방문하여 페이지에 "연락처" 링크가 나타나면 Next.js가 연락처 페이지와 관련된 내용을 다운로드하여 가져옵니다. 따라서 링크를 클릭할 때 페이지가 다운로드될 때까지 기다릴 필요가 없습니다.
그러나 Link 컴포넌트는 정적 사이트 생성(SSG)을 사용하여 사전 작성된 페이지에 대해서만 프리페치를 제공한다는 한계를 갖습니다. 동적으로 생성되는 페이지에 링크가 있으면 기능이 적용되지 않습니다.
Remix는 HTML <link rel="prefetch"> 태그를 사용합니다(Next.js의 Link 컴포넌트처럼 캐시를 사용하는 대신). 따라서 링크 뿐만 아니라 어떤 페이지든 프리페치 할 수 있습니다. Next.js를 사용하여 비슷하게 구현한다면 next/head 컴포넌트에 prefetch 태그를 추가하여 구현할 수 있습니다.

엣지 우선

서버에서 데이터를 가져오고 콘텐츠를 렌더링할 때 HTTP 요청을 보내는 사용자로부터 코드를 실행하는 서버가 얼마나 멀리 떨어져 있는지도 평가해야 합니다. 만약 메인 서버가 브라질에 있고 중국에서 웹사이트를 방문한다면, 페이지 로딩 과정은 아르헨티나에서 같은 페이지를 방문한 것보다 더 느릴 것입니다. 이것은 HTTP 요청이 코드를 평가하고 실행하기 위해 가까운 서버까지 도달해야 하는 물리적 거리와 관련이 있습니다.
최신 애플리케이션들은 정적 콘텐츠의 전달은 CDN에 의존하지만, 동적 콘텐츠를 생성하기 위해 처리되는 서버측 코드는 일반적으로 데이터 센터에서 실행되며 특정 위치에서 실행됩니다. 이 문제의 일시적인 해결책은 CDN이 리소스를 새로 고치는 동안 오래된 콘텐츠를 제공 할 수 있는 위험을 감수하며 SWR 캐싱 디렉티브를 사용하는 것입니다.

역주) 캐싱 디렉티브 참고 Ref: https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Cache-Control

이 문제를 염두에 두고 지난 몇 년 동안 새로운 개념이 고안되었는데 이것이 바로 엣지 컴퓨팅입니다. 이 아이디어는 CDN이 사용하는 것과 동일한 접근 방식으로, 다른 서버와 다른 위치에 있는 서버 로직을 복제하고, 가능한 한 사용자에게 가까이에서 동적 코드를 실행하는 것입니다. Remix는 "엣지 우선(Edge First)"로 정의되어 프레임워크의 개념부터 Edge에서 실행되는 것으로 생각되었고, Vercel은 플랫폼에 배포된 애플리케이션을 위한 추가 기능으로 Edge Functions를 출시했습니다.

서버사이드 코드

Remix의 주요 기능을 설명할 때, Remix는 기본 HTTP 메서드를 사용하여 action과 loader 함수의 도움을 받아 폼을 관리한다고 언급했습니다. 폼, 서버, 폼의 직렬화된 데이터를 서버로 전송하는 POST 요청, 서버 측 작업, 요청의 결과로 새 페이지까지, 웹 표준으로 돌아갔음을 확인 할 수 있습니다.
Remix는 HTML 폼의 최적화된 버전인 <Form> 엘리먼트를 제공합니다. <Form> 엘리먼트와 action 함수를 통해, 해당 경로와 관련된 클라이언트 코드와 서버 코드를 모두 같은 파일에 작성할 수 있습니다. Remix는 페이지의 사용자 인터페이스와 요청과 관련된 서버 측 동작을 관리하는 방법 모두를 알게 됩니다. 컨텍스트도 없고, 상태 관리도 없습니다.

반면 Next.js는 자바스크립트 코드에 의존하여 애플리케이션의 상태를 어떻게 관리하고 어떤 API를 호출하고 데이터를 재검증하고 웹 페이지의 인터페이스를 업데이트하는 방법을 알고 있습니다. API Routes를 사용하면 서버 측 기능을 실행하고 프런트엔드로 데이터를 반환하도록 파일을 분리할 수 있습니다.

말했듯이 그리고 보시다시피, Remix는 PHP가 가장 중요했던 시절을 회상하면서 기본으로 돌아가려고 하는 데이터 변형 방법을 사용하고 있습니다.

NODE.JS 의존성

앞서 말했듯이 Remix는 Node.js에 의존하는 대신 웹 Fetch API를 기반으로 합니다. 따라서 Node.js 서버(Vercel 또는 Netlify)뿐만 아니라 다른 유형의 플랫폼(Cloudflare Workers 또는 새로운 Deno Deploy)에서도 Remix 애플리케이션을 실행할 수 있습니다.

최신 버전의 Next.js인 12.2버전을 사용하면 기본 Node.js 런타임 대신 전체 Next.js 프로젝트에 대한 엣지 런타임을 선택할 수 있습니다.

결론

Remix는 오픈소스가 된지 얼마 되지 않았지만, 웹 표준을 따라 프로젝트를 만들고 협업하는 매우 활발한 커뮤니티를 가지고 있습니다. Remix는 앞으로가 기대되는 프레임워크입니다. 어떻게 발전하는지, 어떤 기능이 추가되는지, 개발자 경험을 개선하기 위해 어떤 관련 프로젝트가 생성되는지, 또 어떤 문제를 해결하려고 하는지 지켜봅시다.