Nerd For Tech
Published in

Nerd For Tech

Static Generation with getStaticProps

Static Generate means that we Pre-generate a page during build time. This way, all HTML data that make up the content is already loaded into the page during the build time. By build, I mean that the app is pre-rendered during the app’s deployment.

After your app has been deployed, pages are prepared ahead of time. Allowing them to be cached by the server/ CDN(content delivery network) serving the app. Now when a client requests the server, the pages can be severed to the client if any incoming requests are being resolved.

Only inside the pages folder, we can use :

Can be added to any page file under the pages directory

NextJS will automatically pre-generate. But we want to tell NextJS which files we wish to be pre-rendered; we can do that like so:

NextJS first executes the getStaticProps and then renders the HomePage() component.

getStaticProps not only allows us to write server-side code but also allows us to import node modules such as fs node files system.

Other cool things we can do with NextJS.

SIDE NOTE: keep in mind that JSON, is a global object just on both browser-side and with node.

We can test our build by running

npm run build
npm start

This will allow us to see what is being built for our application…

--

--

--

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.

Recommended from Medium

Generics in Typescript

Create Medium posts from Markdown

Debounce and conquer

JavaScript | Scope

Programmatic Navigation of Vue Router Routes

Building P2P Video Chat Application using webRTC and Node.js — Cloudnweb

Highlights of JavaScript — Variables, Switch, and While Loops

Typesafe Environment Config in Angular

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Cameron J. Leverett

Cameron J. Leverett

I love tackling new and exciting challenges and working with software because it’s consistently changing, which is exciting.

More from Medium

CS371p Spring 2022 Week 14: Relena Lai

GatewayCluster explained.

Developing REST WebService using JAX-RS and Apache TomEE

WSO2 Identity Server Consent Post-Authentication Handler -Part 1