(翻訳)SSGって何?Next.js記述を使用した静的サイトの作成

原文:https://dev.to/anshuman_bhardwaj/what-the-heck-is-ssg-static-site-generation-explained-with-nextjs-5cja
Web開発者で、世界から隔絶されていない場合は、「SSG」という流行語に触れたことがあるかもしれません.
次の5分間で「SSG」の基礎を学びます.

Static Site Generation(SSG)とは?

静的サイト作成(SSG,Static Site Generation)は、構築時の反応アプリケーションをHTMLとしてプレビューします.

もう一度よく見てみましょう.理想的には、応答アプリケーションはクライアントによってレンダリングされます.つまり、ブラウザはまずJavaScriptパッケージをダウンロードし、コンテンツを表示する前にダウンロードしたJavaScriptパッケージを実行します.遅いでしょう?実は遅い
HTMLを使用してプリレンダリングを行うと、リアクションコンポーネントをHTMLファイルに変換し、大量の処理や帯域幅を使用せずにユーザーに迅速に表示できるようにクライアントにHTMLファイルを送信できます.
「サーバー側レンダリングじゃないの?」こんなに好奇心を持って
はい、そうです.SSGの静的(Static)は、SSRのように各ユーザ要求においてプロセス全体を実行するのではなく、構築時に実行される.そのため、SSGはサーバ側よりもレンダリングが高速です.
つまり、SSGは構築時にレスポンスアプリケーションでHTMLページを作成するので、すべてのリクエストに対してHTMLページを作成する必要はなく、クライアントのブラウザでHTMLページを作成する必要もありません.

なぜSSGが必要なのですか?

SSGは、応答に組み込まれたダイナミックなページをHTML形式で提供し、特定の使用例を提供します.
何のメリットがあるんだ?

SEO:検索エンジンの最適化は、スクロールがページを簡単にインデックスできるため、SSGを実行する最大の利点の一つです.

速度:ご存知のように、ブラウザは事前に大量の処理を必要としないため、HTMLページを提供する速度はずっと速いです.プリレンダリングにより、ブラウザは簡単にHTMLをインポートしてすぐにレンダリングできます.

CDNキャッシュを使用:HTMLページを構築することで、CDNキャッシュが魅力的になります.ページストレージはグローバルユーザーに近いため、アクセス速度が速くなります.すべてのリクエストは、サーバがページをレンダリングするのを待つ必要はありません.CDNからページを受信するだけで、計算リソースとコストを節約できます.

使用例

構築時にページをレンダリングできる限り、SSGはどんな場合でも使用できます.以下は人気のあるSSGの使用例です.

マーケティングサイト

ブログとドキュメント(私のブログなど)

ポートフォリオWebサイト

ヒント:「ユーザーが要求する前にページをプレビューできますか?」これは問題です.答えが「はい」の場合は、「Static Generation」を選択できます.

SSGのNext。jsの使用

Next.jsを使用して静的ページを作成するのは簡単です.これは、他のページを作成する機能とよく似ています.つまり、pagesディレクトリに新しいファイルを作成します.

静的パスの静的ページ

まず、静的経路./pages/first-ssg.tsxが作成される.
ページは構築時にレンダリングされるので、レンダリング前にNextを使用してください.jsはすべてのデータをインポートする必要があります.Next.jsは、構築時に実行されるページ上で導出されたgetStaticPropsメソッドを検索する.このメソッドは、ページコンポーネントに渡されるpropsキーを持つオブジェクトを返す必要があります.getStaticPropsを使用して、ページのレンダリングに必要な情報を取得します.例えば、会社ログインページを作成する際に、getStaticPropsを使用してAPIエンドポイントから会社の詳細を取得することができる.

// ./pages/first-ssg.tsx
import type { NextPage } from "next";

export async function getStaticProps() {
  // get all the data needed for rendering the page
  const data = await fetchPageData();
  return {
    props: { data },
  };
}

