배경
- 대부분 SSR을 위해 Next.js를 사용해보셨을거라고 생각해요.
- Next.js는 첫 시작으로는 매우 좋은 프레임워크라고 생각하지만, 프로덕션 환경에서 나의 상황과 환경에 맞게 뜯어쓰기에, 그리고 SSR 환경을 세세히 이해하기에 React Router가 조금 더 적절하다는 생각을 해요.
- 이런 부분에서 제가 좋아하는 React Router V7(a.k.a. Remix)을 함께 따라해보며 배워보고, React Router를 우리가 앞서 만든 Fastify 앱에 끼워서 풀스택 앱 셋팅을 실제로 해봐요.
Next.js vs React Router (a.k.a. Remix)
아래 글을 함께 읽어봐요
- “Remix에 능숙해지면 웹에 대해서도 더 잘 알게 되고, 그 반대의 경우도 마찬가지입니다.”
- “As you get better at Remix, you get better at the web and vice versa.”
React Router의 구성요소
웹 프레임워크는 크게 아래의 문제를 해결해야하는데요.
- 빌드를 어떻게 하는가?
- 서빙을 어떻게 하는가? (HTML이 어떻게 내려오는가?)
- 코드를 어떻게 짜는가?
Next.js는 해당 문제를 아래와 같이 해결했어요.
- 빌드를 어떻게 하는가? → Webpack을 코드 내에 삽입하여 개조하여 사용. Turbopack 준비중
- 서빙을 어떻게 하는가? → 서빙 로직을 작성 및 커스텀 로직과 Vercel 플랫폼 기능을 활용
- 코드를 어떻게 짜는가? → pages 디렉토리, app 디렉토리와 React Server Component
React Router는 해당 문제를 아래와 같이 해결해요.
- 빌드를 어떻게 하는가? → Vite와 Vite 플러그인 사용.
- 서빙을 어떻게 하는가? → Adaptor 기반으로 다양한 환경(Node.js, Cloudflare Workers 등)에 배포 가능.
- 코드를 어떻게 짜는가? → loader, action과 같은 Web 표준 시맨틱(의미, 인터페이스) 활용.
따라서 React Router를 설치하게 되면,
- Vite가 설치되고
- Vite 빌드의 결과물로 클라이언트 빌드와 서버 빌드가 나오게 되며
- 서빙 로직이 Node.js에서 실행 (
react-router-serve)
되게 돼요.
웹 플랫폼?
오늘 “웹 플랫폼”이라는 단어들이 많이 등장하게 되는데요. 저는 우리가 리액트 개발자이기 이전에 “웹 개발자”여야하고, 최신 기술도 좋지만 이러한 근본 지식에 관심을 갖고 능숙해져야 한다고 생각해요. 늘 제가 이야기하는
Cache-Control 헤더를 포함해, Request, Response와 같은 객체와, URL, URLSearchParams 와 같은 객체들에 익숙해지시길 바래요.혹시
qs, querystring 패키지를 사용하시나요?웹 플랫폼을 사용하셔야해요.
new URLSearchParams()를 쓰셔야 합니다. 라이브러리는 일시적이지만 웹 플랫폼은 영원합니다.
