Pre-rendering in Next.js

Even though I started learning Next.js a while ago it took me 11 months to understand what it really is (Pretty dumb right. I know) and why people choose Next.js over plain Reactjs. The hardest part for me to understand was what the heck pre-rendering is and the different functions provided by Next.js to achieve different kinds of pre-rendering.

So in Next.js, there are two pre-rendering methods; static generation and server-side rendering. In static generation, Next.js will generate the pages in the build time of the project while in server-side rendering it generates the pages in server per user request when the application is up and running.

There are two functions that we could use to achieve pre-rendering. Those are getStaticProps

and getServersideProps. I have explained the two functions below in more detail but keep in mind that you have to use these functions inside your pages as export functions, not inside your normal components.

getStaticProps

For static generation, developers can use a function called getStaticProps. As the name suggests this method is great for static websites or for websites that only have a few pages. By using getStaticProps you will be able to pre-generate the web pages in the build time of the project. In larger, dynamic websites we cannot predict what are the pages…