[NextJS] App router + Nginx 환경에서 React Suspense 문제

Next + Nest + Nginx의 조합으로 돌아가는 MVP 제품 개발 환경에서 문제가 발생했습니다.

기획 당시 SEO를 중시하는 프로젝트 특성 상 앱 라우터를 선택했고,
앱 라우터는 페이지간 라우팅 시 서버 렌더링이 원칙입니다.

막상 구현을 하고 나니, 페이지간 전환 딜레이가 거슬릴 정도로 오래 걸려서..
Suspense 기능을 이용하기로 마음먹었습니다.

(2초~3초나 걸리기도 했음.. 현재는 프론트 백 모두 개선을 거쳐서 1초 미만입니다 ^^)

import { Suspense } from 'react';
...

export default async function PoliticianPage({
  params,
}: {
  params: { politicianId: number; issueId: number };
}) {
  return (
    <div className="flex flex-col items-center w-full gap-4">
      <Header />
      <div className="h-[40px]" />
      <NavHeader title="프로필" />
      <Suspense fallback={<PoliticianPageSkeleton />}>
        <SuspenseArea params={params} />
      </Suspense>
    </div>
  );
}

Data Fetch하는 동안 스켈레톤이 띄워지게 됩니다.

이런 식으로 구현을 완료했는데, 로컬 NextJS 데브 서버에서는 문제없이 서스펜스가 잘 작동했지만 막상 클라우드 환경에 개시하면 서스펜스가 작동하지 않는 문제가 발생하고 말았습니다.

원인 파악을 위해 열심히 조사를 하던 도중..

버셀 깃허브에 올라온 이슈를 확인하고 문제를 파악했습니다.

App router와 Nginx의 조합에서 Suspense가 작동하지 않을 경우,
Nginx.conf 파일에 proxy_buffering을 off로 설정해야 한다.

 

프록시 버퍼링 옵션이 하는 일은 서버로부터 받은 응답을 내부 버퍼에 저장하고 전체 응답이 버퍼링될 때까지 클라이언트에 데이터 전송을 시작하지 않음으로써, 느린 클라이언트에서의 성능을 최적화하는데 도움을 주기 위함입니다.

하지만 위와 같은 상황에서는 페이지 라우팅 블로킹으로 인한 사용자 경험의 저하를 막는게 우선이겠지요.

server {
    listen       80;
    server_name  localhost;

    location / {
        proxy_pass http://frontend:3000/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_buffering off;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

위와 같이 설정하고 나니 정상적으로 서스펜스가 작동하는 것을 확인할 수 있었습니다.

다만 프록시 버퍼링 옵션은 기본적으로 활성화된 옵션인 만큼 옵션 변경을 잘 인지해놓는 것이 좋을 것 같습니다.

 

항상 문제 해결은 원인 파악이 가장 오래 걸리는 것 같네요..

 

버셀 이슈 링크: https://github.com/vercel/ai/issues/215#issuecomment-1605363922