基礎から始めるNext.js【１８SWR 】

基礎から始めるNext.js【１８SWR 】

YouTube: https://youtu.be/tCLzD0xw4dg

https://youtu.be/tCLzD0xw4dg

今回はNext.jsの開発元であるVercel社が開発した「SWR」という
データフェッチ用のライブラリについて解説します。

https://swr.vercel.app/ja/docs/getting-started

こちらはデフォルトの設定では、
データ追加後にアプリを表示しているブラウザのウインドウに
フォーカスを合わせるかタブを切りかえると、
「SWR」 によって自動的にデータを再検証が行われます。

前回取得した古いデータをキャッシュして、新しいデータと違いがある場合に
どんどん新しいデータに差し替えてくれるようなイメージです。

SSGやSSRにも設定できるのですが、
バージョンアップによって実装方法が変わる可能性がありますので、
今回は該当部分のページリンクだけご紹介します。

https://swr.vercel.app/ja/docs/with-nextjs

こちらのSWRと比較されるのが「react-query」になります。

https://tanstack.com/query/v4/?from=reactQueryV3&original=https://react-query-v3.tanstack.com/

興味がある方は参考になさってください。

pages/swr/index.tsx

import Link from 'next/link'
import Layout from '../../components/Layout'
import { Heading } from '@chakra-ui/react'

import { ListItem, UnorderedList } from '@chakra-ui/react'
import axios from 'axios'
import useSWR from 'swr'

const fetcher = (url) => axios.get(url).then((res) => res.data.data)

export default function SWRPage() {
  const { data: posts } = useSWR(`http://localhost:1337/api/posts`, fetcher)

  return (
    <Layout title="Next App TopPage" content="Generated by create next app">
      <Heading as="h1" size="4xl" mb={2}>
        SWR Posts List
      </Heading>
      <UnorderedList>
        {posts &&
          posts.map((post) => (
            <ListItem key={post.id} fontSize={20} mb={1}>
              <Link href={`/clientside/${post.id}`}>
                {post.attributes.title}
              </Link>
            </ListItem>
          ))}
      </UnorderedList>
    </Layout>
  )
}

pages/index.tsx

import Link from 'next/link'
import Layout from '../components/Layout'
import { Heading } from '@chakra-ui/react'

import { ListItem, UnorderedList } from '@chakra-ui/react'

export default function Home() {
  return (
    <Layout title="Next App TopPage" content="Generated by create next app">
      <Heading as="h1" size="4xl">
        Welcome to <a href="https://nextjs.org">Next.js!</a>
      </Heading>
      <UnorderedList>
        <ListItem>
          <Link href={'/hello/1'}>to Hellopage</Link>
        </ListItem>
        <ListItem>
          <Link href={'/clientside'}>to Client Side Fetch</Link>
        </ListItem>
        <ListItem>
          <Link href={'/serverside'}>to Server Side Fetch</Link>
        </ListItem>
        <ListItem>
          <Link href={'/ssg'}>SSG Page</Link>
        </ListItem>
        <ListItem>
          <Link href={'/swr'}>SWR Page</Link>
        </ListItem>
      </UnorderedList>
    </Layout>
  )
}