리엑트(React) 리믹스(Remix)는 리엑트 라우터(React-Router)를 만든 개발자가 만들었습니다.
Remix는 원래 라이선스 비용을 지불하는 유료 프레임워크였는데, 최근에 무료로 변경되었습니다.
Remix 프레임워크 특징
Remix는 프로젝트를 시작할 때 어떤 종류의 서버에서 배포할 건지 선택하게 됩니다. 그 이유는 서버 측에서 렌더링(HTML) 하여 페이지를 보여주기 때문입니다.
즉, 프론트 서버에서 "JS" 코드를 읽고 "HTML"으로 렌더링 해서 보여줍니다.
이 결과로 유저는 하얀 화면(인터넷 속도가 느린 경우 포함), 로딩 중 화면을 볼일이 없습니다.
(서버사이드 렌더링)
다만, 데이터를 불러오고 보여주는 과정이 조금 다릅니다.
"loader"라는 함수를 통하여 "API"를 요청하고 UI 단에서는 "useLoaderData"를 통해서 데이터를 보여주게 됩니다. 이렇게 통해 불러오게 되는 데이터는 프론트 서버 내부에서 호출해서 가져오고 실제로 유저는 이미 HTML로 변환된 화면을 보게 됩니다.
(서버 내부에서 API를 호출하기 때문에 보안 이슈가 조금 줄어듬)
Gatsby랑 비슷한거 아닌가?라고 할 수도 있지만, Gatsby는 빌드 시에 미리 HTML 파일이 만들어져 있고 Remix는 필요한 경우에만 해당 페이지를 HTML을 만들어서 보여줍니다.
반대로 데이터를 보낼때는 "action" 함수를 통해서 진행하게 되며, 데이터를 불러올 때(loader)와 동일하게 서버 내부에서 호출하게 됩니다.
Remix VS Next.js
Remix vs Next.js
An objective comparison between Remix and Next.js
remix.run
Remix를 선택해야 하나 Next.js를 선택해야 하나 굉장히 헷갈릴 것 같다. 하나 분명한 것은 Remix만 쓰더라도 구현적으로 기술적으로 밀린다는 것은 없을 것으로 봅니다.
Remix가 아무래도 기존에 유료였던 부분에 대해서 레퍼런스가 적을 수도 있습니다.
그래서 커뮤니티가 큰 Next.js를 주로 배우면서 Remix로 한번 토이프로젝트 해보는 것을 추천합니다.
참고 링크
Remix - Build Better Websites
Remix is a full stack web framework that lets you focus on the user interface and work back through web fundamentals to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff.
remix.run