Gatsby vs Next.js: কীনার জন্য কোনটি বেছে নেবেন?

Gatsbyjs এবং Next.js বর্তমানে ওয়েব ডেভেলপমেন্টের দুটি সবচেয়ে হট টপিক। আমি মেসেজ বোর্ড এবং ইউটিউব কমেন্ট সেকশনে অনেক লোক দেখি যারা জিজ্ঞেস করছেন কেন আপনি একটি অন্যটির চেয়ে বেছে নেবেন। আমার মাথা গত ১২ মাস ধরে Next.js এবং Gatsbyjs-এ ডুবা থাকায়, আমি মনে করি এটি আমাকে এই আলোচনায় যোগদানের যোগ্যতা দেয়।

Next.js বা Gatsby আপনার প্রজেক্টের জন্য ব্যবহার করার কথায়, "সঠিক কাজের জন্য সঠিক টুল" এক্সপ্রেশন মনে পড়ে। কিন্তু চিন্তা করবেন না, আমি আপনাকে इतने vague উত্তর দিয়ে ছেড়ে দেব না।

TLDR:

• Gatsby এবং Next.js উভয়ই React ফ্রেমওয়ার্ক এবং উভয়ই SSR (Server-Side Rendering) আউট-অফ-দ-বক্স দেয় (SEO-র জন্য চমৎকার)।
• Next.js দুটোর মধ্যে কম ओপিনিয়েটেড, কিন্তু শিখতে কঠিন, কম ব্যাটারি ইনক্লুডেড, মানে আপনি অধিক স্বাধীন।
• Next.js 아르গুয়েবলি বড় পরিমাণ ডেটা যা সemeen আপডেট হয় সে সাইটগুলোর জন্য ভালো।

Next.js এবং Gatsby.js সাদৃশ্য

লোকেরা Gatsby এবং Next.js তুলনা করার পেছনে ভালো কারণ আছে। সেগুলো পার্থক্যের চেয়ে অনেক বেশি মিল রয়েছে। তাই, প্রথমে আসুন দেখি Gatsby এবং Next.js-এ কী কী মিল রয়েছে, তারপর পার্থক্য আলোচনা করব।

Gatsby এবং Next.js:

• উভয়ই আউট-অফ-দ-বক্স হাই পারফরম্যান্স দেয়।
• উভয়ই জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক, এবং উভয়ই React-বেসড।
• উভয়ই আপনাকে Server-Side Rendering (SSR) এবং Client-Side Rendering (CSR) আউট-অফ-দ-বক্স দেয়
• উভয়ই Static Site Generation (SSG) এবং Dynamic Site Generation (DSG) প্রদান করে।
• উভয়ই কোড-স্প্লিটিং এবং এক্সিলেন্ট ক্যাশিং আউট-অফ-দ-বক্স দেয়।
• উভয়ই পেজ ডেটা প্রিফেচিং অফার করে। Gatsby এটি অটোমেটিক্যালি করে, Next.js-এ prefetch প্রপ আছে যেটি আপনি তাদের Link কম্পোনেন্টের সাথে ব্যবহার করতে পারেন (রাউটিং-এর জন্য)।
• উভয়ই পেজের জন্য অটোমেটিক রাউটিং প্রদান করে, তাদের নিজস্ব রাউটার ব্যবহার করে (Gatsby Reach Router ব্যবহার করে, Next.js Next.js Router ব্যবহার করে)।
• Gatsby এবং Next.js উভয়ই Rest API-র থেকে ডেটা ফেচ করতে পারে এবং যেমন WordPress, Contentful, বা Prismic CMS ব্যাকএন্ড হিসেবে ব্যবহার করতে পারে।

