Blog

Markdown

- Using `<a>` tag in a nextjs project to implement routing re-loads the entire webpage causing all the resourced to be downloaded again, this is inefficient, instead you should use `<Link>` tag provided by `next/link`.
- All the components in the `app` folder are server rendered by default. 
- Server Rendered components can't manage state or have event listeners.
- In NextJS rendering can be done on the client side and on the server side, on the server side, the rendering can happen :
	- **Statically**: *at build time*
	- **Dynamically**: *at request time*
- By Default the data retrieved using a `fetch` API has is cached, thus next feels that the entire component has static data, and on running `npm run build` a static page is created, this can be seen by a *hollow circle* that appears in front of `/users` page, and hence the `<p>` element gets the time stamp of when the application was build, since the page data is cached even after re-loading the timestamp doesn't update. 
- However, we can disable this by using the below code statement, this overrides the caching behave and tell next that the page has to be dynamically rendered every time a request is being made for the page. This can be seen by a *special symbol* that appears in front of `/users` page when you build the application.
```js
fetch("url", {
	cache: "no-store"
})
```

Edit Article