What is Next.js Caching & How It Works – Cache Components

Next.js Caching! একটা সময় ওয়েবসাইট বানানোর পর সবচেয়ে বড় challenge ছিল speed।

ইউজার ঢুকছে, কিন্তু পেজ load হতে দেরি হচ্ছে, কারণ একই data বারবার server থেকে fetch করা হচ্ছে এবং প্রতিবার নতুন করে computation হচ্ছে।

এই পুরো problem-টার smart solution নিয়ে এসেছে Next.js caching system। সহজভাবে বললে, caching মানে হলো একবার data fetch বা কোনো computation করে সেটাকে store করে রাখা, যাতে পরেরবার একই request এ সরাসরি stored result দেখানো যায়।

এর ফলে শুধু website fast হয় না, server load কমে, user experience improve হয় এবং SEO ranking-ও noticeably ভালো হয়।

Enabling Cache Components

Next.js-এর modern caching system ব্যবহার করতে হলে প্রথমেই cacheComponents option enable করতে হয়।

একবার এটা চালু হয়ে গেলে framework নিজেই intelligent ভাবে caching handle করতে শুরু করে এবং তুমি use cache directive ব্যবহার করে নির্দিষ্ট function বা component-এর output cache করতে পারো।

এই ছোট configuration change-টাই আসলে পুরো performance improvement-এর foundation তৈরি করে দেয়।

// next.config.ts
import type { NextConfig } from 'next'const nextConfig: NextConfig = {
  cacheComponents: true,
}export default nextConfig

What is use cache

Next.js caching-এর core concept হলো use cache।

এটি এমন একটি directive, যা async function বা component-এর result cache করে রাখে।

অর্থাৎ, একবার function execute হয়ে গেলে এবং result generate হলে, পরবর্তী একই input-এর জন্য আর নতুন করে execution দরকার হয় না cached result সরাসরি return হয়।

এই behavior application-কে অনেক বেশি efficient করে তোলে, বিশেষ করে যখন data fetch expensive বা repetitive হয়।

export async function getUsers() {
  'use cache'  return db.query('SELECT * FROM users')
}

Data-Level Caching

যখন কোনো application-এ একই data বারবার বিভিন্ন জায়গায় ব্যবহার হয়, তখন data-level caching সবচেয়ে effective solution হয়ে ওঠে।

যেমন ধরো, তুমি API থেকে product list বা user data fetch করছো। এই data যদি খুব ঘন ঘন change না হয়, তাহলে সেটাকে আলাদা করে cache করে রাখা যায়।

এতে প্রতিবার API call করার প্রয়োজন পড়ে না এবং response time অনেক দ্রুত হয়ে যায়। এই approach backend load কমানোর পাশাপাশি scalability-তেও বড় ভূমিকা রাখে।

import { cacheLife } from 'next/cache'export async function getProducts() {
  'use cache'
  cacheLife('hours')  const res = await fetch('https://api.example.com/products')
  return res.json()
}

UI-Level Caching

কখনো কখনো শুধু data cache করাই যথেষ্ট না, পুরো UI বা page cache করা আরও বেশি beneficial হয়।

এই ক্ষেত্রে Next.js পুরো component বা page-এর rendered output cache করে রাখে।

ফলে user যখন page visit করে, তখন pre-rendered HTML instantly serve করা যায়।

এই approach শুধু performance বাড়ায় না, বরং SEO-এর জন্যও খুব powerful, কারণ search engine সরাসরি fully rendered content পায়।

import { cacheLife } from 'next/cache'export default async function Page() {
  'use cache'
  cacheLife('hours')  const posts = await fetch('https://api.example.com/posts')
    .then(res => res.json())  return (
    <div>
      {posts.map((post: any) => (
        <h2 key={post.id}>{post.title}</h2>
      ))}
    </div>
  )
}

Suspense & Streaming

তবে সব data cache করা smart decision না। কিছু data আছে যেগুলো সবসময় fresh থাকা দরকার, যেমন latest posts বা user-specific dashboard data।

এই ধরনের ক্ষেত্রে Next.js Suspense এবং streaming ব্যবহার করে। প্রথমে একটি fallback UI দেখানো হয়, তারপর যখন data ready হয়, তখন সেটা ধীরে ধীরে stream হয়ে আসে।

