Remix 사용판단 조사

• 목차
  • 비교
    • 빌드속도
    • 렌더링 속도
    • 개발환경과 통합
    • 사용성
    • 쿠키, 세션 기능
    • 서버작업
    • 확장성
  • 총평

NEXTJS 와 비교

빌드속도

• REMIXJS
  • 데이터 양과 상관없이 빠르게 빌드된다 (Vite 빌드툴사용됨).
• NEXTJS
  • 데이터가 많을수록 빌드 시간이 늘어난다(ISR 기능때문).
    • https://velog.io/@hazae23/Merging-Remix-and-React-Router

렌더링 속도

• REMIXJS
  • 서버사이드에서 fetch를 사용할때 기본으로 stale-while-revalidate 전략을 사용하기 때문에 속도가 빠르다.
• NEXTJS
  • 라이브러리를 사용하면 될줄 알았으나 서버사이드에서 useSwr을 지원하지 않는걸로 보인다.
    • https://swr.vercel.app/docs/with-nextjs

개발환경과 통합

• REMIXJS

  • 외부 리소스 를 link태그를 통해 로드하는걸 권장한다(우리 프론트팀의 작업방식에 적합하다).
  • 페이지별로 리소스를 관리하기 편리하다.

• NEXTJS

  • CSS 리소스를 외부파일로 로드하는 공식적인 방법이 없다.
  • CSS module 방식을 사용하거나 tawilwind와 같은 프레임웍이 권장된다.
  • CSS가 순서대로 로드 안되는 오래된 버그를 가지고 있다
    • https://github.com/vercel/next.js/issues/51030
    • https://github.com/vercel/next.js/issues/16630

• NEXTJS 와 REMIXJS

  • joongangScripts 에 있는 preact 와 react 컴포넌트를 공유하는 방식으로 쉽게 사용할 수 있다.
  • joongangScripts 에 있는 다른 스크립트 리소스를 활용할 수 있다.
    • https://pri-bitbucket.joongang.co.kr/projects/JAFE/repos/joongangscripts/pull-requests/168/diff#packages/sharedComponent/src/sample/SampleComponent.jsx
    • https://pri-bitbucket.joongang.co.kr/projects/JAFE/repos/joongangscripts/pull-requests/168/diff#packages/pages/app/routes/_index.tsx

사용성

• REMIXJS
  • 사용법이 간단하고 직관적이다, Loader와 Action만 알면 필요한 서버 동작이나 api를 쉽게 만들 수 있으며, 불필요한 보일러플레이트가 적다.
  • 기존 리액트 사용자들에게는 러닝커브가 작다(리액트 라우터를 그대로 사용한다).
• NEXTJS
  • 레이아웃을 변경하기위해 layout.tsx, page.tsx, template.tsx, 등의 기능과. api와 같은 서버작업이나 http 헤더 변경과 같은 작업을 하기위해선 middleware.ts, action.ts, route.tsx 등의 사용법을 알아야한다.
  • 규모가 커질수록 더 복잡해지고 들여다 보기 싫어질 가능성이 높다.

쿠키, 세션 기능

• REMIXJS
  • 쉽고 단순한 api로 세션이나 쿠키 생성가능하다(추상화가 잘 되어 있어 다양하게 적용하기 좋다)
  • 모든 기능을 Lodader나 Action흐름 내에서 전부 사용가능하다.
• NEXTJS
  • 보통 middleware를 사용하며session cookie 관련 라이브러리를 사용하는 생태계이며 사용법이 꽤나 복잡하고 러닝커브가 있다.
    • https://nextjs.org/docs/app/building-your-application/authentication#session-management
    • https://velog.io/@sinclairr/next-iron-session
    • https://velog.io/@zerozoo-front/next-js에서-lib-안쓰고-cookie-secure-HttpOnly-쿠키-심기
  • 새롭게 추가된 쿠키 기능은 읽기전용이라서 페이지 렌더링전에 쓰기가 힘들며, 결국 제대로만들기 위해선 middleware와 함께 작업되어야 한다.
    • https://github.com/vercel/next.js/discussions/46255

서버작업

• REMIXJS
  • Loader나 Action만 알면된다. GET으로 특정 경로에 접근할 경우 Loader(데이터만듬) -> Rendering(리액트로 랜더링) 의 흐름을 따른다.
  • POST로 특정 경로에 접근할 경우 Action -> Loader -> Rendering 의 흐름을 따른다.
    • 데이터를 변경하는 특정 fetch를 실행 후, 페이지를 그리는 패턴으로 작업하기 용이하다
      • (데이터 뮤테이션에 대한 명확한 방법 제공)
• NEXTJS
  • router.ts를 통해 비교적 저수준 레벨의 http 메서드들을 일일이 작성해야한다.
  • 페이지의 경로나 서버작업의 api경로가 엄격하게 분리되어 있다.
  • 데이터 뮤테이션의 경우 권장하는 패턴이나 흐름이없고 사용자가 알아서 해야한다.
    • router.ts나 action.ts로 작성할수 있다.

확장성

• REMIXJS

  • 특정 플랫폼에만 작동하는 제한된 기능이 없다.
  • Remix 웹 프레임워크를 Shopify가 인수했으므로, 장기적으로 이미 preact를 사용하고 있는 우리가 유리할 수 있다
    • https://github.com/remix-run/remix/discussions/4562

• NEXTJS

  • 상대적으로 varcel 클라우드에 족속적인 기능을 갖고 있어 모든 기능을 다 활용하기 어렵고, 필요없는 기능때문에 앱 자체에 무게나 번들링 속도가 느릴 수 있음.
  • Vercel 이외에 호스팅 업체에 올리는게 쉽지가 않다고 한다.

총평

우리가 사용하길 원하는 기능은 RemixJs 나 NextJs 전부 지원하는걸로 판단되지만, Remix가 더 직관적인 개발편의성을 제공하고 렌더링 성능도 더 좋음.

NextJs가 더 사용자가 많고 커뮤니티와 개발 레퍼런스가 풍부해 보이지만 단지 역사가 오래되어 양이 많아 풍부해 보이는 것일뿐 오히려 예전버전의 레퍼런스와 많이 섞여있기 때문에 쓸만한 정보를 찾기 힘들고 혼잡하다고 판단됨.

Remixjs가 오히려 개발 패턴과 방향성이 확실하기 때문에 기본 메뉴얼이 더 잘 정리되어 있고 React 공식홈페이지에서도 권장하는 프레임웍인 만큼 안정성에도 문제가 없어보임.