গ্যাটসবি জেএস (GatsbyJs) কি, কেন, হুয়াই?

বাংলা ব্লগজাভাস্ক্রিপ্ট২৭ সেপ্টেম্বর, ২০২২

গ্যাটসবি জেএস (GatsbyJs) কি, কেন, হুয়াই?

গ্যাটসবি জেএস মূলত একটি রিয়েক্টজেএস বেজড জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক, যা স্ট্যাটিক ওয়েবসাইট জেনারেট করার জন্য ইউজ করা হয়। অন্যান্য স্ট্যাটিক সাইট জেনারেটরগুলি থেকে এটা অনেক বেশী পাওয়ারফুল এবং রিলায়েবল হওয়ায় গত কয়েক বছরে Gatsby এর জনপ্রিয়তা আকাশ ছুঁয়েছে।

গ্যাটসবি প্রগ্রেসিভ ওয়েব এপ তৈরির জন্য ওয়ান অব দা বেস্ট টুল। গ্যাটসবিতে জেনারেট করা সাইটে ইনিশিয়াল লোডের সময় শুধুমাত্র ক্রিটীক্যাল রিসোর্সগুলি লোড করে, ফলে ওয়েবসাইট লোড হয় অনেক দ্রুত। ওয়েবসাইট লোড হওয়ার পর এটা অন্যান্য পেজের ডাটাগুলিও লোড করা শুরু করে, তাই ইনার পেজের ন্যাভিগেশনগুলি হয় অলমোস্ট ইন্সট্যান্টলি।

স্ট্যাটিক সাইট জেনারেটর কিভাবে কাজ করে?

যারা স্ট্যাটিক সাইট জেনারেটর সম্পর্কে জানেন না, তাদের জন্য এই প্যারাগ্রাফটি। স্ট্যাটিক সাইটে কোন সার্ভার-সাইড কোড এবং কোন ডাটাবেজ থাকে না। শুধুমাত্র HTML, CSS আর JavaScript কোডের একটা প্যাকেজ হয় স্ট্যাটিক সাইট। মডার্ন স্ট্যাটিক সাইটগুলিতে খুব একটা এইচটিএমএল কোড ও থাকে না, ইউজার এন্ডে জাভাস্ক্রিপ্টের মাধ্যমে এইচটিএমএল জেনারেট করে।

মডার্ন স্ট্যাটিক সাইট জেনারেটরগুলি আসলে ডাটাবেজ থেকে প্রয়োজনমত ডাটা নিয়ে একটি সিঙ্গেল পেজ এপ্লিকেশন (SPA) বিল্ড করে। আর সেই এপ্লিকেশনটি ই ফ্রন্ট-এন্ড লাইব্রেরীর (গ্যাটসবির ক্ষেত্রে ReactJS) মাধ্যমে ব্রাউজারে লোড হয়। সহজ কথায় গ্যাটসবিতে বিল্ড করা কোন ওয়েবসাইট একটি ফুল ফ্লেজড রিয়েক্ট এপ্লিকেশন।

রিয়েক্ট ইউজ না করে কেন গ্যাটসবি?

আগেই বলেছি গ্যাটসবি একটি রিয়েক্ট বেজড ফ্রেমওয়ার্ক। সুতরাং আপনি যা কোড করবেন, রিয়েক্টজেএস এই করবেন। গ্যাটসবি মূলত আপনাকে রিয়েক্ট, গ্রাফকিউএল, ওয়েবপ্যাক, ইত্যাদি এর একটি কমপ্লিট প্যাকেজ দিচ্ছে। আপনার যদি রেগুলার কন্টেন্ট আপডেট করার প্রয়োজন না পরে, গ্যাটসবি হতে পারে বেস্ট চয়েস। রিয়েক্টের রাউটিং, লিংকিং, ইমেজ হ্যান্ডেলিং, এসইও, লোডিং অপটিমাইজেশন, ইত্যাদি অসংখ্য বিষয়কে সিমপ্লিফাইড করে দিয়েছে গ্যাটসবি।

রিয়েক্টজেএস আর গ্যাটসবি একে অপরের অল্টারনেটিভ না। গ্যাটসবি মূলত রিয়েক্টজেএস কে ফ্রন্টএন্ডে রেখে দারুণ একটা স্ট্যাটিক সাইট জেনারেটর হিসেবে প্রতিষ্ঠিত করেছে নিজেকে।

স্ট্যাটিক সাইট জেনারেটর হিসেবে গ্যাটসবি কেন সেরা?

গ্যাটসবি কেন সেরা? এই প্রশ্নের গুরুত্বপুর্ন উত্তর হলো, রিয়েক্টজেএস। আপনি যদি রিয়েক্ট ভালবাসেন, স্ট্যাটিক জেনারেটর হিসেবে গ্যাটসবিকে ভালবাসতে বাধ্য।

গ্যাটসবিতে রিয়েক্টের সম্পুর্ন প্লাগিন লাইব্রেরী ইউজ তো করতে পারবেনই, সাথে গ্যাটসবির রয়েছে নিজস্ব অসংখ্য প্লাগিন। তাছাড়া অন্যান্য প্লাটফর্মের সাথে ইন্টিগ্রেট করার জন্য সেইসব প্ল্যাটফর্মের প্লাগিন, গাইডলাইন, রিসোর্স এর অভাব নেই। উদাহরণ হিসেবে নেয়া যায় ওয়ার্ডপ্রেস কে। গ্যাটসবির ডাটা লেয়ার গ্রাফকিউএল বেজড, আর ওয়ার্ডপ্রেস হলো এসকিউএল বেজড। এখন ওয়ার্ডপ্রেসের ডাটা গ্যাটসবিতে ইউজ করার জন্য গ্যাটসবির নিজস্ব ওয়ার্ডপ্রেস প্লাগিন রয়েছে। তাছাড়া অন্যান্য প্ল্যাটফর্মগুলির সাথেও ইন্টিগ্রেট করা অনেক সহজ, যেমন কন্টেন্টের জন্য কন্টেন্টফুল, সার্চের জন্য এলগলিয়া, ইত্যাদি।

