Next.js는 React 기반 SSR의 대표로 인지되고 있지만 복잡성과 무거운 번들 크기 등의 문제점도 존재합니다.
이러한 상황에서 Remix와 Qwik은 더 단순하고 효율적인 방법을 제공합니다.

Next.js는 강력한 기능을 제공하지만, 그만큼 복잡한 API와 설정이 필요합니다.
또한 프로젝트가 커질수록 번들 크기가 증가하고 하이드레이션 비용이 높아지는 문제가 있습니다. 이러한 문제를 해결하기 위해 다른 접근 방식을 취하는 프레임워크들이 등장했습니다.

Remix와 Qwik은 각각 다른 방식으로 이러한 문제에 접근합니다.
Remix는 웹 표준을 최대한 활용하여 단순함을 추구하고, Qwik은 하이드레이션 과정을 근본적으로 재설계하여 초기 로딩 속도를 최적화합니다.

Remix: 웹 표준을 활용한 단순함

Remix는 React Router의 창시자들이 만든 프레임워크로, 웹 표준을 최대한 활용하는 철학을 가지고 있습니다.

Next.js와의 주요 차이점

Next.js는 다양한 렌더링 전략(SSR, SSG, ISR)과 API 라우트 등 많은 기능을 제공하지만,
이로 인해 API가 복잡해지고 학습 곡선이 높아집니다. 반면 Remix는 웹 표준에 기반한 단순한 접근 방식을 취합니다.

캐싱 메커니즘

Next.js는 자체적인 캐싱 시스템을 가지고 있어 복잡한 설정이 필요합니다. 반면 Remix는 HTTP 표준인 Cache-Control 헤더를 활용하여 직관적인 캐싱을 구현합니다.

// Remix의 간단한 캐싱 예시
export async function loader({ request }) {
  const data = await fetchData();
  return json(data, {
    headers: {
      "Cache-Control": "max-age=300, s-maxage=3600"
    }
  });
}

라우팅 시스템

Next.js는 파일 시스템 기반 라우팅을 사용하며, API 라우트를 별도로 구성해야 합니다. Remix는 중첩 라우팅을 자연스럽게 지원하며, 각 라우트가 자체 로더와 액션을 가집니다.

// Remix의 중첩 라우팅 예시
// routes/dashboard.tsx (부모 라우트)
export default function Dashboard() {
  return (
    <div>
      <h1>대시보드</h1>
      <Outlet /> {/* 자식 라우트가 렌더링되는 위치 */}
    </div>
  );
}

// routes/dashboard.stats.tsx (자식 라우트)
export default function Stats() {
  return <div>통계 데이터</div>;
}

데이터 로딩

Next.js는 getServerSideProps, getStaticProps 등 다양한 데이터 페칭 방식을 제공합니다. Remix는 단일한 loader/action 패턴으로 일관성 있는 데이터 처리를 제공합니다.

// Remix의 데이터 로딩 예시
export async function loader({ params }) {
  const product = await getProduct(params.id);
  return json(product);
}

export default function ProductPage() {
  const product = useLoaderData();
  return <div>{/* 제품 정보 렌더링 */}</div>;
}

Remix의 장점

1. 에러 처리: 각 라우트 컴포넌트에서 ErrorBoundary를 정의하여 세분화된 에러 처리가 가능합니다.
2. 프로그레시브 인핸스먼트: 자바스크립트 없이도 기본 기능이 작동하도록 설계되어 있습니다.
3. 더 적은 클라이언트 코드: 필요한 코드만 클라이언트로 전송하여 번들 크기를 최적화합니다.

Qwik: 하이드레이션 접근법

Qwik은 Builder.io 팀이 개발한 프레임워크로, 특히 하이드레이션 과정을 근본적으로 재설계했습니다.

하이드레이션 문제

Next.js와 Remix를 포함한 대부분의 SSR 프레임워크는 다음과 같은 하이드레이션 과정을 거칩니다:

1. HTML을 서버에서 렌더링하여 전송
2. 자바스크립트 번들 다운로드
3. 전체 컴포넌트 트리 재구성
4. 이벤트 리스너 연결 및 상태 복원

이 과정은 특히 복잡한 앱에서 상당한 시간이 소요되며 "하이드레이션 비용"이라고 불립니다. 이로 인해 TTI(Time to Interactive)가 늦어지고 사용자 경험이 저하될 수 있습니다.

Qwik의 접근법: 리줌어블(Resumable)

Qwik은 이 문제를 "리줌어블(Resumable)" 접근법으로 해결합니다. 이는 앱을 처음부터 다시 시작하는 것이 아니라, 서버에서 중단된 지점부터 이어서 실행하는 개념입니다.

// Qwik 컴포넌트 예시
export const Counter = component$(() => {
  const count = useSignal(0);
  
  return (
    <div>
      <p>Count: {count.value}</p>
      <button onClick$={() => count.value++}>증가</button>
    </div>
  );
});

스트리밍 하이드레이션의 작동 방식

Qwik의 접근법은 다음과 같은 특징을 가집니다:

1. 지연 로딩(Lazy Loading)

Qwik은 컴포넌트와 이벤트 핸들러를 개별적으로 분할하여 필요할 때만 로드합니다. 이를 위해 자동화된 코드 분할 기능을 제공합니다.

// 이벤트 핸들러가 별도의 청크로 분리됨
export const MyButton = component$(() => {
  return (
    <button onClick$={() => {
      // 이 코드는 버튼이 클릭될 때만 로드됨
      console.log('버튼이 클릭되었습니다');
    }}>
      클릭
    </button>
  );
});

2. 직렬화된 상태

모든 상태와 이벤트 핸들러를 HTML에 직렬화하여 저장합니다. 이를 통해 자바스크립트가 로드되기 전에도 상태 정보를 유지할 수 있습니다.

<!-- Qwik이 생성한 HTML 예시 -->
<button on:click="./chunks/button_click.js#handler" q:obj="123">클릭</button>

3. 점진적 실행

사용자 상호작용이 있는 부분만 선택적으로 하이드레이션합니다. 예를 들어, 버튼을 클릭할 때만 해당 버튼의 이벤트 핸들러가 로드되고 실행됩니다.

이러한 접근법은 다음과 같은 이점을 제공합니다.

• 초기 로딩 시간 단축: 필수적인 HTML만 먼저 로드하여 FCP(First Contentful Paint)를 개선합니다.
• 최소한의 자바스크립트: 상호작용이 필요한 부분만 자바스크립트를 로드하여 TTI(Time to Interactive)를 개선합니다.
• 즉각적인 상호동작: 전체 앱이 하이드레이션될 때까지 기다릴 필요 없이 각 부분이 독립적으로 동작합니다.

Qwik City

Qwik의 메타 프레임워크인 Qwik City는 라우팅, 미들웨어, 데이터 로딩 등의 기능을 제공합니다.

// Qwik City의 라우트 컴포넌트 예시
export const onGet = async ({ params, response }) => {
  const data = await fetchData(params.id);
  response.headers.set('Cache-Control', 'max-age=3600');
  return { data };
};

export default component$(() => {
  const { data } = useEndpoint();
  return <div>{/* 데이터 렌더링 */}</div>;
});

Remix는 웹 표준을 활용한 단순함을, Qwik은 하이드레이션 자체를 재설계한 접근법을 제공합니다.
프로젝트의 요구사항에 따라 적절한 프레임워크를 선택하면 됩니다.