Next.js Series #1-Pages

If you don’t have time to read but want to know what’s there in this post. Find the quick read 👇

What will you learn?

1. Intro about Pages

2. Pages with Dynamic routes

3. Pre-rendering of Pages

1. Intro about Pages

A page in Next.js is similar like a React Component exported from a .js .jsx .ts or .tsx files into the pages directory.Each page is associated with a route based on it’s filename

Example of pages

2. Pages with Dynamic routes

Next.js supports pages with dynamic routes.

3. Pre-rendering of Pages

Next.js prerenders everypage in advance instead of having it all done by client-side JavaScript with pre-rendering it will result in better performance and SEO.

I. Static Generation

If a page uses Static Generation, the page HTML is generated at build time. That means in production, the page HTML is generated when you run **next build**. This HTML will then be reused on each request. It can be cached by a CDN.

In Next.js we can generate pages with and without data like the below scenarios

• Static Generation without data

• Static Generation with data

Static Generation without data

Next.js pre-renders pages using Static Generation without fetching data. Here’s an example:

Note that this page does not need to fetch any external data to be pre-rendered. In cases like this, Next.js generates a single HTML file per page during build time.

Static Generation with data

Some pages require fetching external data for pre-rendering. Your page content depends on external data: **Use getStaticProps**.
If the page paths depend on external data: **Use getStaticPaths** (usually in addition to getStaticProps).

To fetch data on pre-render, Next.js allows you to export an async function called getStaticProps from the same file. This function gets called at build time and lets you pass fetched data to the page's props on pre-render.

When to use Static Generation Pages?

Use Static Generation (with and without data) whenever possible because your page can be built once and served by CDN, which makes it much faster than having a server render the page on every request.

You can use Static Generation for many types of pages like below

On the other hand, Static Generation is not a good idea if you cannot pre-render a page ahead of a user’s request. Maybe your page shows frequently updated data, and the page content changes on every request.

II. Server-side Rendering

If a page uses Server-side Rendering, the page HTML is generated on each request.To use Server-side Rendering for a page, you need to export an async function called getServerSideProps. This function will be called by the server on every request.

For example, suppose that your page needs to pre-render frequently updated data (fetched from an external API). You can write getServerSideProps which fetches this data and passes it to like below

As you can see, getServerSideProps is similar to getStaticProps, but the difference is that **getServerSideProps** is run on every request instead of on build time.

Congratulations!