In the next js documentation, we can see that getStaticProps function is used to pre-render dynamic code and serve full html code for the client/bots.

And getStaticProps takes in a {params} parameter, returns props which is used by the JSX elements. But what if I dont have any server side data for a page. All the JSX elements are static. Can I still pre-render those and serve to client as usual?

I have tried without any props, just the getStaticProps function and can't figure it out if it's working or not.

CodePudding user response：

I have tried without any props, just the getStaticProps function and can't figure it out if it's working or not.

When you build your next.js project, at the end of the build you'll see a log summary for the build indicating which routes and pages are rendered as SSR or SSG, or ISR usually indicated using a symbol (filled dot or empty dot or a lambda symbol).

getStaticProps is the default behavior if no data-fetching function is used, you probably will see it as (static) on the build log summary.

All the JSX elements are static
Can I still pre-render those and serve to client as usual?

When you build your project, next.js will generate (pre-render) HTML for the pages using getStaticProps (or doesn't have any data fetching function) once at build time and will be served on each request, this is also mentioned in their docs

By default, Next.js pre-renders every page.
This means that Next.js generates HTML for each page in advance, instead of having it all done by client-side JavaScript