[Next.js] - Pre-Rendering

6683 ワード
next.js React typescript テキストリンク

Pre-Rendering


  • Next.jsフレームワークのデフォルトはPre-Renderingです

  • プリレンダリングによるhtmlの生成

  • ✅ fater performance

  • 最適化┑SEO:公開されたhtmlをSEO botに転送

    • YouTube-codevolution
  • Pre-Render JavaScriptエンジンをロードする前にhtmlを静的状態にロードしておく

  • Javascriptをロードすると、アプリケーションは動的操作を有効にします.
    • Next.js App code source :

    React.jsアプリケーションとは異なり、コードソースを開くとhtmlラベルが予めロードされていることがわかります

    HOW ?


    🤔 Next.jsフレームワークにプリレンダリングを適用する方法


  • Static Generation

  • SSR - Server Side Rendering

    • Static Generation

  • 2Pre-Renderingに生成するhtmlページ
    • 🟢 Production Server :

  • アプリケーション構築時に事前に完了する方法

  • 構築には1回のbuild timeしか必要ありません

  • 導入後に変更できません
    • 🟣 Development Server :
  • Pre-Renderを実行する開発環境では、変更された要素を直ちにチェックする必要があります.

  • すべてのリクエストyarn dev

    • Static Generation & Data

    Pre-Render :
    const UserList: FC<Props> = ({ users }) => {
  return (
    <div>
      <h1>List of Users</h1>
      {users.map((user) => (
        <div key={user.id}>
          <p>
            {user.name} : {user.email}
          </p>
        </div>
      ))}
    </div>
  );
};

export async function getStaticProps() {
  const response = await fetch("https://jsonplaceholder.typicode.com/users");
  const data = await response.json();
  console.log(data);

  return {
    props: {
      users: data,
    },
  };
}

  • ≪構築時に固定された値｜Fixed values on build｜oem_src≫:主に構築後に変更する必要のないデータに使用されます.

  • サービスおよびSSRの構築に必要な固定データの前に、getStaticPropsにインポート

  • ¥データFetchingサービスでは利用できません
  • Pre-Rendering:構築時に実行される関数:ブラウザではなく端末に出力

  • getStaticPropsは、console.log()をキーとする座標体を返さなければなりません.

    • Link Pre-fetching

  • propsバージョンgetStatePropsでは、次のステップに進みます.jsは、HTMLファイルおよびその他の結果を含むJSONオブジェクトを生成します.pre-render
  • getStatePropsnext/linkを通過するためのnext/router

  • 利用データがclient-side routingのpre-fetchingと、propsのclient-side-renderingとを経路によるページ切り替え

  • そのため、より多くのネットワーク通信が
    • 開発辞書
    getterとsetterとcall関数