인증된 페이지 CSR SSR 역전

이 회고에서는 1ad0cb0, 438adc1, 4e997a9를 통한 이동과 aae5e48의 반전과 CSR 모델을 안전하게 유지한 이후 인증 강화에 대해 다룹니다.

증상

인증된 목록 및 세부 정보 페이지는 공개 SEO 이점을 생성하지 않고도 서버측 복잡성을 더 증가시켰습니다.
한 번의 로그인 또는 짧은 관리자 탐색으로 인해 프런트엔드가 예상보다 확장될 수 있습니다.
앱은 클라이언트 구성 요소와 TanStack Query가 이미 데이터를 소유한 경로에 대해 서버 렌더링 비용을 지불하고 있었습니다.

진단

현재 app/admin/students/page.tsx는 의도적으로 다시 최소화되었습니다.

export default function StudentsPage() {
  return (
    <div>
      <StudentList />
    </div>
  );
}

lumie-frontend/e2e/ssr/ssr-regression.spec.ts의 Playwright 제품군은 이제 이를 인증된 관리자 및 대시보드 경로에 대한 예상 모델로 처리합니다.

AC-1은 기본 /api/v1/... 요청이 클라이언트 측에서 실행될 것으로 예상합니다.
AC-2는 클라이언트 가져오기가 완료된 후 페이지가 올바르게 렌더링될 것으로 예상합니다.
AC-3은 여전히 수화 불일치 경고를 방지합니다.

동시에 lumie-frontend/src/shared/api/serverFetch.ts는 여전히 존재하며 경로 셸, 레이아웃 및 기타 서버 측 ID 확인을 위해 getServerUser()에서 계속 사용됩니다. 반전은 SSR을 전면적으로 거부하는 것이 아니라 선택적이었습니다.

근본 원인

프런트엔드는 먼저 두 단계를 거쳐 SSR로 이동했습니다.

1ad0cb0는 getServerUser()를 도입하여 일부 인증된 페이지가 서버의 현재 사용자를 읽을 수 있도록 했습니다.
4e997a9는 serverFetch(), resolveBaseUrl() 및 HydrationBoundary 기반 페이지 래퍼를 추가하여 해당 패턴을 인증된 목록 및 세부 경로에 대한 광범위한 SSR 프리페치로 확장했습니다.

해당 확장은 로그인 제한 페이지의 잘못된 문제를 해결했습니다. 이러한 경로는 자체 로딩 상태를 갖는 클라이언트 기능에 의해 이미 렌더링되었으며 크롤러나 캐시 가능한 HTML이 중요한 공개 페이지가 아니었습니다. 그 결과 사용자가 거의 이득을 얻지 못한 채 요청당 추가 서버 작업을 수행하게 되었습니다.

438adc1는 여전히 그 기간의 중요한 교훈입니다. SSR이 도입된 후 서버 가져오기 경로는 JWT에서 X-Tenant-Slug를 전파해야 하거나 프런트엔드-백엔드 임대 계약을 위반했습니다.

수정

aae5e48는 인증된 관리자 및 대시보드 목록/세부 정보 경로에 대한 데이터 로드 모델을 반전시켰습니다.

해당 페이지에서 HydrationBoundary, dehydrate 및 prefetchQuery를 제거합니다.
기존 클라이언트 기능이 기본 데이터를 다시 가져오도록 허용
공개 마케팅 페이지, 테넌트 랜딩 페이지, 서버 측 사용자/세션 셸 등 여전히 혜택을 받는 표면에 대해 SSR을 유지합니다.

나중에 인증 강화를 통해 해당 반전을 안전하게 유지했습니다. 액세스 토큰이 만료되면 현재 proxy.ts는 lumie_refresh_token로 대체됩니다. 이는 만료 후 첫 번째 탐색에서 사용자가 로그인하도록 반송하는 대신 클라이언트 측 새로 고침 흐름 시간을 제공하여 세션을 갱신합니다.

예방 및 검증

페이지가 공개 SEO 요구사항 없이 TanStack 쿼리를 사용하여 클라이언트 기능에 이미 위임된 경우 CSR에 대한 기본 인증 목록 및 세부 정보 페이지입니다.
서버 렌더링이 실질적으로 유용한 ID, 레이아웃 및 공개 경로 사례에 대해 SSR을 유지합니다.
소스의 경계를 확인하십시오.
- lumie-frontend/app/admin/students/page.tsx는 서버 측 프리페치가 없는 StudentList를 둘러싼 일반 래퍼입니다.
- lumie-frontend/e2e/ssr/ssr-regression.spec.ts는 인증된 경로에서 클라이언트 측 가져오기를 기대합니다.
- lumie-frontend/src/shared/api/serverFetch.ts는 남아 있는 더 좁은 서버 측 사례에 대해 여전히 존재합니다.

증상​

진단​

근본 원인​

수정​

예방 및 검증​

증상

진단

근본 원인

수정

예방 및 검증