Next.js 13 special files, data fetching and head tag — page, layout and template
Tags: javascript, programming, webdev, nextjs
Published: 2023-03-01 16:34:45

**Before we start, note that** by default components in Next.js 13 are Server Components. This roughly means that you can't use client side effects and actions like _useEffect_, _useState_, _onClick_, etc. You can make component client side by adding **_"use client";_** directive on top of the component over the imports.
Server Components also improve performance by reducing the amount of JavaScript sent to a client, make it easier to fetch data, are better for SEO because search engine bots can easily access the HTML content of the page, and don't need to wait for client-side code execution.

If you want to know the basics of the routing and app directory, you can visit the [previous article](https://medium.com/@gkarol/next-js-13-app-directory-routing-994cf0f9b52c).

## Pages
The most important file in the new app directory is the page. This is because the page file makes the route publicly accessible.

You create page by exporting the function as default from the _page.tsx_ file like in the example below. You can call the function whatever you want.


![Code example of home page in nextjs 13](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/71qre9xl3bl3dc3nel60.png)


## Layouts
In _layout.tsx_, you create a UI that is shared between multiple child pages. So you can create a UI for _/company/about_ and this layout will be applied to all pages under route _/company/about/*_, but not for siblings routes like _/company/career_.
You can create a layout at any level of the route.

On navigation, layouts preserve state, remain interactive, and do not re-render.

You can create a layout by exporting the function as default from the _layout.tsx_ file.
**Note that** the top-most layout function is called _RootLayout_, any other layout you can call as you want. In the example below you can see RootLayout which is required.

![code example of root layout in nextjs 13](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/azcywj74hkm651qpxjcc.png)

In root layout you should include _html_ and _body_ tags.

Any other layout can look like this (layout for /_about_ page)

![code example of common layout in nextjs13](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s0idx5xclimjcl6ctt67.png)

You can wrap the children in whatever you want.
Each layout accepts the children prop that will be populated with child layouts and pages.

## Templates
Templates are similar to layouts, they also wrap each child layout and page but templates create a new instance for each of their children as they navigate, as opposed to layouts that persist on routes and preserve state.
This means that if you navigate between routes that share a template, DOM elements are recreated and new instance of the component are mounted.
You can create a template just like a common layout.


![code example of template in nextjs13](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/agxc4hdrzyeh4gntg79y.png)

**Note that** if you don't have a specific reason to use template, you should use layout. Templates may be useful for cases like:

- Enter/exit animations using CSS or animation libraries.
- Features that rely on useEffect (e.g logging page views) and useState (e.g a per-page feedback form).
- To change the default framework behavior. For example, Suspense Boundaries inside layouts only show the fallback the first time the Layout is loaded and not when switching pages. For templates, the fallback is shown on each navigation.

## Data fetching
Pages and layouts like other components can fetch data. Because of the new Server Components, fetching data in Next.js 13 became really handy and have [a lot of advantages](https://beta.nextjs.org/docs/data-fetching/fundamentals#fetching-data-on-the-server).

You can also fetch data in Client Components. Libraries such as [SWR](https://swr.vercel.app) or [React Query](https://tanstack.com/query/v4/) are recommended in Client Components. (In the future it'll be also possible using _use()_ hook).

You can access the new data fetching system using native _fetch()_ Web API, and use _async_/_await_ in Server Components.

You can fetch data in multiple components, Next.js 13 will automatically cache requests (_GET_) that have the same input in temporary cache. This way you avoid situations in which the same data can be fetched more than once. It is useful for fetching data in layouts because it's not possible to pass data between parent layout and its children. Just fetch data directly inside the layout that needs it, and Next.js 13 will take care of caching and deduping requests.

### Two data fetching patterns

- **parallel data fetching** - if you don't have one query dependent on the previous one, you can use parallel data fetching. This reduces client-server waterfalls and the total time it takes to load data, because requests in a route are eagerly initiated and starts fetching at the same time.
- **sequential data fetching** - if you have one query dependent on the previous one you can use sequential data fetching. This can lead to longer loading time but it is useful in cases where one fetch depends on the result of the previous one.

If you want to know more about data fetching patterns [visit Next.js 13 documentation](https://beta.nextjs.org/docs/data-fetching/fetching#data-fetching-patterns).
If you want to expand your knowledge in general about data fetching in Next.js 13 [here is the link](https://beta.nextjs.org/docs/data-fetching/fundamentals).

## Modifying _head_ tag
One more thing you should know is a new way of modifying _head_ tag.

If you use static values in head tag:

![Static way to modifying head tag in nextjs13](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yb6waf9x2tytbovhffya.png)

If you use dynamic data in head tag:

![Dynamin way to modifying head tag in nextjs13](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uro5ybahuclby3yhyc42.png)


That's all in this article. If you want to expand your knowledge, [check out the documentation](https://beta.nextjs.org/docs/getting-started).
I hope you enjoyed! 🚀