বিষয়বস্তু-চালিত ওয়েব অ্যাপের জন্য রেন্ডারিং

রেন্ডারিং একটি পৃষ্ঠা তৈরি করার জন্য প্রয়োজনীয় কোড তৈরির প্রক্রিয়াকে বোঝায় যা শেষ ব্যবহারকারীরা তাদের ব্রাউজারের মাধ্যমে ইন্টারঅ্যাক্ট করতে পারে। এর মধ্যে রয়েছে বিষয়বস্তু প্রস্তুত করা, যুক্তি প্রয়োগ করা এবং প্রক্রিয়াকরণ এবং যেকোন UI উপাদান এবং চূড়ান্ত পৃষ্ঠা প্রদর্শনের জন্য প্রয়োজনীয় অন্যান্য প্রয়োজনীয় উপাদান অন্তর্ভুক্ত করা। বিষয়বস্তু-চালিত অ্যাপ্লিকেশনগুলির দ্রুত লোড গতি, কম বিলম্ব এবং দ্রুত রেন্ডারিং সময়ের উপর ফোকাস থাকে।

সার্ভার-সাইড রেন্ডারিং (SSR)

সার্ভার-সাইড রেন্ডারিং (SSR) এর মধ্যে রয়েছে সার্ভারে ওয়েব পেজ রেন্ডার করা এবং তারপর সম্পূর্ণরূপে রেন্ডার করা এইচটিএমএলকে জাভাস্ক্রিপ্টের সাথে ক্লায়েন্ট-সাইডে রেন্ডার করার পরিবর্তে ক্লায়েন্টের ব্রাউজারে পাঠানো। যখন ব্যবহারকারীরা একটি অ্যাপ্লিকেশন অ্যাক্সেস করে, তাদের ব্রাউজার সার্ভারে একটি অনুরোধ পাঠায়। অ্যাপ্লিকেশনটি সার্ভারে অনুরোধটি প্রক্রিয়া করে, যার মধ্যে ডেটাবেস বা বহিরাগত API থেকে ডেটা সংগ্রহ অন্তর্ভুক্ত থাকে, তারপর অনুরোধ করা পৃষ্ঠার জন্য HTML রেন্ডার করে। সার্ভার তারপর পৃষ্ঠাটির সম্পূর্ণরূপে রেন্ডার করা HTML ব্যবহারকারীর ব্রাউজারে ফেরত পাঠায়। যখন ব্যবহারকারীর ব্রাউজার এইচটিএমএল গ্রহণ করে, তখন ব্রাউজারটি প্রয়োজনীয় জাভাস্ক্রিপ্ট ফাইল লোড করে।

web.dev এ HTML শিখুন

SSR ব্যবহার করার সুবিধাগুলির মধ্যে রয়েছে দ্রুত প্রাথমিক লোডিং গতি, ভাল সার্চ ইঞ্জিন অপ্টিমাইজেশান (SEO) কর্মক্ষমতা, নির্ভরযোগ্যতা এবং একটি ভাল সামগ্রিক ব্যবহারকারীর অভিজ্ঞতা। যাইহোক, কার্যক্ষমতা ওভারহেড এবং SSR-সক্ষম অ্যাপ্লিকেশনগুলি তৈরি এবং বজায় রাখার জন্য প্রয়োজনীয় বিকাশ দক্ষতার কারণে ক্লায়েন্ট-সাইড রেন্ডারিং (CSR) এর চেয়ে এসএসআর বাস্তবায়ন করা আরও জটিল হতে পারে। এসএসআর বিশেষত কন্টেন্ট-চালিত ওয়েব অ্যাপ্লিকেশন, ইকমার্স প্ল্যাটফর্ম এবং যেকোন অ্যাপ্লিকেশনের জন্য উপকারী যার জন্য ভাল এসইও পারফরম্যান্স এবং দ্রুত প্রাথমিক প্রতিক্রিয়ার গতি প্রয়োজন।

স্ট্যাটিক সাইট জেনারেশন (SSG)

স্ট্যাটিক সাইট জেনারেশন (SSG) বিল্ড টাইমে স্ট্যাটিক HTML ফাইল তৈরি করে এবং সার্ভার-সাইড বা ক্লায়েন্ট-সাইড রেন্ডারিং ছাড়াই ব্যবহারকারীদের কাছে সরবরাহ করে। ওয়েব বিষয়বস্তু রচিত হয়, সাধারণত মার্কডাউন, JSON, বা YAML-এর মতো কাঠামোগত বিন্যাসে, এবং এতে পাঠ্য, ছবি এবং অন্যান্য সম্পদ অন্তর্ভুক্ত থাকে। একটি স্ট্যাটিক সাইট জেনারেটর টুল, যেমন Hugo , বা Jekyll , বিষয়বস্তু প্রক্রিয়া করে এবং HTML, CSS, এবং JavaScript ফাইল তৈরি করে। স্ট্যাটিক আউটপুট হল সমগ্র ওয়েবসাইট, এবং এই স্ট্যাটিক ফাইলগুলি একটি ওয়েব সার্ভার, CDN বা হোস্টিং পরিষেবাতে স্থাপন করা হয়।

web.dev-এ CSS এবং HTML সম্পর্কে আরও জানুন।

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

ক্লায়েন্ট-সাইড রেন্ডারিং (CSR)

ক্লায়েন্ট-সাইড রেন্ডারিং (CSR) ক্লায়েন্টের ব্রাউজারে ঘটে, সার্ভারে নয়। ওয়েব অ্যাপ্লিকেশনগুলি প্রায়শই ন্যূনতম HTML টেমপ্লেটগুলিতে লোড করা হয় এবং তারপরে জাভাস্ক্রিপ্ট এবং সার্ভার বা API থেকে ডেটা ব্যবহার করে বিষয়বস্তু গতিশীলভাবে পরিচালনা করা হয়। একটি অ্যাপ্লিকেশন অনুরোধের পরে, সার্ভার পৃষ্ঠাটি রেন্ডার করার জন্য প্রয়োজনীয় মৌলিক কাঠামো এবং জাভাস্ক্রিপ্ট কোড সহ একটি ন্যূনতম HTML নথি পাঠায়। জাভাস্ক্রিপ্ট কোড ব্যবহারকারীর ব্রাউজারে কার্যকর করা হয়। কোডটি তারপরে আনা ডেটা প্রক্রিয়া করে এবং CSS, HTML এবং সমস্ত ইন্টারেক্টিভ উপাদান সহ সামগ্রী তৈরি করে। জাভাস্ক্রিপ্ট কোড তারপর ব্যবহারকারীর মিথস্ক্রিয়ায় সাড়া দেয়, যেমন ফর্ম জমা।

CSR এর সুবিধার মধ্যে রয়েছে দ্রুত পৃষ্ঠার রূপান্তর এবং প্রতিক্রিয়াশীল ইন্টারফেস। CSR-ভিত্তিক ওয়েব অ্যাপ্লিকেশনগুলির প্রায়ই SSR-এর তুলনায় প্রাথমিক লোডিং সময় ধীর থাকে এবং এসইও চ্যালেঞ্জগুলি উপস্থাপন করতে পারে। সিএসআর অ্যাপ্লিকেশনগুলি বাড়ার সাথে সাথে সেগুলি বিকাশ এবং বজায় রাখা বেশ জটিল হয়ে উঠতে পারে।