렌더링 방식을 선택할 때는 방식의 이름보다 무엇이 언제 바뀌는지 먼저 적으면 판단하기 쉽습니다. 본문이 매일 바뀌는지, 표시가 사용자마다 다른지, 조작 후의 반응이 중요한지 나눠 생각합니다.
1. HTML을 만드는 시점으로 비교하기
| 방식 | 주된 시점 | 선택할 때 확인할 질문 |
|---|---|---|
| SSG | 빌드 시 HTML 생성 | 재빌드로 업데이트를 반영할 수 있는가 |
| SSR | 요청 시 서버에서 생성 | 사용자별 값이 초기 화면에 필요한가 |
| CSR | 브라우저에서 화면 구성·갱신 | 여러 조작이 연속되는 화면인가 |
| ISR | 저장된 페이지를 조건에 따라 재생성 | 조금 오래된 표시를 허용할 수 있는가 |
Astro의 온디맨드 렌더링은 정적 생성과 요청 시 생성을 페이지 단위로 다루는 방법을 설명합니다. Next.js의 ISR은 캐시와 재생성을 사용하는 기능이며, 다른 프레임워크에 같은 설정이 있다고 가정해서는 안 됩니다.
2. 아일랜드는 조작이 필요한 부분을 나누는 설계
Astro의 아일랜드는 정적인 내용과 조작용 컴포넌트를 나눕니다. 예를 들어 긴 설명은 HTML로 표시하고, 검색이나 필터링이 필요한 부분에 브라우저 측 처리를 추가하는 설계입니다.
3. React Server Components와 SSR의 차이
React 공식 문서의 Server Components는 클라이언트와 별도의 환경에서 실행하는 컴포넌트를 다룹니다. 빌드 시에도 서버 측에서도 실행할 수 있으며, 사용하는 프레임워크의 구성에 따라 동작이 달라집니다. SSR의 다른 이름으로 이해하면 데이터 조회와 조작용 컴포넌트의 경계를 놓치기 쉽습니다.
4. 간단한 판단표 만들기
- 업데이트 주기와 오래된 정보를 허용할 시간을 적습니다.
- 로그인 상태에 따라 바뀌는 항목을 나눕니다.
- 초기 표시가 필요한 내용과 나중에 가져올 내용을 구분합니다.
- 조작이 필요한 컴포넌트를 열거합니다.
- 호스팅 환경과 캐시 갱신 방법을 확인합니다.
같은 사이트에서도 설명 페이지와 사용자 대시보드에 적합한 구성은 다릅니다. 방식을 선택한 다음에는 같은 연결 조건에서 초기 표시, 조작 응답과 업데이트 반영을 확인하세요.