Next.js 13 special files, data fetching and head tag — page, layout and template

#javascript #programming #webdev #nextjs

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.

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.

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.

In root layout you should include html and body tags.

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

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.

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.

You can also fetch data in Client Components. Libraries such as SWR or React Query 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.
If you want to expand your knowledge in general about data fetching in Next.js 13 here is the link.