MPA

MPAを分かりやすく

MPA（Multi-Page Application）は、各ページが独立してロードされ、異なるHTMLドキュメントとして存在するウェブアプリケーションのデザインアプローチです。伝統的なウェブサイト設計パラダイムであり、各ページは独自のURLを持ち、通常はサーバー側でHTMLが生成されます。MPAはウェブの初期の日々から存在し、その後のSPA（Single Page Application）の出現までウェブアプリケーションの主流でした。

MPAのメリット

SEO対策

MPAでは各ページが独立したHTMLドキュメントとして存在するため、それぞれに独自のメタタグやSEO対策を施すことが可能です。これは特定のページを検索エンジン最適化（SEO）のために調整したい場合に有効です。

サーバーサイドレンダリング

MPAはサーバーサイドでHTMLを生成するため、クライアントサイドでのレンダリングを待つことなく、ユーザーに初期ページをすぐに表示することが可能です。これはユーザーエクスペリエンスの向上につながります。

開発の分割

大規模なプロジェクトでは、各ページを独立したモジュールとして扱い、開発を分割することが可能です。これにより、各チームが独立して作業を進めることができます。

MPAの実装

Astroでは、各ページを独立した.astroファイルとして定義します。以下に、Astroを使用してホームページとAboutページを作成する例を示します。まず、Astroの新規プロジェクトを作成します。src/pagesディレクトリ内に各ページを表す.astroファイルを作成します。例えば、ホームページとAboutページを作成する場合、以下のようになります。

index.astro

// src/pages/index.astro
---
import { Astro } from 'astro';

type HomeProps = {
  message: string
}

const Home: Astro.Component<HomeProps> = ({ message }) => {
  return (
    <div>{message}</div>
  );
};

export default Home;
---
<Home message="Welcome to the Home Page!" />

about.astro

// src/pages/about.astro
---
import { Astro } from 'astro';

type AboutProps = {
  info: string
}

const About: Astro.Component<AboutProps> = ({ info }) => {
  return (
    <div>{info}</div>
  );
};

export default About;
---
<About info="This is the About Page" />

上記のようにしてAstroでMPAを実装すると、各ページは独立したURLを持ち、それぞれが独立したHTMLドキュメントとして存在します。AstroはサーバーサイドでHTMLを生成するため、クライアントサイドでのレンダリングを待つことなく、ユーザーに初期ページをすぐに表示することが可能です。これはユーザーエクスペリエンスの向上につながります。