RFC: getInitialProps/getClientSideProps

[hazae41]

IMHO getInitialProps is very useful but complex to re-implement properly and to bundle properly

What I suggest is getServerSideProps, which we already have, combined with a new function named getClientSideProps.

This function would generate the props client-side, just like getInitialProps, but without being compatible with the server

• First page load:
  getServerSideProps is called
• When the user navigates:
  getClientSideProps is called

This way, no request to the server is made each time the user clicks somewhere, especially if the client already has the props in a cache (e.g. swr)

If getClientSideProps is NOT defined, then a request is made and getServerSideProps is called server-side (current behaviour)

The bundling of those two functions is easier than getInitialProps, and their behavior is more understandable and less error-prone

[hazae41]

The problem is that useDeno is a hook that only accepts one function (getServerSideProps/getStaticProps)

[talentlessguy]

there's ssr now, I don't think getServerSideProps makes sense anymore

for example:

export const ssr: SSROptions = {
  props: async ({ params }) => {
    const res = await fetch(`http://example.com`)

    if (res.status !== 200) {
      console.log(await res.text())
      return {}
    }

    const json = await res.json()

    return json as WalletData
  },
  paths: () => {
    return []
  }
}

[ije]

what if we allow to access the Req in useDeno hook?, for example:

export default function Page() {
  const isLogined = useDeno(req => {
    return req.headers.get('Auth') === 'XXX'
  }, { revalidate: true })

  return (
    <p>isLogined: {isLogined}</p>
  )
}

with ssr.props options:

export const ssr: SSROptions = {
  props: req => {
    return {
       $revalidate: true,
       username: req.params.username,
       logined: req.headers.get('Auth') === 'XXX'
    }
  }
}

[talentlessguy]

@ije second options makes more sense since it already exposes request parameters

[hazae41]

The useDeno hook is very clean to use

[hazae41]

@ije second options makes more sense since it already exposes request parameters

We can put params in req

[ije]

updated, and rename revalidate to ttl

[ije]

added in beta.18