@react-libraries/use-ssr
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.15 • Public • Published

    @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

    Install

    npm i @react-libraries/use-ssr

    DownloadsWeekly Downloads

    4

    Version

    1.0.15

    License

    MIT

    Unpacked Size

    15.6 kB

    Total Files

    6

    Last publish

    Collaborators

    • sora_kumo