基礎から始めるNext.js【１２Data Fetch (SSR1)】

基礎から始めるNext.js【１２Data Fetch (SSR1)】

YouTube: https://youtu.be/aTogfSU4EEo

https://youtu.be/aTogfSU4EEo

今回は「getServerSideProps」を使用して、
サーバーサイドのデータフェッチについて解説します。

こちらはフェッチの処理がサーバーサイドで行われますので
サーバーが国外にある場合等ですと、処理が終わって
レスポンスが返ってくるまで時間がかかってしまいます。

そのような場合は、
サーバーの処理が行われている間ページに空白が表示されないように、
ローダーやスケルトンを使って補強してあげるとよろしいかと思います。

pages/serverside/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 { GetServerSideProps } from 'next'

export const getServerSideProps: GetServerSideProps = async () => {
  const res = await axios.get(`http://localhost:1337/api/posts`)

  return {
    props: {
      posts: res.data.data,
    },
  }
}

export default function ServerSide({ posts }) {
  return (
    <Layout title="Next App TopPage" content="Generated by create next app">
      <Heading as="h1" size="4xl" mb={2}>
        Server Side 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>
      </UnorderedList>
    </Layout>
  )
}