আউট-অফ-দ-বক্স, Gatsby এবং Next.js আপনাকে Server-Side Rendering (SSR) এবং Client-Side Rendering (CSR)-এর বেস্ট অফ বোথ ওয়ার্ল্ডস দেয়। SSR SEO-র জন্য চমৎকার, এবং CSR আপনার ইউজারদের সোগ্লোরিয়াস ইনস্ট্যান্ট পেজ ট্রানজিশন (পেজ রিফ্রেশ ছাড়া) দেয় যা নেটিভ মোবাইল অ্যাপ ব্যবহার করার স্মৃতি তুলে ধরে।

Next.js এবং Gatsby.js পার্থক্য

আমি স্পষ্ট করতে চাই যে নিচের বিষয়গুলো আউট-অফ-দ-বক্স আপনি যেটি পাবেন তার উপর ভিত্তি করে, না যে উভয়টিই কাস্টমাইজেশন দিয়ে কীতে পরিণত হতে পারে। Next.js এবং Gatsby উভয়ই হাইয়ারলি ফ্লেক্সিবল।

Gatsby এবং Next.js "ইনফিনিটলি" কাস্টমাইজ করা যায়। সেগুলো উভয়ই আপনাকে এতটুকু বলবে। ক্লাসিক ফ্রেজ "সকল মানুষের জন্য সব কিছুর কথা চাওয়া" মনে পড়ে। কাউকে পোটেনশিয়াল কাস্টমার বাদ দিতে চায় না, এবং ভালো বিজনেস পিপল হিসেবে, সেগুলো তাদের স্ট্রেঞ্জ হাইলাইট করে যেন তাদের ضعف না। সেটি উচিত।

কোনোটিই মিথ্যা বলছে না, কিন্তু যেহেতু Next.js এবং Gatsby উভয়ই এতটুকু ফ্লেক্সিবল এবং কনস্ট্যান্টলি إيفলভ করছে (হュージ ফাইন্যান্সিয়াল ব্যাকিং-সহ), লম্ব সময়ের জন্য বলা কঠিন যে কোনো নির্দিষ্ট ইউজ কেসের জন্য একটি টুল অন্যটির চেয়ে बेटার।

আমার কোনো স্বার্থ নেই এই গেমে, তাই এটি আমার আনবায়াসড পারস্পেক্টিভ। Next.js এবং Gatsby কে আলাদা করে 주는 প্রধান বিষয়গুলো:

• Gatsby আপনাকে GraphQL ব্যবহার করতে বাধ্য করে (অপিনিয়েটেড), Next.js-এ এটি অপশনাল।
• Gatsby আউট-অফ-দ-বক্স ইমেজ ট্রান্সফরমেশন হ্যান্ডল করে (কিছুটা অপিনিয়েটেড) যদিও আপনাকে বাধ্য করে না ব্যবহার করতে।
• Gatsby অটোমেটিক্যালি ইমেজে লেজি-লোডিং যোগ করে (অপিনিয়েটেড)
• একটি Gatsby সাইটকে Progressive Web App (PWA)-এ রূপান্তর করা যায় একটি ছোট প্লাগইন ইনস্টল করে। Next.js-এ এটার কোনো সিম্পল পদ্ধতি দেখিনি আমি।
• Next.js ডাইনামিক এবং স্ট্যাটিক রাউটিং উভয়ই অফার করে। जहाँ পর্যন্ত আমি জানি Gatsby শুধু স্ট্যাটিক/হার্ডকোডেড রাউটিং অফার করে। আমি ১০০% নিশ্চিত নই এই ব্যাপারে কারণ স্পষ্ট ইনফো পাওয়া কঠিন (যখন আরও জানব আপডেট করব)।
• Gatsby তার SSR সাইট-বিল্ডিং (SSG) ফেজে করে।
• Next.js তার SSR ডাইনামিক্যালি পেজ রিকোয়েস্টের সময় করে — কিন্তু সেগুলো SSG ও অফার করে তাদের স্ট্যাটিক এক্সপোর্ট ফিচারের মাধ্যমে।

