Astro 7.4는 astro build --timings로 빌드 단계별 소요 시간을 보여주고, 사전 렌더링 페이지와 요청 시 렌더링 페이지에 서로 다른 이미지 서비스를 지정할 수 있게 했다. 사용자 지정 서버 진입점을 위한 404 처리기도 추가했으며, 최소 지원 Node.js 버전은 22.22.0으로 올랐다.
--timings 보고서는 빌드 단계와 Vite 플러그인, 페이지 렌더링, 이미지 처리 등에 걸린 시간을 보여준다. Astro 팀이 블로그 스타터에 댓글과 작성자 프로필을 가져오는 컴포넌트를 추가한 사례에서는 페이지 생성에 2.10초가 걸렸고, 보고서를 통해 블로그 레이아웃의 컴포넌트 렌더링이 주요 병목임을 확인했다. 댓글과 프로필을 Promise.all()로 함께 가져오도록 바꾸자 페이지 생성 시간은 1.13초로 줄었고 블로그 게시물별 렌더링 시간도 절반으로 감소했다. 이 수치는 해당 사례에 한정된다. 자세한 내용은 --timings 문서에서 확인할 수 있다.
이미지 설정에는 빌드용 build 서비스와 런타임용 runtime 서비스를 각각 지정할 수 있다. 빌드용 서비스는 사전 렌더링 페이지의 이미지를 생성하며 개발 중에도 사용된다. 런타임 서비스는 요청 시 렌더링 페이지와 프로덕션 이미지 엔드포인트를 처리한다. 단일 서비스 설정도 이전처럼 사용할 수 있다. 이에 따라 @astrojs/cloudflare도 다른 어댑터와 같은 Astro 이미지 처리 파이프라인을 통해 사전 렌더링 페이지의 이미지를 처리한다.
astro/fetch와 astro/hono에서 제공하는 notFound()는 pages() 앞에 추가하면 일치하는 경로가 없을 때 사용자 지정 404.astro 페이지를 렌더링한다. 직접 핸들러를 조합하는 경우에 사용하며, astro()에는 이미 이 동작이 포함돼 있다. 자세한 내용은 notFound() 참조 문서를 참고하면 된다.
글꼴 제공자는 선택 사항인 getFontProperties() 콜백으로 실제 제공하는 굵기, 스타일, 문자 집합, 형식을 알릴 수 있다. Astro는 설정한 값 중 제공할 수 없는 항목에 경고를 표시한다. Astro 내장 글꼴 제공자는 모두 이를 지원하며, 사용자 지정 제공자에서는 Astro 7에서 선택 사항이지만 Astro 8부터 필수다.
정적 페이지를 워커 스레드에서 렌더링하는 실험 기능 experimental.parallelPrerender도 추가됐다. 기본 설정은 사용 가능한 CPU 코어에서 하나를 뺀 수만큼 워커를 사용한다. 워커마다 메모리 사용량이 늘어나므로 메모리가 부족하거나 속도가 빨라지지 않으면 워커 수를 낮출 수 있다. 어댑터가 자체 사전 렌더링 방식을 제공하면 이 기능은 적용되지 않는다. 공식 어댑터 중 해당하는 것은 @astrojs/cloudflare뿐이며, 이 경우 Astro가 빌드 중 경고를 표시한다. 자세한 내용은 병렬 사전 렌더링 문서에서 확인할 수 있다.
정적 빌드에서 리디렉션은 서버의 HTTP Location 헤더 대신 메타 새로고침 태그를 포함한 HTML 페이지로 만들어진다. 실험 기능 experimental.redirectPage를 켜면 src/pages/3xx.astro를 사용해 이 페이지의 표시와 문구를 직접 구성할 수 있다. 페이지에는 목적지로 이동하는 메타 새로고침 태그가 있어야 한다. 빠져 있으면 Astro가 경고하고 기본 페이지로 대체한다. 요청 시 렌더링되는 페이지의 리디렉션 동작은 바뀌지 않는다. 자세한 내용은 사용자 지정 리디렉션 페이지 문서와 RFC를 참고하면 된다.
Astro와 공식 통합의 최소 지원 Node.js 버전은 22.22.0이다. 이전 Node.js 22 버전을 사용한다면 Astro를 올리기 전에 Node.js를 업데이트해야 한다. 변경은 Node.js 지원 정책에 따른다. 기존 프로젝트는 @astrojs/upgrade CLI 도구로 업그레이드할 수 있으며, 전체 변경 사항은 변경 기록에서 확인할 수 있다.
부록: 원문 예시
---import type { RedirectPageProps as Props } from 'astro'; const { from, to, status, delay } = Astro.props;--- <html lang="en"> <head> <meta http-equiv="refresh" content={
} /> <meta name="robots" content="noindex" /> <title>Redirecting…</title> </head> <body> <p>This page has moved. <a href={to}>Continue to {to}</a>.</p> </body></html>
댓글 (0)
로그인하면 이 기사에 내 생각을 남길 수 있어요