렌더링 모드
Astro 프로젝트 코드를 웹에 표시하려면 HTML로 렌더링해야 합니다.
Astro 페이지, 경로 및 API 엔드포인트는 빌드 시 사전 렌더링되거나 경로가 요청될 때 서버에서 요청 시 렌더링될 수 있습니다. Astro 아일랜드를 사용하면 필요한 경우 일부 클라이언트 측 렌더링을 포함할 수도 있습니다.
Astro에서는 대부분의 프로세스가 브라우저가 아닌 서버에서 발생합니다. 이는 일반적으로 성능이 낮은 장치나 느린 인터넷 연결에서 클라이언트 측 렌더링보다 사이트나 앱을 더 빠르게 만듭니다. 서버에서 렌더링된 HTML은 빠르고 SEO 친화적이며 기본적으로 액세스 가능합니다.
서버 output 모드
섹션 제목: 서버 output 모드output 구성에서 페이지가 렌더링되는 방식을 구성할 수 있습니다.
사전 렌더링
섹션 제목: 사전 렌더링기본 렌더링 모드는 output: 'static'이며, 빌드 시 모든 페이지 경로에 대한 HTML을 생성합니다.
이 모드에서는 전체 사이트가 사전 렌더링되며 서버는 모든 페이지를 미리 빌드하여 브라우저에 보낼 준비를 합니다. 모든 방문자에 대해 동일한 HTML 문서가 브라우저로 전송되며 페이지 내용을 업데이트하려면 전체 사이트를 다시 빌드해야 합니다. 이 방법은 정적 사이트 생성(SSG) 이라고도 합니다.
기본적으로 모든 Astro 프로젝트는 가장 가벼운 브라우저 경험을 제공하기 위해 빌드 시 사전 렌더링(정적으로 생성)되도록 구성됩니다. 서버가 요청 시 페이지를 생성할 필요가 없기 때문에 브라우저는 HTML이 빌드될 때까지 기다릴 필요가 없습니다. 여러분의 사이트는 백엔드 데이터 소스의 성능에 의존하지 않으며 일단 빌드되면 서버가 작동하는 한 방문자가 정적 사이트로 계속 사용할 수 있습니다.
정적 사이트에는 사전 렌더링된 정적 페이지에서 선택한 UI 프레임워크로 작성된 대화형 UI 컴포넌트(또는 내장된 클라이언트 측 렌더링된 앱 전체)를 위한 Astro 아일랜드가 포함될 수 있습니다.
Astro의 View Transitions API는 페이지 탐색 전반에 걸쳐 애니메이션 및 상태 지속성을 위해 static 모드에서도 사용할 수 있습니다. 정적 사이트는 미들웨어를 사용하여 요청의 응답 데이터를 가로채고 변환할 수도 있습니다.
요청 시 렌더링
섹션 제목: 요청 시 렌더링SSR 어댑터를 사용하면, Astro의 다른 두 가지 output 모드는 페이지, 경로 또는 API 엔드포인트 중 일부 또는 전체에 대한 주문형 렌더링을 활성화하도록 구성할 수 있습니다.
output: 'server'대부분 또는 모든 경로가 주문형 경로로 구성된 매우 동적인 사이트를 위한 옵션output: 'hybrid'일부 주문형 경로가 포함된 거의 정적인 사이트를 위한 옵션
방문할 때마다 생성되므로, 이러한 경로는 각 방문자에 맞게 맞춤설정될 수 있습니다. 예를 들어, 요청 시 렌더링된 페이지는 로그인한 사용자에게 계정 정보를 표시하거나 전체 사이트를 다시 빌드하지 않고도 새로 업데이트된 데이터를 표시할 수 있습니다. 요청 시 서버의 주문형 렌더링을 서버 측 렌더링(SSR) 이라고도 합니다.
다음이 필요한 경우 Astro 프로젝트에서 server 또는 hybrid 모드를 활성화시키는 것을 고려해보세요.
-
API 엔드포인트: 중요한 데이터를 클라이언트에게 숨기면서 데이터베이스 액세스, 인증, 권한 부여와 같은 작업을 위한 API 엔드포인트로 작동하는 특정 페이지를 만듭니다.
-
보호된 페이지: 서버에서 사용자 액세스를 처리하여 사용자 권한에 따라 페이지에 대한 액세스를 제한합니다.
-
자주 변경되는 콘텐츠: 사이트를 정적으로 다시 빌드하지 않고도 개별 페이지를 생성할 수 있습니다. 이는 페이지 콘텐츠가 자주 업데이트될 때 유용합니다. 예를 들어
fetch()를 사용하여 동적으로 호출된 API의 데이터를 표시하는 경우입니다.
server 및 hybrid output 모드 모두 선택한 UI 프레임워크에 상호작용을 위한 Astro 아일랜드(또는 전체 내장 클라이언트 측 렌더링 앱!)를 포함할 수 있습니다. 경로 탐색 전반에 걸친 애니메이션 및 상태 보존을 위해 미들웨어와 Astro의 View Transitions API을 사용하면 상호작용이 가능한 대화형 앱을 만들 수도 있습니다.