Open8

Next.js

next/script

スクリプトの読み込みをしてくれる。

https://qiita.com/eyuta/items/570ae6b9f69df64236c1#nextscriptの最適化

strategyプロパティ

  • beforeInteractive js実行前(ページがアクティブになる前)に読み込み
  • afterInteractive ページがアクティブになった後
  • lazyOnload アイドル中に読み込み
<Script
  src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.map"
  strategy="beforeInteractive" // lazyOnload, afterInteractive
  onLoad={() => {
    // ロードが成功した後に実行する処理
  }}
/>

<a>タグではなくLinkコンポーネントを使うと、クライアントサイドのjsでページ遷移を行ってくれる。
これにより、ブラウザ全体をロードせず、必要な部分だけを読み込んでくれる。

素のReactとの違いとして、静的なプリレンダリングがある。
Nextはjsをオフにしても最低限のhtmlをレンダリングしてくれるが、Reactはjsをオフにすると全くレンダリングしてくれず、ハイドレーション時にレンダリングを行う

NextはページごとにSGやSSRなどを設定して切り替えることができる!すごい

SGにはデータありのものと、データなしのものがあるが、DBや外部APIなどからデータをフェッチする必要がある場合はgetStaticPropsを利用する。

layoutコンポーネントを作って、そこの<Head>内に<title>を設定すればデフォルト値を設定できる。
上書きする場合は、layoutコンポーネントをimportした各ファイルで再度<title>を定義すればよさそう

<Head>を使ってメタデータを追加する理由として、ページごとに動的にメタデータを変更できる

ログインするとコメントできます