কাস্টমাইজেশনের জন্য, Gatsby-র টন টন ইউজফুল প্লাগইন আছে যেগুলো অধিকাংশ স্ট্রেইটফরওয়ার্ড ইনস্টল করা যায় (Comments থেকে Algolia সার্চের জন্য)। Next.js-র GitHub রিপোতে একটি /examples ডিরেক্টরি আছে যা Next.js-সহ বিভিন্ন লাইব্রেরি ("প্লাগইন") শোকেস করে। কিন্তু আমার এক্সপেরিয়েন্সে Next.js examples কনফিগার করা Gatsby প্লাগইন ব্যবহার করার চেয়ে কঠিন।

ডাইনামিক ডেটা ফেচিং

যদিও Gatsby আউট-অফ-দ-বক্স স্ট্যাটিক্যালি জেনারেটেড, Gatsby বিভিন্ন সার্ভার API কুয়েরি করে ডাইনামিক্যালি ডেটা ফেচ করতে পারে।

Next.js সিমিলার ফ্যাশনে ডাইনামিক ডেটা ফেচিং করতে পারে।

আপনার যদি SSR দরকার হয়, তবে আপনি Gatsby-এর বিল্ট-ইন GraphQL API ব্যবহার করে WordPress বা Contentful-এর মত CMS থেকে ডেটা কনসাম করতে পারেন ("Headless CMS") এবং তারপর একটি ওয়েবহুক (আপনার CMS থেকে) ব্যবহার করে অটো-ডিপ্লয়মেন্ট হ্যান্ডল করতে পারেন প্রতিবার আপনি কন্টেন্ট পাবলিশ করলে।

কনভেনশন vs কনফিগারেশন

সাধারণত, Gatsby দুটোর মধ্যে বেশি অপিনিয়েটেড। এর উপসাইড হচ্ছে আপনাকে কম ডিসিশন নিতে হয়। Next.js চালু করতে আরও কনফিগারেশন লাগে। এর উপসাইড হচ্ছে কিছুই আপনার ওপর ফোর্স করা হয় না।

Next.js আরও একটি "গ্রাউন্ড আপ থেকে অ্যাপ বানান" প্রোডাক্ট, কিছু নাইস ব্যাটারি ইনক্লুডেড (SSR, রাউটিং, প্রিফেচিং, কোড-স্প্লিটিং) সহ।

Gatsby আরও একটি "আপনার স্টার্টিং পয়েন্টে সেগুলো আছে যেগুলো আপনি সম্ভবত চাইবেন" প্রোডাক্ট, অনেক ব্যাটারি ইনক্লুডেড (GraphQL, প্রিফেচিং, SSR, কোড-স্প্লিটিং, লেজি লোডিং, ইমেজ ট্রান্সফরমেশন) সহ।

আপনার যদি আপনার প্রোডাক্টের প্রতিটি কোণে পিনপয়েন্ট স্পেসিফিক কাস্টমাইজেশন দরকার হয়, Next.js দুটোর মধ্যে बेटার চয়েস, সিম্পলি কারণ এটি আরও "বেয়ারবোন" (কম জিনিস করা থাকে আপনার জন্য) আউট-অফ-দ-বক্স।

প্রজেক্ট শুরু করার সময় ফ্রেমওয়ার্ক থেকে ফিচার রিমুভ করাটা কখনো মজা নয়, তাই আপনি যদি GraphQL পছন্দ না করেন (যেকোনো কারণেই) তবে Gatsby আপনার জন্য নয়।

GraphQL এখন সবচেয়ে হাইপে (ভালো কারণে) যা Gatsby-কে এর ফ্রেমওয়ার্কের অংশ করা হয় সেটি আর্গু করতে কঠিন করে দেয়। আমি এটিকে বোনাস হিসেবে মনে করি, কিন্তু আপনার প্রেফারেন্স ভিন্ন হতে পারে। মনে রাখা উচিত যে Apollo (একটি GraphQL ইঞ্জিন) Next.js অ্যাপগুলোর সবচেয়ে পপুলার অ্যাডিশনগুলোর একটি।

