GetStaticPaths, getStaticPaths, and getServerSideProps

Next. Js 9.3 introduces the following three apis:

• getStaticProps
• getStaticPaths
• getServerSideProps

The premise of knowledge

SSG

Next. Js routes based on the file name in the pages directory

getInitialProps

GetInitialProps is an API that runs before the page is rendered. If the request is included in the path, the request is executed and the required data is passed to the page as props. (In fact, sometimes there are side effects such as sending logs that don’t affect HTML.) As with all three apis, you can only use them in files within the Pages folder. GetInitialProps is an SSR-specific API, which is a misconception. After direct access, getInitialProps will run on the server side. Client routing using next/link, on the other hand, is performed on the client. Therefore, fetch libraries such as Isomorphic-unFETCH are recommended.

// Pages /stars.js // Used to import fetch from client and server'isomorphic-unfetch'// getInitialProps returns the data starsfunction Stars({ stars }) {
  return<div>Next stars: {stars}</div>} stars.getInitialprops = async () => {const res = await fetch()'https://api.github.com/repos/zeit/next.js')
  const json = await res.json()
  return { stars: json.stargazers_count }
}

export default Stars
Copy the code

getStaticProps

GetStaticProps is an API for pre-performing the processing done by getInitialProps at build time and pre-generating static files. Will not run on the client. Always run on the server side.

/ / pages/buildTimeStars js / / not client runs import fetch the from'node-fetch'// getStaticProps returns stars, build_timefunction BuildTimeStars({ stars, build_time }) {
  returnWhen the < div > ビ ル ド ({build_time}) の Next の star number は : {stars} < / div >} / / in the build runexport async function getStaticProps() {
  const res = await fetch('https://api.github.com/repos/zeit/next.js')
  const json = await res.json()
  const stars = json.stargazers_count
  const build_time = new Date().toString();

  return {
    props: {
      stars,
      build_time
    },
  }
}

export default BuildTimeStars
Copy the code

Dynamic Routes

Add a parenthesis [] to the file name in the Pages folder to enable dynamic routing. (pages/posts/[pid].js)

//pages/posts/[pid].js
import { useRouter } from 'next/router'

const Post = () => {
  const router = useRouter()
  const { pid } = router.query

  return <p>Post: {pid}</p>
}

export default Post
Copy the code

//posts/abc
<div id="__next">
   <p>Post: abc</p>
</div>
Copy the code

//posts/hoge
<div id="__next">
   <p>Post: hoge</p>
</div>
Copy the code

getStaticPaths

Used to generate static files when dynamic routing is used.

//zeit/[name].js
import fetch from 'node-fetch'

function Zeit({ name, stars }) {
  return<div>{name} stars: {stars}</div>} Return path to prebuild using arrays.export async function getStaticPaths() {// zeit retrieve 30 apis managed repositories const res = await fetch() {'https://api.github.com/orgs/zeit/repos'Const Paths = repos.map(repo => '/zeit/${repo.name}`)
  return { paths, fallback: false} // Receive parameters with routing informationexport async functionGetStaticProps ({params}) {// corresponding to the filename zeit/[name].js const name = params.name const res = await fetch(`https://api.github.com/repos/zeit/${name}`)
  const json = await res.json()
  const stars = json.stargazers_count

  return { props: { name, stars } }
}

export default Zeit
Copy the code

// /zeit/ms
<div id="__next">
   <div>ms stars: 2699</div>
</div>
Copy the code

// /zeit/micro
<div id="__next">
   <div>micro stars: 9128</div>
</div>
Copy the code

The required parameters for getStaticProps are paths and fallback. It determines behavior when accessing paths other than the prebuilt path.

• False The value of other routes is 404
• True If fallback is set to true, then even unbuilt paths will not be 404

conclusion

The original

Qiita.com/matamatanot…