> For the complete documentation index, see [llms.txt](https://mominur.gitbook.io/mominur-notes/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mominur.gitbook.io/mominur-notes/random-topics/cache-busting.md).

# Cache Busting

ওয়েব অ্যাপ্লিকেশন যতই Fast হোক, যদি ইউজার পুরনো ফাইল দেখে—তাহলে সেই গতি কোনো কাজেই আসে না।\
এখানেই আসে **Cache Busting**।

আপনি হয়তো নতুন ডিজাইন Deploy করেছেন, CSS বা JavaScript আপডেট করেছেন—কিন্তু ইউজার বলছে,

> কিছুই তো বদলায়নি

কারণ?\
**Browser Cache**

এই সমস্যার আধুনিক, কার্যকর এবং প্রফেশনাল সমাধানই হলো **Cache Busting**।

***

### Cache কী এবং কেন দরকার?

**Cache** হলো একটি Temporary Storage যেখানে Browser বা CDN আপনার ওয়েবসাইটের কিছু ফাইল (CSS, JS, Images ইত্যাদি) সংরক্ষণ করে রাখে।

#### Cache ব্যবহারের সুবিধা:

* Faster Page Load
* Reduced Server Load
* Better User Experience

কিন্তু…

#### Cache ব্যবহারের সমস্যা:

* Updated file load হয় না
* UI / Functionality mismatch
* Bug fix ইউজার পর্যন্ত পৌঁছায় না

এবং এখানেই শুরু হয় **Cache Busting** এর প্রয়োজন।

***

### Cache Busting কী?

**Cache Busting** হলো এমন একটি technique, যার মাধ্যমে Browser-কে বলা হয়:

> এই ফাইলটা নতুন—পুরনোটা ব্যবহার করো না।

সহজভাবে বললে,\
**File URL পরিবর্তন করে Browser Cache ভেঙে দেওয়াই Cache Busting**।

***

### Cache Busting কীভাবে কাজ করে?

Browser কোনো ফাইলকে Cache করে **URL এর ভিত্তিতে**।\
যদি URL একই থাকে—Browser ধরে নেয় ফাইলও একই।

#### উদাহরণ (Problem):

```html
<link rel="stylesheet" href="/css/style.css">
```

আপনি `style.css` আপডেট করলেন, কিন্তু URL একই—Browser পুরনো ফাইলই দেখাবে।

***

### Cache Busting Techniques

#### Query String Versioning

সবচেয়ে সহজ ও বহুল ব্যবহৃত পদ্ধতি।

```html
<link rel="stylesheet" href="/css/style.css?v=1.0.2">
<script src="/js/app.js?v=2026"></script>
```

Version পরিবর্তন করলেই Browser নতুন ফাইল লোড করবে।

✔ Easy\
✔ Quick\
❌ CDN এ সবসময় কার্যকর নয়

***

#### File Name Hashing (Best Practice)

Production-grade application-এর জন্য সবচেয়ে জনপ্রিয় ও Recommended পদ্ধতি।

```html
/app.8f3a2c.js
/style.a91bd3.css
```

এখানে Hash auto-generate হয় ফাইলের content অনুযায়ী।

✔ CDN Friendly\
✔ 100% Reliable\
✔ Used by React, Vue, Laravel Mix, Vite

***

#### Build Tool Based Cache Busting

Modern frontend ecosystem এই পদ্ধতিই ব্যবহার করে।

**Example:**

* **Webpack**
* **Vite**
* **Laravel Mix**

```js
mix.js('resources/js/app.js', 'public/js')
   .version();
```

Laravel এ:

```blade
<script src="{{ mix('js/app.js') }}"></script>
```

Automatically versioned URL generate হয়।

***

#### HTTP Cache Control Headers

Server-level Cache Busting।

```http
Cache-Control: no-cache, must-revalidate
```

অথবা:

```http
Cache-Control: max-age=31536000
```

✔ Fine-grained control\
❌ Misconfiguration হলে performance issue

***

### CDN ও Cache Busting

যদি আপনি Cloudflare, AWS CloudFront বা অন্য CDN ব্যবহার করেন:

* File Name Hashing সবচেয়ে নিরাপদ
* CDN purge একটি temporary solution
* Cache Busting permanent solution

**Never rely only on CDN Purge**

***

### Common Mistakes

❌ Same file name রেখে update করা\
❌ Cache clear করতে ইউজারকে বলা\
❌ Production এ `no-cache` ব্যবহার\
❌ Manual version maintain করা

***

### Cache Busting vs Cache Clearing

| Cache Busting    | Cache Clearing |
| ---------------- | -------------- |
| Automatic        | Manual         |
| Scalable         | Risky          |
| Production Ready | Temporary      |
| User Friendly    | Not Reliable   |

***

### Best Practices

✔ Static assets এ always Cache Busting ব্যবহার করুন\
✔ Build tool ব্যবহার করুন (Vite / Webpack)\
✔ File hashing preferred\
✔ Cache-Control header বুঝে ব্যবহার করুন\
✔ Development এবং Production strategy আলাদা রাখুন

***

আজকের fast-paced web world এ **Cache Busting কোনো luxury না—এটা necessity**। আপনার কোড যতই clean হোক, যদি ইউজার পুরনো ফাইল দেখে—তাহলে পুরো effort বৃথা।

👉 Cache ব্যবহার করুন\
👉 Performance বাড়ান\
👉 কিন্তু **Cache Busting ছাড়া কখনো Production এ যাবেন না**

**Smart caching + Proper cache busting = Perfect Web Experience**&#x20;