Gatsby ইমেজ ট্রান্সফরমেশন এবং লেজি লোডিং হ্যান্ডল করে আপনার জন্য, যদিও অপিনিয়েটেড, এটি আপনাকে যে ম্যাসিভ পারফরম্যান্স বাস্ট দেয়, সেটি সম্ভবত আপনাকে তাদের ক্ষমা করবে সেটি ডিসাইড করার জন্য। কিন্তু আবার, হয়তো আপনি নিজের পদ্ধতিতে ইমেজ ট্রান্সফরমেশন হ্যান্ডল করতে চান, এবং সেক্ষেত্রে Next.js बेटার চয়েস।

SEO-এর জন্য Gatsby vs Next.js

যেহেতু Gatsby এবং Next.js উভয়ই আউট-অফ-দ-বক্স সার্ভার-সাইড রেন্ডার্ড, সেগুলো উভয়ই उन ওয়েবসাইটগুলোর জন্য এক্সিলেন্ট চয়েস যাদের চমৎকার SEO (Search Engine Optimization) দরকার — যেটি বর্তমানে প্রায় সকল পাবলিক ওয়েবসাইটের জন্য।

তবে, একটি নির্দিষ্ট SEO ইউজ-কেস আছে যেখানে Next.js Gatsby-র চেয়ে চমকে:

আপনি যদি টুইটার বা রেডডিটের মত একটি প্ল্যাটফর্ম বানান, যেখানে আপনাকে কনস্ট্যান্টলি কন্টেন্ট আপডেট পুশ করতে হয় — এবং আপনার সকল কন্টেন্টের জন্য অপ্টিমাল SEO দরকার হয় — তবে Next.js আপনার বেস্ট অপশন।

কেন? কারণ Next.js আপনার নিজস্ব সার্ভার থেকে কন্টেন্ট আপডেট ডাইনামিক্যালি সার্ভার-সাইড রেন্ডার করতে পারে, ইনস্ট্যান্টলি যেকোনো পরিবর্তন হলে।

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

যদি অন্যদিকে আপনার Gatsby সাইট এক্সটার্নাল API থেকে ডাইনামিক্যালি ডেটা ফেচ করে আপডেট শো করে আপনার সাইটে (যেমন Talkard বা Disqus-এর মত কমেন্ট সার্ভিসের মাধ্যমে) তবে আপনি আপনার Gatsby সাইটে রিয়েল-টাইম কন্টেন্ট আপডেট পাবেন — কিন্তু আপনি SEO বেনিফিট পাবেন না, কারণ আপডেটগুলো ক্লায়েন্ট-সাইড রেন্ডার্ড হবে — সার্ভার-সাইড রেন্ডার্ড নয় (যেটি SEO-র জন্য চাইতে হয়)।

সাধারণ রিয়েল-ওয়ার্ল্ড অবজারভেশন

বড় কোম্পানি এবং বড় সাইটগুলো টেন্ড করে Next.js ব্যবহার করতে Gatsby-র চেয়ে। যদিও ভুল ধারণা না নিন, ReactJS-এর অফিসিয়াল ডকুমেন্টেশন পেজ Gatsby ব্যবহার করে। আমি শুধু আমার অবজারভেশন বলছি।

Next.js ব্যবহারকারী বড় ওয়েবসাইট:

• Marvel.com
• Netflix
• Uber Marketplace
• Invisionapp
• Material UI

Gatsby ব্যবহারকারী বড় ওয়েবসাইট

• ReactJS
• MarvelApp.com

হ্যাঁ, আশ্চর্য-genetically, Marvel উভয়ই ব্যবহার করে। তারা মেইন সাইটের জন্য Next.js ব্যবহার করে, এবং MarvelApp (একটি ডিজাইন প্ল্যাটফর্ম)-এর জন্য Gatsby।

