

# Understanding the Template File

The <highlight>template.tsx</highlight> file in Next.js is a great way to apply global behaviors, such as transition animations, without modifying individual page components. This approach ensures a seamless and consistent user experience across route changes.

# Implementation

```tsx
// app/template.tsx
'use client'

import { motion } from "motion/react"

export default function Template({ children }: { children: React.ReactNode }) {
  return (
    <motion.div
      initial={{ y:20  , opacity: 0 }}
      animate={{ y : 0 , opacity: 1 }}
      transition={{ ease: 'easeInOut', duration: 0.75 }}
    >
      {children}
    </motion.div>
  )
}
```

# Why Use a Template File

- No need for **useEffect** or manually handling route changes.
- Automatically applies the transition animation to all pages.
- Cleaner and more maintainable than wrapping **motion.div** around every page component.

# Demo VIdeo

<video controls>
  <source src="/blogsassets/templatejs.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>


# Additional Resources

- [Framer Motion Documentation](https://www.framer.com/motion/) : Learn more about Framer Motion and its capabilities.
- [Next.js Layouts & Templates](https://nextjs.org/docs/app/api-reference/file-conventions/template) : Explore how layouts and templates work in Next.js.





# Introduction

**Caching** stores copies of frequently requested data in a temporary storage spot called the "cache." When a request comes in, the system checks the cache first. If it finds what it's looking for (a "cache hit"), the data is delivered instantly. If not (a "cache miss"), the system retrieves the data from the original source, stores it in the cache, and hands it over to the user. This process ensures faster response times and reduced load on the original data source.

![Caching in Next.js 15](/blogsassets/cache1.png)

Before Next.js 15, caching often felt complex and confusing, with settings like Force-dynamic and Cache-Control: no-store adding to the challenge. Fortunately, Next.js 15 introduces the cache function, simplifying caching and making it more accessible and efficient.

# Basics of Caching in Nextjs 15

Next.js 15 introduces the cache function, which significantly simplifies cache management. The cache function allows us to wrap any function, and Next.js will automatically cache the result of that function based on its input arguments. This provides much finer-grained control over what gets cached and what doesn't.

But first, We'll need to upgrade to the canary version of Next.js and enable the dynamicIO API in next.config.ts file:

```tsx
 //canary version
npx @next/codemod@canary upgrade latest

//next.config.ts file
import type { NextConfig } from 'next'
// [!code word:dynamicIO]
const nextConfig: NextConfig = {
  experimental: {
    dynamicIO: true,
  },
}
 
export default nextConfig
```

## Example

Let’s create a simple component that displays a user’s name and email address. We’ll use Faker.js to simulate fetching this data from a backend.

```tsx
// store
import { faker } from "@faker-js/faker";

export async function name() {
    return faker.person.fullName();
}

export async function email() {
    "use cache";
    return faker.internet.email();
}
```
**The Page Component**

```tsx
const page = () => {
const randomName = faker.person.fullName(); 
const randomEmail = faker.internet.email(); 
  return (
    <>
    <div> Name  : {randomName}</div>
    <div> Email : {randomEmail}</div>
    </>
  )
}

export default page
```

When we refresh the page, the data reloads every time which is great for a dynamic component but it's terrible for caching. See below:

<video controls>
  <source src="/blogsassets/no_cache.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>

# Adding use cache

By adding <highlight>"use cache"</highlight> to the top of the file or specific components, we can cache the data so refreshing the page doesn’t reload it.

<video controls>
  <source src="/blogsassets/all_cache.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>


## Caching Specific Routes or Components

<spotlight> Sometimes we don’t want to cache everything but just some bits. Luckily, use cache gives us plenty of flexibility . </spotlight> 

For exmaple we can cache individual components by adding "use cache" within those components

```tsx
const UserDetails = async () => {
  'use cache';    //component level cache // [!code highlight]
  const randomName = name();
  const randomEmail = email();
  return (
    <div className="text-3xl">
      <div style={{ color: "green" }}> Email : {randomEmail}</div>

      <Suspense fallback={<div>Loading...</div>}>
        <div> Name : {randomName}</div>
      </Suspense>
    </div>
  );
};

export default UserDetails;
```

or even better we can cache indiviual server action and fucntions 

Let’s say a user’s name is dynamic (like their social media updates), but their email address rarely changes. We can cache only the email and keep the name dynamic. Here’s how:

```tsx
import { faker } from "@faker-js/faker";

export async function name() {
    return faker.person.fullName();
  }

export async function email() {
    "use cache";
    return faker.internet.email();
  }
```

and we wrap the dynamic component in Suspense so the rest of the page renders immediately while the name is loading:

```tsx 
const UserDetails = async () => {
  "use cache";
  const randomName = name();
  const randomEmail = email();
  return (
    <div className="text-3xl">
      <div style={{ color: "green" }}> Email : {randomEmail}</div>

      <Suspense fallback={<div>Loading...</div>}>
        <div> Name : {randomName}</div>
      </Suspense>
    </div>
  );
};

export default UserDetails;
```

**Output :**


<video controls>
  <source src="/blogsassets/dynamic_cache.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>


# When does cache expires

By default, the cache is set infinite and revalidates every 15 minutes.

But I'm impatient , So for that we can use a new function called <highlight>cacheLife</highlight> which is imported from next which we can usen fucntion to change the cache time .The value for the cachelIfe are given in below table .

![Caching in Next.js 15](/blogsassets/cachelifemap.png)

And if thats not satisfactory , We can define custom cache expiration time .

```tsx
//next.config
import type { NextConfig } from 'next' 
 
const nextConfig: NextConfig = {
  experimental: {
    dynamicIO: true,
    cacheLife: {
      biweekly: {
        stale: 60 * 60 * 24 * 14, // 14 days
        revalidate: 60 * 60 * 24, // 1 day
        expire: 60 * 60 * 24 * 14, // 14 days
      },
    },
  },
}
 
module.exports = nextConfig
```

# Conclusion

Caching in Next.js 15 offers unparalleled control over app’s performance. With the cache function, we can easily manage what’s cached, how long it’s stored, and where it resides. Whether building a dashboard or optimizing for speed, this feature provides powerful tools to enhance the application.

**Note**: The **use cache** is still an experimental feature.

Home

Blog

Projects

About

The Blog

Transition AnimationTransition Animation

Caching in Next.js 15Caching in Next.js 15