안은결

왜 항상 같은 곳으로 리다이렉트 하지?

목적지를 바꿔도 이전 주소로 이동하게 만든 브라우저의 308 리다이렉트 캐시

프로젝트를 개발하던 중 로그인 뒤 이동할 워크스페이스를 A에서 B로 바꿨습니다. 코드는 B를 가리켰지만 브라우저는 계속 A로 이동했습니다.

서버 목적지

요청

/login

결과

—

브라우저 캐시비어 있음

308 Permanent와 A로 한 번 요청한 뒤, 서버 목적지만 B로 바꿔 다시 요청해보세요. 결과는 계속 A입니다.

308은 이동을 기억시킨다

설정을 확인하니 서버는 308 Permanent Redirect를 응답하고 있었습니다. 브라우저는 이 응답의 출발 주소와 목적지를 기억할 수 있습니다.

HTTP/1.1 308 Permanent Redirect
Location: /workspaces/a

다음 /login 방문에서 브라우저가 저장한 목적지를 사용하면 바뀐 서버 설정은 확인하지 않습니다. 그래서 코드를 수정해도 A로 이동했습니다.

로그인 뒤 목적지는 선택한 워크스페이스에 따라 달라집니다. 변할 수 있는 이동을 영구적이라고 응답한 것이 원인이었습니다.

변하는 목적지는 307로 보낸다

307과 308은 모두 요청의 메서드와 본문을 유지합니다. 차이는 다음 요청에서 드러납니다.

  • 308 Permanent Redirect는 저장한 이동을 다시 사용할 수 있습니다.
  • 307 Temporary Redirect는 서버가 목적지를 다시 결정합니다.

Next.js의 permanent를 false로 바꾸면 307을 응답합니다.

 redirect: {
   destination: `/workspaces/${workspaceId}`,
-  permanent: true,
+  permanent: false,
 }

코드를 고친 뒤에는 캐시도 지운다

이미 저장된 308은 코드를 바꿔도 사라지지 않습니다. 데모를 307과 B로 바꾼 뒤 요청해도 캐시가 남아 있으면 A로 이동합니다.

캐시 지우기를 누르고 다시 요청하면 B로 이동합니다. 307에서는 매번 현재 서버 설정을 따릅니다.

permanent는 목적지가 앞으로도 바뀌지 않을 때만 사용하는 선택이어야 합니다.