[Next.js] - Pre-Rendering

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とを経路によるページ切り替え

そのため、より多くのネットワーク通信が