const FirstSSG = ({ data }) => {
 return (
      <main>
        {/* more html content */}
      </main>
 )
}

export default FirstSSG;

注意:getStaticPropsは、構築時に要求でない場合に実行されるため、入力された要求(クエリーパラメータ、HTTPヘッダなど)にアクセスできません.

ダイナミックパスの静的ページ

動的パス./pages/[id].tsxを作成します.getStaticPropsとは異なり、次のステップは、ページ上の特定のデータに使用される.jsは、このパスの可能なすべてのパスを決定する必要があります.次はjsは、構築時にこれらのパスのページをレンダリングする必要があります.
次へ.jsは、構築時の動的ルートディレクトリの可能なすべてのパスをリストするためにgetStaticPathsの方法を必要とする.たとえば、動的ブログページの場合は、使用可能なすべてのブログをパスとしてリストする必要があります.getStaticPathsから返されるpathsは、getStaticPropsによって渡されるparamsオブジェクトを含む.params(例えばblog slugまたはid)を使用して、パスに関するデータを渡すことができる.以降、getStaticPropsからページに関するデータを取得することができる.

// ./pages/[id].tsx
import type { NextPage } from "next";

export async function getStaticPaths() {
  return {
    paths: [
      { params: { ... } }
    ],
    fallback: // true or false or 'blocking', to be discussed later
  };
}

export async function getStaticProps({ params }) {
  // 페이지를 렌더링하는 데 필요한 모든 데이터를 가져옵니다.
  const data = await fetchPageData(params);
  return {
    props: { data },
  };
}

// page layout
const FirstSSG = ({ data }) => {
 return (
      <main>
        {/* more html content */}
      </main>
 )
}

export default FirstSSG;

Next.jsを使用して静的Webサイトを構築するには、それだけです.
すべてが美しくなるはずがない.そうですね.いくつかの罠について話しましょう.

わなにかける

法の最大の欠点の1つは構築時間である.数千ページある場合は、すべてのページを構築するのに多くの時間がかかります.インクリメンタル・ステータス・リカバリ(ISR)およびfallbackのプロパティを使用して、このような状況を回避できます.以下で説明し、表示できます.

で発生する可能性のあるもう一つの問題は、古いページです.構築時にページデータがインポートされるため、時間は最新のデータではない可能性があります.したがって、コンストラクションを保持するか、特定の時間間隔でコンストラクションをトリガーして、データが最新であることを確認する必要があります.この問題は、インクリメンタル・ステート・リカバリ(ISR)によっても解決できます.この場合、ルートディレクトリは、静的ページではなくサーバ側のレンダリングを考慮する必要があります.

ロールバック・オプション

前述したように、getStaticPathsから戻ることができ、getStaticPathsで返されないパスリスト内のパスについて.

fallbackオプションは、コンストラクション時にレンダリングされたパスを再生または更新することなく、コンストラクション時に事前にレンダリングされていないパス上でのみ動作します.fallbackオプションは、数千ページのアプリケーションに役立ち、構築時間を短縮しながらユーザー体験を最大限に維持できます.

Next.なぜjsを使うのですか?

私は次のjsには2つのプリファレンスがあります.
1.サーバ側レンダリング
2.静的サイトの作成(SSG)
必要に応じて2つのオプションを選択して開発できます.
また、Vercelクラウドプラットフォームとの統合(Integration)も提供され、映像キャッシュとCI/CDを無料で使用できます.
ここまでです.増分状態回復(ISR)に関するもう一つの記事を書きます.この文章が役に立つことを望みます!フィードバックや質問があれば、いつでもメッセージを残してください.同様の記事が必要な場合は、ツイッターに注目してください.
原文はhttps://dev.to2年3月21日に発表された.
🚀 韓国語版の先端アートを素早く受け取りたい場合は、Korean FE Article(https://kofearticle.substack.com/)を購読してください!