# 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 👇

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055264379/e3fae2de-2e9e-40f9-8884-a2a2fa8ee19f.png align="left")

### 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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055266119/a07712d8-4c0e-40d6-9b1a-b1f1f3faa959.png align="left")

Example of pages

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055267609/b8f85eae-84e4-4891-9edc-fd3f3d4f071a.png align="left")

### 2\. Pages with Dynamic routes

Next.js supports pages with dynamic routes.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055269565/5c71a710-b833-440d-a3bd-bed48f912221.png align="left")

### 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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055271798/e8c1f126-9d12-4b95-8248-6b11168986d4.png align="left")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055273680/9ebe46a5-cbf6-47d5-b3df-e79f49abfccf.png align="left")

#### 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](https://howdns.works/ep2/).

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:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055274966/419c6bf5-25c6-43e6-bd79-4e353b854af9.png align="left")

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`).

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055276909/d4474f3b-857f-4c95-9904-8495ddcd0b32.png align="left")

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055279468/44c1f47b-ae92-4a4d-b0a6-f7c1658eb0f3.png align="left")

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055281899/7cf96bd4-edbb-4d25-9413-d821c5bc01e0.png align="left")

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!

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055284087/c5352cfa-4f7f-4540-af26-b747c721615f.png align="left")