এতে user কখনোই blank screen দেখে না এবং overall experience অনেক smooth লাগে, even যদি backend response একটু slow হয়।

import { Suspense } from 'react'async function LatestPosts() {
  const res = await fetch('https://api.example.com/posts')
  const data = await res.json()  return <div>{data.length} posts</div>
}

Runtime Data Handling

cookies, headers বা URL parameters-এর মতো runtime data caching-এর ক্ষেত্রে একটু tricky।

কারণ এই data প্রতিটি request-এ আলাদা হতে পারে। তাই এগুলো সরাসরি cache না করে, প্রথমে extract করে cached function-এ argument হিসেবে pass করতে হয়।

এতে করে Next.js বুঝতে পারে কোন input-এর জন্য কোন cache entry ব্যবহার করতে হবে এবং user-specific caching সম্ভব হয়।

import { cookies } from 'next/headers'async function ProfileContent() {
  const session = (await cookies()).get('session')?.value  return <CachedProfile sessionId={session} />
}

Handling Dynamic Values

যেসব value প্রতিবার পরিবর্তিত হয় যেমন সময় বা random সংখ্যা এসব caching-এর ক্ষেত্রে বিশেষভাবে handle করতে হয়।

যদি real-time value প্রয়োজন হয়, তাহলে request-time-এ generate করতে হয়। আর যদি same value acceptable হয়, তাহলে সেটাকে cache করেও রাখা যায়। এই flexibility developer-কে use-case অনুযায়ী decision নেওয়ার সুযোগ দেয়।

export default async function Page() {
  'use cache'  return <p>{Date.now()}</p>
}

Partial Prerendering (PPR)

Next.js-এর সবচেয়ে powerful featureগুলোর একটি হলো Partial Prerendering।

এখানে একটি page-এর কিছু অংশ আগে থেকেই staticভাবে render করা হয়, আর কিছু অংশ runtime-এ load হয়।

এই hybrid approach-এর ফলে page দ্রুত load হয়, আবার প্রয়োজন অনুযায়ী dynamic data-ও দেখানো যায়।

অর্থাৎ performance আর flexibility দুটোই একসাথে পাওয়া যায়।

Cache Revalidation

Caching মানে এই না যে data forever same থাকবে। যখন নতুন data আসে, তখন cache update করা প্রয়োজন।

Next.js-এ এর জন্য tag-based revalidation system আছে, যার মাধ্যমে নির্দিষ্ট cached data invalidate করে নতুন data fetch করা যায়।

এতে user সবসময় updated information পায়, কিন্তু unnecessary requests avoid করা যায়।

import { updateTag } from 'next/cache'updateTag('posts')

SEO & Performance Impact

Next.js caching সরাসরি SEO-তে impact ফেলে। দ্রুত load হওয়া page user experience improve করে, bounce rate কমায় এবং Core Web Vitals score বাড়ায়।

search engine-গুলো fast এবং optimized website prefer করে, ফলে caching indirectly search ranking-ও improve করে।

তাই caching শুধু performance optimization না, এটা SEO strategy-এরও গুরুত্বপূর্ণ অংশ।

Next.js caching আসলে শুধু একটি feature না, এটা একটি mindset।

কোথায় cache করতে হবে, কোথায় dynamic রাখতে হবে এবং কোথায় streaming ব্যবহার করতে হবে এই balance ঠিকভাবে maintain করাই একজন skilled developer-এর কাজ।

তুমি যদি এই conceptsগুলো properly apply করতে পারো, তাহলে তোমার application হবে fast, scalable এবং SEO optimized।

শেষে একটা simple rule মনে রাখলেই চলবে

Same data হলে cache করো, user-specific হলে parameter দিয়ে handle করো, আর real-time data হলে streaming ব্যবহার করো।

এই approach follow করলে তুমি easily next-level performance achieve করতে পারবে

Summary

Next.js caching improves performance by storing and reusing fetched data and rendered components using Cache Components and use cache. It enables faster page loads, better user experience, and optimized SEO through techniques like Suspense, streaming, and Partial Prerendering (PPR).