Build

$ npm run build

generates static pages.

Terminal:

Page                                       Size     First Load JS
┌ ● /                                      724 B          78.2 kB
├   └ css/233a1356c16eb650.css             416 B
├   /_app                                  0 B            77.5 kB
├ ○ /[noteId]                              484 B            78 kB
├   └ css/f0a2be9a550dc29f.css             79 B
├ ○ /404                                   193 B          77.7 kB
└ ○ /new-note                              749 B          78.2 kB
    └ css/29ba8ee8d48d1f49.css             359 B
+ First Load JS shared by all              77.5 kB
  ├ chunks/framework-1f10003e17636e37.js   45 kB
  ├ chunks/main-fc7d2f0e2098927e.js        28.7 kB
  ├ chunks/pages/_app-b327587a412059ea.js  3.03 kB
  ├ chunks/webpack-69bfa6990bb9e155.js     769 B
  └ css/555e77c84496ecf7.css               464 B

○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)

Full dot means - getStaticProps was used. (only the root page for now)

Hollow dot means - only static rendered.

Possible problems in getStaticProps

  • in some websites - data could be outdated - because build time done right!
  • no client side data fetching - so can get outdated.

Solution:

  1. We can rebuild our site and redeploy WHEN OUT DATA CHANGES - good if data doesnt change frequently like personal blog.

  2. If data does change frequently - there is an extra property revalidate that takes in a number (say 10), this number is the no. of seconds NextJS will wait until it regenerates the page for an incoming request.

export async function getStaticProps() {
  return {
    props: {
      notes: DUMMY_NOTES,
    },
    revalidate: 10
  };
}
  • build process will run, but pages wont just generated on build process alone.
  • pages will be generated every couple of seconds on server continuously (if there are incoming requests for the page). The regen. pages will replace old pages.

How many seconds to set?

Dependson your dat update freqenmecy

  • If yout data changes once every hour - then set this to 3600
  • If yout data all the time, then 1 sec will be better.

Benefit

We are ensuring that the page is ocasionally re-pregenerated on the server and after deployment.

Benefit: You dont have to rebuild and redeploy all the time just because the data changed - done automatically.

Other option - SSR with getServerSideProps

Sometimes regular update (of page) is not enough. Sometimes our real requirement is to regenerate the page on every incoming request. So you want to pre-generate automatically dynamically after deployment on the server - NOT during the build process, and NOT every couple of seconds

getServerSideProps()

This is also a reserved name.

export async function getServerSideProps() {
  return {
    props: {
      notes: DUMMY_NOTES,
    }
  };
}

This function will not run during the build process, but instead always on the server after deployment. It also returns an object with props key.

Any code you write here will always run on the server. Never on the client

You can also perform operations whcih use credentials, which sould be not exposed to client. We can do it because this code only runs on Server.

Cant set revalidate here - which is obvious because there is no longer need to revalidate because he function gssp runs every incoming request anyway.

context parameter in getServerSideProps()

export async function getServerSideProps(context) {

    const req = context.req;
    const res = context.res;

    //fetch data from an API

    return {
        props: {
        notes: DUMMY_NOTES,
        }
    };
}

context param gives access to request and response.

the above may look kindof familiar (if you have worked on node, express) (we also get req and res objects in middleware, to then work with those)

You can work on authentication (check session cookie) etc.

Have access to all headers, req body etc.

Ultimately you DON’T return response using context.res – you return only the objects with props key.

Which one to use - getStaticProps / getServerSideProps

GSSP

  • always updated data - but more time processing every incoming req

  • Use it for data that changes a lot (think multiple times every second)

Only 2 reasons to use GSSP -

  1. You need access to req (not possible ni GSP)
  2. Data changes many times a second.

GSP

If you dont need access to request object - for lets say authentication - if you dont need authentication, then getStaticProps is better. Because here we pre generate an HTML file. That file can then be stored and served by a CDN - and that is simply faster than fetchnig data + regenerating for every incoming request. Your page will be faster with getStaticProps - because then it can be cached and reused, instead of regenerated every time.