React Router v7이 출시되서 공식 문서를 잠깐 살펴봤습니다.

주목할 만한 점은 React Router Vite Plugin을 통해 Next.js와 비슷한 기능 지원들을 제공받을 수 있다는 점입니다.

아래는 React Router Vite Plugin에서 제공하는 기능들입니다. (공식 문서의 글을 그대로 긁어왔습니다.)

• Route loaders, actions, and automatic data revalidation

• Typesafe Routes Modules

• Automatic route code-splitting

• Automatic scroll restoration across navigations

• Optional Static pre-rendering

• Optional Server rendering

대부분 Next.js의 내장 라우터에서 기본으로 제공하는 익숙한 기능들인데요, 특히 Static pre-rendering 기능이 눈에 띄었습니다.

Static pre-rendering 기능은 각 라우터를 빌드 타임에 정적 HTML로 빌드할 수 있는 기능입니다. 서버가 아닌 빌드 시점에 페이지를 렌더링하면 정적 콘텐츠 불러오는 속도를 높일 수 있습니다.

서버없이 운영 가능한 SPA의 장점은 누리면서 Vite로 정적 페이지를 미리 만들어놓을 수 있다는 점이 큰 메리트인 것 같습니다.

다만 해당 기능을 사용하려면 반드시 Vite에서 제공하는 React 플러그인을 React Router의 플러그인으로 대체해야 합니다. (아래 코드 참조)

// vite.config.ts

-import react from '@vitejs/plugin-react'
+import { reactRouter } from "@react-router/dev/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
-    react()
+    reactRouter()
  ],
});

저는 이 작업이 React Router에 대한 의존성을 강화시키는 것 같아서 유지보수 관점에서는 조금 우려스럽긴 합니다.

만약 여러분이 다양한 기능을 지원받고 싶다면 React Router의 Vite Plugin으로 대체하고, 그게 아니라면 Vite에서 제공하는 기존 플러그인을 사용하고 React Router는 기존처럼 라이브러리를 사용하시면 될 것 같습니다.

저희 팀에서 운영하는 프로덕트는 정적인 화면 보다는 사용자에 특화된 다이나믹한 화면의 비중이 높아서 아마도 라이브러리만 사용하는 형태로 가져가지 않을까 싶네요.

관련 내용이 궁금하시면 React Router 공식 문서의 Framework Adoption from Component Routes 페이지를 참고해 보세요.

https://reactrouter.com/upgrading/component-routes#features