Astro 7.1の新機能｜CSPとページ分割を初心者向けに解説

この記事でわかること

• Astro 7.1で追加された主な新機能
• CSPの細かい制御が何に役立つのか
• paginateのformatでページ分割URLを調整する考え方
• --ignore-lockを使う場面と注意点
• 大きなコンテンツサイトでdeferRenderを検討する理由

結論・重要ポイント

1. Astro 7.1は、速さよりも「制御しやすさ」を広げるアップデートです。
2. CSPでは、インラインのscriptやstyleをより細かく扱えるようになりました。
3. paginateのformatを使うと、ページ分割URLを公開環境に合わせて変換できます。
4. --ignore-lockは2つ目の開発サーバーを意図的に起動したいときのための例外指定です。
5. deferRenderは、大きなコンテンツコレクションのメモリ使用量を下げたいときに検討します。

対象読者と前提知識

この記事は、Astroでブログやコーポレートサイトを作っていて、Astro 7.1の発表を見たものの、どの機能を自分のサイトで気にすればよいか迷っている初学者向けです。

前提知識は、Astroプロジェクトにastro.config.mjsがあること、npm run devやnpm run buildのような開発コマンドを見たことがある程度で問題ありません。実際の更新作業では、公式アップグレードガイドと既存設定の差分確認を先に行ってください。

3人による授業形式の会話

コード・操作手順・具体例

1. 更新前に現在のバージョンを確認する

まず、今のAstroバージョンを確認します。次の例は確認用です。この記事内では実行確認していません。

npm list astro

更新するときは、公式発表だけでなく、既存サイトのpackage.json、astro.config.mjs、ビルドログを見てから判断します。

2. Astroを更新する場合の例

公式発表では、自動アップグレードCLIまたは手動更新が案内されています。実際に実行する前に、作業ツリーを保存し、差分を戻せる状態にしてください。

npx @astrojs/upgrade

手動で更新する場合の例です。

npm install astro@latest

依存関係を変更するコマンドなので、業務サイトでは先に検証環境で試すのが安全です。

3. paginateのformatでURLを調整する

静的な.htmlファイルとして公開する構成では、ページ分割リンクも.html付きにしたい場合があります。paginateのformatは、生成されたURL文字列を受け取り、公開先に合う形へ変換するための関数です。

export async function getStaticPaths({ paginate }) {
  const posts = await getPosts();

  return paginate(posts, {
    pageSize: 10,
    format: (url) => `${url}.html`,
  });
}

この例は考え方を示すためのものです。実際には、サイトのbuild.format、ホスティング先のURL書き換え、既存リンクの形に合わせて調整します。

4. 2つ目の開発サーバーを一時的に起動する

Astro 7.1では、意図的に2つ目の開発サーバーを起動したいときに--ignore-lockを使えます。

astro dev --ignore-lock

この指定で起動したサーバーは独立して動くため、通常の管理コマンドから見えない場合があります。使うときは、どのポートで起動したか、いつ止めるかをメモしておくと混乱を防げます。

5. 大きなコンテンツコレクションでdeferRenderを検討する

記事数やドキュメント数が多いサイトでは、コンテンツ同期時にメモリを多く使うことがあります。deferRenderは、同期時にすべてを先にレンダリングせず、必要になったタイミングで処理する選択肢です。

import { defineCollection } from "astro:content";
import { glob } from "astro/loaders";

const docs = defineCollection({
  loader: glob({
    pattern: "**/*.md",
    base: "src/content/docs",
    deferRender: true,
  }),
});

小規模サイトでは急いで入れる必要がない場合もあります。ビルド時間、メモリ使用量、ページ数の増え方を見て判断するのが現実的です。

よくある誤解や失敗

最新版なら必ず更新すべきと思い込む

新機能が便利でも、既存サイトの設定や連携サービスによっては検証が必要です。特に、CSP、画像最適化、MDX、プラグイン周辺はビルド結果と公開後の表示を確認しましょう。

CSPをエラー消しのためだけに緩める

CSPの警告やエラーを消したいからといって、広く許可しすぎるのは危険です。どのスクリプトやスタイルが必要なのかを確認し、必要最小限の指定にします。

paginateのURLと公開環境を分けて考えない

ローカルではリンクできても、本番環境のファイル配置やURL書き換えと合わなければ、ページ分割リンクが切れることがあります。formatは、そのズレを調整するための選択肢です。

ignore-lock指定を普段使いにする

--ignore-lockは、意図的に2つ目の開発サーバーを起動したいときの例外です。普段は、既存サーバーが残っていないか、どのポートを使っているかを確認する方が分かりやすくなります。

Q&A

Astro 7.1は初心者でも気にした方がよいですか？

Astroでサイトを作っているなら、概要は知っておくとよいです。ただし、全機能をすぐ使う必要はありません。まずは、CSP、ページ分割、開発サーバーの扱いが自分のサイトに関係するかを確認しましょう。

CSPを設定すれば安全になりますか？

CSPは安全性を高める仕組みのひとつですが、設定すればすべて解決するものではありません。入力値の扱い、依存関係の更新、不要なスクリプトを入れないことも合わせて考えます。

paginateのformatは全サイトで必要ですか？

必要とは限りません。公開環境が/blog/2のようなクリーンURLを正しく扱えるなら、そのままで問題ない場合もあります。.html付きのURLが必要な環境で役立つ機能です。

deferRenderは入れた方が速くなりますか？

必ず速くなるとは限りません。同期時のメモリ使用量を下げたい大きなコンテンツコレクションで検討する機能です。小規模サイトでは、入れる前後のビルドログを比べて判断します。

要点まとめ

• Astro 7.1は、公開環境や運用に合わせた細かい調整をしやすくするアップデートです。
• CSPは、安全性を意識しながら必要な範囲だけ許可することが大切です。
• paginateのformatは、ページ分割URLを公開環境に合わせるために使えます。
• --ignore-lockは一時的な2つ目の開発サーバー向けで、普段使いには注意が必要です。
• deferRenderは、大きなコンテンツサイトでメモリ使用量を下げたいときの選択肢です。

授業に登場する3人については、MAO先生のIT授業 キャラクター紹介で確認できます。

公式資料・参考資料

• Astro 7.1 公式発表
• Astro 7.0 公式発表
• Astro Configuration Reference
• Astro API Reference
• MDN: Content-Security-Policy

内容に合うCTA

Astroサイトは、バージョン更新そのものよりも、更新前後の差分確認、ビルド、表示、セキュリティ設定の見直しが大切です。

MAO工房では、Astroで作られたホームページやブログの運用改善、ページ分割、CSP、ビルドエラーの切り分けを、小規模事業者様にも分かる形で整理します。更新作業に不安がある場合は、現在の構成を確認したうえで安全な進め方から相談できます。