এই কোডল্যাব আপনাকে দেখায় যে কীভাবে Express সার্ভিং ফ্রেমওয়ার্ক চালানো Node.js-ভিত্তিক ওয়েব সার্ভার দ্বারা রিটার্ন করা HTTP ক্যাশিং হেডার পরিবর্তন করতে হয়। এছাড়াও, Chrome-এর DevTools-এ নেটওয়ার্ক প্যানেল ব্যবহার করে, আপনি যে ক্যাশিং আচরণ আশা করেন তা আসলে প্রয়োগ করা হচ্ছে কিনা তা কীভাবে কনফার্ম করবেন তা দেখাবে।
স্যাম্পেল প্রোজেক্ট সম্পর্কে জানুন
স্যাম্পেল প্রোজেক্টে আপনি এইসব গুরুত্বপূর্ণ ফাইল নিয়ে কাজ করবেন:
server.js-এ Node.js কোড আছে যা ওয়েব অ্যাপের কন্টেন্ট পরিবেশন করে। এটি HTTP অনুরোধ ও উত্তর ম্যানেজ করতে Express ব্যবহার করে। বিশেষ করে, পাবলিক ডিরেক্টরিতে সব স্থানীয় ফাইল সার্ভ করার জন্যexpress.static()ব্যবহার করা হয়, তাইserve-staticডকুমেন্টেশন কাজে লাগবে।public/index.htmlহল ওয়েব অ্যাপের HTML। বেশিরভাগ HTML ফাইলের মতো, এর URL-এর অংশ হিসেবে কোনও ভার্সন সংক্রান্ত তথ্য থাকে না।public/app.15261a07.jsএবংpublic/style.391484cf.cssহল ওয়েব অ্যাপের জাভাস্ক্রিপ্ট এবং CSS অ্যাসেট। এইসব ফাইলের প্রতিটির URL-এ একটি করে হ্যাশ থাকে, যা তাদের কন্টেন্টের সাথে সম্পর্কিত। কোন নির্দিষ্ট ভার্সনের URL লোড করতে হবে তা ট্র্যাক করার দায়িত্বindex.html-এর।
আমাদের HTML-এর জন্য ক্যাশিং হেডার কনফিগার করুন
ভার্সন সংক্রান্ত তথ্য নেই এমন URL-এর অনুরোধের উত্তর দেওয়ার সময়, আপনার উত্তর মেসেজে Cache-Control: no-cache যোগ করতে ভুলবেন না। এর সাথে, দুটি অতিরিক্ত রেসপন্স হেডারের মধ্যে একটি সেট করার সাজেশন দেওয়া হয়: হয়
Last-Modified
অথবা ETag। index.html
এই বিভাগের মধ্যে পড়ে। আপনি এটি দুটি ধাপে ভাগ করতে পারেন।
প্রথমে, Last-Modified এবং ETag হেডার
etag
এবং
lastModified
কনফিগারেশন বিকল্পের মাধ্যমে নিয়ন্ত্রণ করা হয়। এই দুটি বিকল্পই আসলে সব HTTP রেসপন্সের জন্য ডিফল্ট হিসেবে true-এ সেট করা থাকে, তাই বর্তমান সেট-আপে, সেই আচরণ পেতে আপনাকে অপ্ট-ইন করতে হবে না। তবে, আপনি নিজের কনফিগারেশনে স্পষ্ট করে উল্লেখ করতে পারেন।
দ্বিতীয়ত, আপনাকে Cache-Control: no-cache হেডারে যোগ করতে পারতে হবে, তবে
শুধুমাত্র আপনার HTML ডকুমেন্টের জন্য (এই ক্ষেত্রে, index.html)। শর্তসাপেক্ষে এই হেডার সেট করার সবচেয়ে সহজ উপায় হল,
কাস্টম setHeaders function লেখা
এবং তার মধ্যে, ইনকামিং অনুরোধটি HTML ডকুমেন্টের জন্য কিনা তা চেক করা।
server.js-এ স্ট্যাটিক সার্ভিং কনফিগারেশন এইভাবে শুরু হয়:
app.use(express.static('public'));
- উপরে বর্ণিত পরিবর্তনগুলি করুন এবং আপনি এমন কিছু পাবেন যা দেখতে এইরকম:
app.use(express.static('public', {
etag: true, // Just being explicit about the default.
lastModified: true, // Just being explicit about the default.
setHeaders: (res, path) => {
if (path.endsWith('.html')) {
// All of the project's HTML files end in .html
res.setHeader('Cache-Control', 'no-cache');
}
},
}));
ভার্সন করা URL-এর জন্য ক্যাশিং হেডার কনফিগার করুন
"ফিঙ্গারপ্রিন্ট" বা
ভার্সন সংক্রান্ত তথ্য আছে এবং যার কন্টেন্ট কখনও পরিবর্তন করা হবে না এমন URL-এর অনুরোধের উত্তর দেওয়ার সময়,
আপনার উত্তরে Cache-Control: max-age=31536000 যোগ করুন। app.15261a07.js এবং
style.391484cf.css এই বিভাগের মধ্যে পড়ে।
শেষ ধাপে ব্যবহার করা
setHeaders function
-এর উপর ভিত্তি করে, প্রদত্ত অনুরোধটি কোনও ভার্সন করা URL-এর জন্য কিনা তা চেক করতে আপনি অতিরিক্ত লজিক যোগ করতে পারেন এবং যদি তাই হয়, তাহলে Cache-Control:
max-age=31536000 হেডার যোগ করুন।
এটি করার সবচেয়ে শক্তিশালী উপায় হল
রেগুলার এক্সপ্রেশন
ব্যবহার করে দেখা যে অনুরোধ করা অ্যাসেটটি কোনও নির্দিষ্ট প্যাটার্নের সাথে মিলছে কিনা,
যে প্যাটার্নের মধ্যে হ্যাশ পড়ে বলে আপনি জানেন। এই স্যাম্পেল প্রোজেক্টের ক্ষেত্রে, এটি সবসময় ০–৯ সংখ্যা এবং a–f ছোট হাতের অক্ষরের সেট থেকে আটটি অক্ষর (অর্থাৎ,
হেক্সাডেসিমাল অক্ষর)। হ্যাশ
সবসময় দু'দিকেই . অক্ষর দ্বারা আলাদা করা থাকে।
একটি রেগুলার এক্সপ্রেশন যা
সেই সাধারণ নিয়মের সাথে মেলে
সেটি new RegExp('\\.[0-9a-f]{8}\\.') হিসেবে প্রকাশ করা যেতে পারে।
setHeadersফাংশনটি পরিবর্তন করুন যাতে এটি এইরকম দেখায়:
app.use(express.static('public', {
etag: true, // Just being explicit about the default.
lastModified: true, // Just being explicit about the default.
setHeaders: (res, path) => {
const hashRegExp = new RegExp('\\.[0-9a-f]{8}\\.');
if (path.endsWith('.html')) {
// All of the project's HTML files end in .html
res.setHeader('Cache-Control', 'no-cache');
} else if (hashRegExp.test(path)) {
// If the RegExp matched, then we have a versioned URL.
res.setHeader('Cache-Control', 'max-age=31536000');
}
},
}));
DevTools ব্যবহার করে নতুন আচরণ কনফার্ম করুন
স্ট্যাটিক ফাইল সার্ভারে পরিবর্তন করার পরে, DevTools নেটওয়ার্ক প্যানেল খুলে লাইভ অ্যাপ প্রিভিউ করে আপনি চেক করে দেখতে পারেন যে সঠিক হেডার সেট করা হয়েছে কিনা।
- নেটওয়ার্ক প্যানেলে দেখানো কলাম কাস্টমাইজ করুন যাতে সবচেয়ে প্রাসঙ্গিক তথ্য অন্তর্ভুক্ত করা যায়। এর জন্য কলাম হেডারে ডানদিকের বোতামে ক্লিক করুন:
এখানে, Name, Status, Cache-Control,
ETag এবং Last-Modified কলামের দিকে মনোযোগ দিতে হবে।
- DevTools-এর নেটওয়ার্ক প্যানেল খুলে পৃষ্ঠা রিফ্রেশ করুন।
পৃষ্ঠাটি লোড হওয়ার পরে, আপনি নেটওয়ার্ক প্যানেলে এন্ট্রি দেখতে পাবেন যা নিম্নলিখিতটির মতো দেখতে:
প্রথম সারিটি হল আপনি যে HTML ডকুমেন্টে নেভিগেট করেছেন সেটির জন্য। এটি Cache-Control: no-cache-এর সাথে
সঠিকভাবে পরিবেশন করা হয়। সেই অনুরোধের জন্য HTTP রেসপন্স স্ট্যাটাস
হল 304। এর
অর্থ হল, ব্রাউজার জানত যে ক্যাশে করা HTML অবিলম্বে ব্যবহার করা যাবে না, কিন্তু পরিবর্তে
ওয়েব সার্ভারে একটি HTTP অনুরোধ করেছে, Last-Modified এবং ETag
তথ্য ব্যবহার করে দেখেছে যে এটির ক্যাশে আগে থেকে থাকা HTML-এ কোনও আপডেট আছে কিনা। HTTP 304 রেসপন্স থেকে বোঝা যায় যে HTML আপডেট করা হয়নি।
পরবর্তী দুটি সারি হল ভার্সন করা JavaScript এবং CSS অ্যাসেটের জন্য। আপনি
দেখতে পাবেন যে সেগুলি Cache-Control: max-age=31536000-এর মাধ্যমে পরিবেশন করা হয়েছে এবং প্রতিটির
HTTP স্ট্যাটাস হল 200।
ব্যবহৃত কনফিগারেশনের কারণে, Node.js সার্ভারে কোনও প্রকৃত অনুরোধ করা হচ্ছে না এবং এন্ট্রিতে ক্লিক করলে আপনি অতিরিক্ত বিবরণ দেখতে পাবেন, যার মধ্যে রয়েছে যে প্রতিক্রিয়াটি "(ডিস্ক ক্যাশে থেকে)" এসেছে।
ETag এবং Last-Modified কলামের আসল ভ্যালু খুব একটা গুরুত্বপূর্ণ নয়। গুরুত্বপূর্ণ বিষয় হল, এগুলি সেট করা হচ্ছে কিনা তা কনফার্ম করা।
সারসংক্ষেপ করা হচ্ছে
এই কোডল্যাবের ধাপগুলি অনুসরণ করার পরে, আপনি এখন জানেন যে HTTP ক্যাশের সর্বোত্তম ব্যবহারের জন্য Express ব্যবহার করে Node.js-ভিত্তিক ওয়েব সার্ভারে HTTP রেসপন্স হেডার কীভাবে কনফিগার করতে হয়। এছাড়াও, Chrome-এর DevTools-এ নেটওয়ার্ক প্যানেলের মাধ্যমে, প্রত্যাশিত ক্যাশিং আচরণ ব্যবহার করা হচ্ছে কিনা তা কনফার্ম করার জন্য প্রয়োজনীয় ধাপগুলি আপনার কাছে রয়েছে।