সাইটের ইমেজ অপটিমাইজেশন এবং লেজি লোডিং এর জন্য গ্যাটসবির নিজস্ব ইমেজ প্রসেসিং প্যাকেজ আছে। আর গ্যাটসবির প্রগেসিভ ওয়েব এপ (PWA) এবং অফলাইন সাপোর্টের তো কোন তুলনা ই নেই।

গ্যাটসবি’র পার্ফরমেন্স

ফ্রেমওয়ার্ক হিসেবে গ্যাটসবি’কে পছন্দ করার অন্যতম কারন হলো এর পার্ফরমেন্স। গুগলের লাইটহাউজকে যদি বুড়ো আঙ্গুল দেখাতে চান, ওয়েলকাম টু গ্যাটসবি। গ্যাটসবি ওয়েবসাইটকে যতভাবে অপ্টিমাইজ করা যায় ততোভাবেই অপ্টিমাইজ করে ছাড়ে। প্রিফেচিং, ক্রিটিক্যাল রিসোর্স লোডিং, ব্যাকগ্রাউন্ড রিসোর্স লোডিং, ইমেজ অপ্টিমাইজিং, লেজি লোডিং, ইত্যাদি সবই করে ফেলে গ্যাটসবি।

গ্যাটসবির পার্ফরমেন্স এর ব্যাপারে টেকনিক্যাল কিছু বললাম না এই ব্লগে, আরেকদিন আলাদা একটা ব্লগ লিখবো এই ব্যাপারে। গুগলে সার্চ দিয়ে গ্যাটসবিতে করা কিছু সাইট দেখেন, তাহলেই বুঝবেন। আর আমার ব্লগে যেহেতু এসেই পরেছেন, আমার ব্লগটাও ঘুরে দেখতে পারেন, এটাও গ্যাটসবি দিয়েই করা।

গ্যাটসবি’তে করা ওয়েবসাইটের এসইও

বর্তমানে ওয়েবসাইটের স্পিড অনেক গুরুত্বপুর্ন এসইওর জন্য, যা গ্যাটসবি তো পাচ্ছেনই। তাছাড়া, মেটাডাটা, স্ট্রাকচারড ডাটা, সাইটম্যাপ সবই এড করতে পারবেন গ্যাটসবিতে সহজেই। আমার এই ব্লগটাকে একেসময় একেক প্ল্যাটফর্মে নিয়ে যাই। এই নিয়ে দুইবার গ্যাটসবিতে করেছি আমার ব্লগ। যতদিন আমার ব্লগটা গ্যাটসবিতে থাকে, ড্রামাটিক্যালি ব্লগের অর্গানিক ট্র্যাফিক বেড়ে যায়।

গ্যাটসবি’র সমস্যা

এবার আসি গ্যাটসবির কিছু সমস্যা নিয়ে। আপনার যদি কন্টেন্ট হেভি সাইট হয়, তাহলে সাইটের বিল্ড টাইম অনেক বেড়ে যাবে। আমার ব্লগ বিল্ড হতে মোটামুটি ৩ থেকে ৪ মিনিট সময় লাগে। আরো কন্টেন্ট দিলে হয়তো আরো বেশী সময় লাগবে, অবশ্য যেই পরিমাণে ব্লগ লিখি আমি ইদানীং, আরো এক মিনিট বিল্ড টাইম বাড়াতে আমার কয়েক দশক লেগে যাবে।

যদি আপনার সাইটে রেগুলার কন্টেন্ট আপডেট করতে হয়, গ্যাটসবি আপনার জন্য নয়। সামান্য কিছু কন্টেন্ট আপডেট করতেও পুরো সাইট রিবিল্ড করতে হবে। যেমন এই ব্লগটা এখন ওয়ার্ডপ্রেসে লিখে, পাবলিশ করে, সাইট রিবিল্ড দিবো, তারপর সাইটে দেখা যাবে এই পোস্ট।

এর বাইরে খুব বেশী সমস্যা নাই গ্যাটসবিতে। আর এই সমস্যাগুলিও গ্যাটসবি’র না, এটাই হওয়ার কথা স্ট্যাটিক সাইট জেনারেটরে। যদি স্ট্যাটিক সাইটে আপনার ওয়েবসাইটের চাহিদা ফুল-ফিল হয়, গ্যাটসবি অবশ্যই বেস্ট চয়েস হওয়া উচিৎ।

কয়েক বছর ধরে গ্যাটসবি নিয়ে একটা ব্লগ লিখবো লিখবো করতেছিলাম। আজ গোঁজামিল দিয়ে লিখে দায় সারলাম। গ্যাটসবি নিয়ে একটা সিরিজ করার ইচ্ছা আছে, দেখি সময় পাই কিনা। ভুল-ভ্রান্তি নিজগুনে ক্ষমা করবেন।

এই টপিকের আরও কিছু পোস্টঃ

© সোলায়মান হায়দার