ব্লগিং-এর জন্য, আমি কয়েকটি ডিসেন্ট Next.js ব্লগ উদাহরণ দেখেছি কিন্তু 꽤 কিছু ভালো Gatsby ব্লগ উদাহরণ দেখেছি। Tania Rascia-এর এটি আমার ফেভারিট 중 একটি।

যদিও Gatsby স্পষ্ট করে বলে যে তারা "ব্লগারদের জন্য সাদা আরেকটা স্ট্যাটিক সাইট জেনারেটর" (Jekyll-এর মত) হয়তে চায় না, এটা এই সত্য পরিবর্তন করে না যে এটি ব্লগিং-এ খুব পপুলার, এবং অনেক WordPress ইউজার সেটি কারণে Gatsby-এ যাচ্ছে (Tania সহ যিনি উপরে মেনশন করা হয়েছে)।

Gatsby বা Next.js-সহ Headless CMS

অনেক ডেভেলপার ট্রেন্ডিং "Headless CMS" বা "Decoupled CMS" সম্পর্কে কথা বলছেন, যেখানে আপনি WordPress ব্যবহার করবেন ব্যাকএন্ড হিসেবে এবং তারপর React (অথবা Angular/Vue) ব্যবহার করবেন Rest API/GraphQL দিয়ে ডেটা কনসাম করার জন্য। Next.js এবং Gatsby উভয়ই Headless CMS প্রোডাক্টের জন্য ফ্রন্টএন্ড অ্যাপ হিসেবে ব্যবহার করা যায়। থিওরিতে এটি খুব আশা দায়ক শোনায়, কিন্তু अबারও আমি কয়েকটি ভালো উদাহরণ দেখেছি:

• Next.js + WordPress by Kata.ai
• Gatsby + WordPress by Chase McCoy
• Gatsby + WordPress by Indigo Tree
• Gatsby + WordPress by Adam Rasheed

আদাম এবং চেইজের Gatsby + WordPress উদাহরণ দুটোই খুব ফাস্ট। কাতার Next.js উদাহরণের জন্য, যদিও ওয়েবসাইটটি সুন্দর, এটা কিছু স্লো। যেহেতু হাই-এন্ড পারফরম্যান্স Next.js-এর মূল সেলিং পয়েন্টগুলির একটি, কাতা Next.js WordPress-সহ ব্যবহার করার জন্য সবচেয়ে কনভিন্সিং উদাহরণ নয়।

Headless CMS এখনও একটি রিলেটিভলি নতুন কনসেপ্ট। কোনো সন্দেহ নেই যে Headless CMS-র জেনারেলি (শুধু Headless WordPress নয়) ২০২০ থেকে আগামীতে হট টপিক হয়ে যাবে। এবং যেহেতু Gatsby এবং Next.js উভয়ই SSR হ্যান্ডল করে, সেগুলো উভয়ই আপনার Headless ফ্রন্টএন্ড হিসেবে স olid অপশন।

Gatsby এবং Next ডিপ্লয়/হোস্টিং

যেহেতু Gatsby স্ট্যাটিক্যালি জেনারেটেড (প্রি-বিল্ড) ডিপ্লয়মেন্টের আগে, এটি যেকোনো জায়গায় রান করতে পারে নিজস্ব সার্ভার ছাড়া। সাধারণত Next.js-এ Node.js সার্ভার লাগে রান করার জন্য যদি না আপনার পুরো অ্যাপ স্ট্যাটিক সাইট হিসেবে এক্সপোর্ট করা থাকে, ঠিক Gatsby-এর মত। (হ্যাঁ এটাও সম্ভব)। কিছু হোস্টিং সলিউশন একটার জন্য টেইলার-মেড অন্যটির চেয়ে।

Gatsby + Netlify

Gatsby এবং Netlify মேড ইন হেভেন। আপনার সাইট যদি সার্ভারলেস হয়, Gatsby সাইট Netlify-এ ডিপ্লয় করা লিটারেলি ৩০ সেকেন্ডের কমে কনফিগার করা যায়।

