This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

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

1.0.18 • 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

Readme

Keywords

Package Sidebar

Install

npm i @react-libraries/use-ssr

Weekly Downloads

10

Version

1.0.18

License

MIT

Unpacked Size

30.6 kB

Total Files

13

Last publish

Collaborators

  • sora_kumo