[컴] gatsby js 에서 server side rendering 하는 page 생성

 

게츠비 / 개츠비 / ssr / gatsbyjs / getsbyjs

gatsby js 에서 server side rendering 하는 page 생성

1. export async function getServerData 가 있어야만 한다.
2. return 에 props로 보내는 값이 serverData로 넘어가게 된다.

import * as React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import Seo from "../components/seo"

const PageSSR = ({ serverData }) => {
  return (
    <div>
      <h1>SSR page</h1>
      <img
        alt="A random dog"
        src={serverData.message}
      />
      <Link to="/">Go back to the homepage</Link>
    </div>
  )
}

export default PageSSR

export async function getServerData() {
  try {
    const res = await fetch(`https://dog.ceo/api/breeds/image/random`)
    if (!res.ok) {
      throw new Error(`Response failed`)
    }
    return {
      props: await res.json(),
    }
  } catch (error) {
    return {
      status: 500,
      headers: {},
      props: {},
    }
  }
}

References

1. Server-Side Rendering API | Gatsby