web-dev-qa-db-ja.com

NextJSサイトのビルド中にのみGetInitialPropsを使用する方法

NextJSを使用して静的サイトを構築するときは、getInitialPropsメソッドがビルドステップ中にのみ起動し、クライアント上ではなくなります。

ビルドステップでは、NEXTJSは getInitialPropsメソッド を実行します。各コンポーネントのレンダリングされたHTMLを使用してページの静的HTMLを生成するために使用されます。クライアントでは、NextJSはまた、コンポーネントに必要な小道具を返すためにページコンポーネントがレンダリングされる前にこのメソッドを実行します。したがって、大規模な要求は、これがブロック要求であるため、クライアントの最初のペイントを遅らせる可能性があります。

// example usage of API call in getInitialProps
import fetch from 'isomorphic-unfetch'

function Page({ stars }) {
  return <div>Next stars: {stars}</div>
}

Page.getInitialProps = async ({ req }) => {
  const res = await fetch('https://api.github.com/repos/zeit/next.js')
  const json = await res.json()
  return { stars: json.stargazers_count }
}

export default Page
 _

静的なHTMLを入力するためにBuildステップ中に返されたデータを使用するために、ブロッキング要求を回避するために、ブロッキング要求を回避するために、スローAPI要求をcomponentDidMountに移動したくない。ビルド後に動的または更新されること。

getInitialProps runのみを作ることができる方法はありますnext exportビルドし、NOTクライアントがページをロードしていますか？

この良い練習ですか？

javascriptnode.jsnext.jsstatic-site
8
brettinternet

@dkmsによる答えを使ってください。これは静的サイトビルドの最良のソリューションです。

昔の答え

三 2つの方法です ページコンポーネントのロード上でgetInitialPropsのコードのコードが実行されないようにすることがわかった方法は1つあります。

1. next/linkなしで通常のアンカータグをそのページに使用します。

getInitialPropsnext/linkコンポーネントからページがリンクされている場合にのみ実行されます。代わりに通常のJSX Anchor <a href="/my-page">click me</a>が使用されている場合は、コンポーネントのgetInitialPropsがではなくの呼び出されます。ダイレクトページNextJS Static Site PagesへのロードはgetInitialPropsを呼び出しません。

next/linkコンポーネントの代わりに標準アンカーを使用すると、フルページの更新が発生します。

これは貧弱な解決策です 私はフィーチャリクエストを送信 。

2. req引数のcontextを使用してgetInitialPropsのAPI呼び出しを行います。

私は@evgenifotiaが何を伝えたいのかを信じていますが、reqはエクスポートされたサイトでは未定義です。

// example usage of API call in getInitialProps
import fetch from 'isomorphic-unfetch'

function Page({ stars }) {
  return <div>Next stars: {stars}</div>
}

Page.getInitialProps = async (ctx) => {
  const { req } = ctx // context object: { req, res, pathname, query, asPath }
  if (req) { // will only run during the build (next export)
    const res = await fetch('https://api.github.com/repos/zeit/next.js')
    const json = await res.json()
    return { stars: json.stargazers_count }
  }

  return {}
}

export default Page

getInitialPropsの詳細については、 ドキュメント を参照してください。一例では、reqがサーバー上でのみ定義されることが予想される（またはエクスポートビルド中）ということを確認します。

const userAgent = req ? req.headers['user-agent'] : navigator.userAgent`

この2番目のオプションは、いくつかのシナリオで機能することがありますが、getInitialPropsから空の結果を返す場所は、コンポーネントのthis.propsに影響します。

注:

浅いルーティングは答えではありません。 ドキュメントに従って （「ノート」の下にある」を参照）。

浅いルーティングは、同じページのURLの変更に対してのみ機能します。

1
brettinternet