vercel / next.js

The React Framework
https://nextjs.org
MIT License
126.83k stars 26.96k forks source link

getStaticProps not working if the page is requested from terminal (not browser) #24584

Closed a-salimkhanov closed 3 years ago

a-salimkhanov commented 3 years ago

What version of Next.js are you using?

10.1.4-canary.18

What version of Node.js are you using?

10.19.0

What browser are you using?

Chrome

What operating system are you using?

Ubuntu

How are you deploying your application?

next start

Describe the Bug

When a page with getStaticProps is requested within command line (not browser), it is not generated and returns a page with undefined data in it if getStaticPaths is like:

export async function getStaticPaths() {
  return { paths: [], fallback: true };
}

Expected Behavior

It should generate the requested page as it does in browser

To Reproduce

Create a page with getStaticProps something like...

import request from 'utils'

const eventPage = (props) => {
    const { event } = props
  return (
    <div> my event { event.name } </div>
  )
};

export async function getStaticPaths() {
    return {
        paths: [],
        fallback: true
    };
}

export async function getStaticProps({ params }) {
  console.log('getStaticProps fired...')
  const event = await request(`events/${params.id}`); 
  return {
    props: {
        event: event.data || null,
    }
  }

}

export default eventPage;

Grab meta tags with websites like https://metatags.io/ . Or run in Python:

import requests
r = requests.get('http://example.com/event/1') # url of your page
with open('pageContent.txt', 'a') as f:
    f.write(r.content)

Or you can just use curl "http://example.com/event/1" in Linux Terminal

You won't see getStaticProps fired... message in npm logs. But if you load the page in browser, everything works fine.

And also if you use getInitialProps or getServerSideProps instead of getStaticProps, everything works fine.

timneutkens commented 3 years ago

You're using fallback: true, so this is expected behavior on the first request. Please check the fallback documentation: https://nextjs.org/docs/basic-features/data-fetching#fallback-true

You'll likely want to use fallback: 'blocking': https://nextjs.org/docs/basic-features/data-fetching#fallback-blocking

a-salimkhanov commented 3 years ago

Thanks a lot @timneutkens. Works like a charm )

P.S. I don't know how come I hadn't seen fallback: 'blocking' option in the documentation

jackblackCH commented 3 years ago

Solved also my issue, but then I don't understand nextjs:

So to reproduce: Disable javascript, set fallback to true and request an URL that is not defined in paths: I still expect getStaticProps to be run, but it's not. But getStaticProps is run when javascript enabled, why is it not run for fallbacks?

@timneutkens ?

balazsorban44 commented 2 years ago

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.