レンダリング方式
- next:
nextは、静的サイト生成、サーバーサイドレンダリング、クライアントサイドレンダリングを組み合わせることができます。 - astro:
astroは、静的なHTMLを生成しつつ、必要に応じてコンポーネント単位でJavaScriptをロードすることができます。 - gatsby:
gatsbyは、静的サイト生成を行い、GraphQLを使用してデータを取得します。 - @11ty/eleventy:
@11ty/eleventyは、主に静的なHTMLファイルを生成しますが、動的なデータもテンプレートに組み込むことができます。
データ取得
- next:
nextは、静的生成、サーバーサイドレンダリング、クライアントサイドレンダリングのいずれでもデータを取得できます。 - astro:
astroは、静的なデータと動的なデータを組み合わせて使用することができます。 - gatsby:
gatsbyは、GraphQLを使用して、複数のデータソースからデータを取得します。 - @11ty/eleventy:
@11ty/eleventyは、ファイルシステムやAPIからデータを取得し、テンプレートに埋め込むことができます。
プラグインエコシステム
- next:
nextは、公式およびコミュニティによる多くのプラグインや拡張機能があり、特に画像最適化や国際化に強みがあります。 - astro:
astroは、コンポーネントベースのプラグインエコシステムを持ち、特にUIコンポーネントに焦点を当てています。 - gatsby:
gatsbyは、非常に豊富なプラグインエコシステムを持ち、SEO、画像最適化、データ取得など、さまざまな機能を簡単に追加できます。 - @11ty/eleventy:
@11ty/eleventyは、シンプルなプラグインシステムを持ち、カスタムフィルターやタグを簡単に追加できます。
SEO対策
- next:
nextは、動的なページと静的なページの両方でSEO対策が可能で、Headコンポーネントを使用してメタタグを簡単に管理できます。 - astro:
astroは、静的なHTMLを生成するため、SEOに優れています。 - gatsby:
gatsbyは、SEO対策に特化したプラグインが豊富で、構造化データやメタタグの設定が容易です。 - @11ty/eleventy:
@11ty/eleventyは、手動でメタタグや構造化データを追加する必要がありますが、柔軟性があります。
コード例
- next:
nextの基本的な使用例// pages/index.js const Home = () => { return ( <div> <h1>Hello, Next.js!</h1> <p>Welcome to my static site.</p> </div> ); }; export default Home; - astro:
astroの基本的な使用例<!-- src/pages/index.astro --> --- const title = 'Hello, Astro!'; --- <html> <head> <title>{title}</title> </head> <body> <h1>{title}</h1> </body> </html> - gatsby:
gatsbyの基本的な使用例// src/pages/index.js import React from 'react'; const IndexPage = () => { return ( <div> <h1>Hello, Gatsby!</h1> <p>Welcome to my static site.</p> </div> ); }; export default IndexPage; - @11ty/eleventy:
@11ty/eleventyの基本的な使用例<!-- index.html --> <!DOCTYPE html> <html> <head> <title>My Eleventy Site</title> </head> <body> <h1>Hello, Eleventy!</h1> <p>Welcome to my static site.</p> </body> </html>