এখান থেকে কন্টিনিউাস ডিপ্লয়মেন্ট বয়ল ডাউন হয়ে যাবে একটি সিঙ্গেল git push origin master কমান্ড আপনার টার্মিনালে চালানো — যদি আপনি gatsby-এর gatsby-plugin-netlify প্লাগইন ব্যবহার করেন।

Next.js + Now

Next.js Now হোস্টিং সার্ভিসের সাথে ভালো জুটি বসে, এবং ভালো কারণেই, Zeit হলো Now (হোস্টিং সার্ভিস) এবং Next.js (ফ্রেমওয়ার্ক) দুটোর পিছনে থাকা কোম্পানি।

Netlify-এর মত, Now-এ ডিপ্লয় করা সেকেন্ডের মধ্যে হয়ে যায়, কিন্তু এটা ডিপেন্ড করে আপনি কী টাইপের অ্যাপ ডিপ্লয় করছেন।

নোট: যদিও Gatsby এবং Next.js নির্দিষ্ট হোস্টিং সার্ভিসের সাথে ভালো জুটি বসে, আপনি অবশ্যই একটি স্ট্যাটিক/ফ্রন্টএন্ড Next.js অ্যাপ Netlify-এ হোস্ট করতে পারেন (এখানে উদাহরণ), এবং Gatsby-কে Now-এ হোস্ট করতে পারেন (এখানে উদাহরণ)।

উভয় ফ্রেমওয়ার্ক DigitalOcean, Heroku ইত্যাদিতে হোস্ট করা যায়।

আপনি যদি নিজের ব্যাকএন্ড সার্ভার/API হোস্ট করতে চান (সার্ভারলেস না যেন) Next.js বা Gatsby অ্যাপের জন্য তবে আপনি DigitalOcean, Heroku, বা Now দেখবেন। সাবধান থাকুন যে ("এখন পর্যন্ত") Zeit-এর Now v2.0,-এ, তারা আর Docker সাপোর্ট করে না, যা অনেক ডেভেলপারের জন্য ডিলব্রেকার।

Next.js vs Gatsby ডিপ্লয়মেন্ট টাইম

Gatsby রিবিল্ড এবং রি-ডিপ্লয় করার সময় ডिले থাকে আপডেটের মধ্যে। ডिले কত বড় সেটি ডিপেন্ড করে আপনার সাইট কত বড়। যত বড় হবে ততো বেশি টাইম লাগবে রিবিল্ড এবং রি-ডিপ্লয় করতে। আমি সম্প্রতি এই সাইটটি Gatsby-এ বিল্ড করেছি, এবং রিবিল্ড থেকে রি-ডিপ্লয়মেন্ট সম্পন্ন হতে প্রায় ২ মিনিট লাগে, এবং এটি একটি রিলেটিভলি ছোট সাইট।

Next.js-এ এই রিবিল্ড > রি-ডিপ্লয় > ডাউনটাইম সমস্যা নেই। আপনি যদি নিজের ব্যাকএন্ড সার্ভার রান করেন, আপনার নতুন কন্টেন্ট তাৎক্ষণিক আপডেট হবে।

এটি সমস্যা নয় যদি Gatsby ইনক্রিমেন্টাল আপডেট হ্যান্ডল করা সহজ করে দেয় ডাউনটাইম/ডिले ছাড়া, কিন্তু এখন পর্যন্ত আপনাকে নিজে পথ খুঁজে বের করতে হবে (যেমন websocket দিয়ে)।

রিসোর্স

• Postlight.com-এ GitHub-এ একদম ইন্টারেস্টিং WordPress + Next.js স্টার্টার কিট আছে।
• Headless CMS-র জন্য, WordPress-এর কিছু স olid অ্যাল্টারনেটিভ হলো Prismic, Contentful, Sanity, Ghost এবং ButterCMS