[日本語訳]SWR ドキュメンテーション Next.jsと一緒に使用する
追記: 2021年6月8日
SWR公式日本語訳ページが追加されたので、そちらをご覧ください
このページは Usage with Next.js – SWRの日本語訳です
SWR日本語訳全体についてはSWR 日本語訳をご覧ください
クライアントサイド データフェッチ
ページに頻繁に更新されるデータが含まれていて、データを事前にレンダリングする必要がない場合、SWRは最適であり、特別な設定は必要ありません。useSWR
をインポートし、データを使用するコンポーネント内でフックを使用するだけです。
仕組みは次のとおりです。
- まず、データのないページをすぐに表示します。 データのロード状態を表示できます。
- 次に、クライアント側でデータをフェッチし、準備ができたら表示します。
このアプローチは、ユーザーのダッシュボードページに適しています。たとえば、 ダッシュボードはプライベートでユーザー固有のページであるため、SEOは関係なく、ページを事前にレンダリングする必要はありません。 データは頻繁に更新されるため、リクエスト時のデータフェッチが必要です。
プリレンダリング
ページを事前にレンダリングする必要がある場合、Next.jsは次の2つの形式のプリレンダリングをサポートします。
静的生成(SSG)およびサーバーサイドレンダリング(SSR)。
SWRと一緒にSEOのページを事前にレンダリングできます。また、キャッシュ、再検証、フォーカストラッキング、クライアントサイドでの間隔での再フェッチなどの機能もあります。
プリフェッチされたデータを初期値としてinitialData
オプションに渡すことができます。 たとえば、getStaticProps
と一緒に:
export async function getStaticProps() {
// `getStaticProps` はサーバーサイドから呼び出されます
// 従って、この `fetcher` 関数はサーバーサイドで実行されます
const posts = await fetcher('/api/posts')
return { props: { posts } }
}
function Posts (props) {
// ここの `fetcher` 関数はクライアントサイドで実行されます
const { data } = useSWR('/api/posts', fetcher, { initialData: props.posts })
// ...
}
ページはまだプリレンダリングされています。 つまり、SEOに対応しており、キャッシュして非常に高速にアクセスできます。 また、ハイドレーション後はクライアントサイドのSWRが完全なる力を発揮します。 つまり、データは動的であり、時間とユーザーの操作によって更新されます。
💡 上記の例では、fetcher
はクライアントとサーバーの両方からデータをロードするために使用されており、両方の環境をサポートする必要があります。 しかし、これは必須ではありません。 サーバーまたはクライアントからデータをロードするには、さまざまな方法を使用できます。
Author And Source
この問題について([日本語訳]SWR ドキュメンテーション Next.jsと一緒に使用する), 我々は、より多くの情報をここで見つけました https://qiita.com/tk1024/items/5a7c0171fb0f09c43f13著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .