@react-libraries/use-ssr

overview

Next.js hook for using external data with SSR The difference with 'getStaticProps' is that the same code can be used for both the server and the client when receiving external data.

usage

• Use App.getInitialProps to receive the fetch data generated by the component

_app.tsx

import { CachesType, createCache, getDataFromTree } from '@react-libraries/use-ssr'
import { AppContext, AppProps } from 'next/app'

const App = (props: AppProps & { cache: CachesType }) => {
  const { Component, cache } = props
  createCache(cache)
  return <Component />
}
App.getInitialProps = async ({ Component, router, AppTree }: AppContext) => {
  const cache = await getDataFromTree(
    <AppTree Component={Component} pageProps={{}} router={router} />
  )
  return { cache }
}
export default App

• pages/index.tsx

import React from 'react'
import { useSSR } from '@react-libraries/use-ssr'

const Page = () => {
  const [state, setState] = useSSR(
    ['weather', '130000'] /*CacheKeyName*/,
    async (state, setState) => {
      // When this function finishes, the server side will finish processing and SSR will be performed.
      if (state !== undefined) return
      setState(null)
      const result = await fetch(
        'https://www.jma.go.jp/bosai/forecast/data/overview_forecast/130000.json'
      )
      setState(result.json())
    }
  )
  return (
    <div>
      <button onClick={() => setState(undefined)}>Reload</button>
      <pre>{JSON.stringify(state, undefined, '  ')}</pre>
    </div>
  )
}

export default Page