সার্ভার-সাইড রেন্ডারিং সহ কীভাবে একটি কৌণিক অ্যাপ তৈরি করবেন

আপনার কৌণিক অ্যাপ্লিকেশনটির সাথে আপনি সার্ভার-সাইড রেন্ডারিংটি ব্যবহার করতে চাইতে পারেন এমন কয়েকটি কারণ রয়েছে।

  1. এসএসআর অনুসন্ধান ইঞ্জিন অপ্টিমাইজেশনে সহায়তা করে। সার্চ ইঞ্জিনগুলি পৃষ্ঠাটিকে যেমন সার্ভারে রেন্ডার করা হচ্ছে তত বিশ্লেষণ করতে পারে।
  2. ফেসবুক এবং টুইটারের মতো সোসিয়া মিডিয়া প্ল্যাটফর্মগুলি শেয়ার করার সময় ওয়েবসাইটটির প্রাকদর্শন করতে পারে।
  3. একবার কোনও ওয়েবপৃষ্ঠা সার্ভারে রেন্ডার হয়ে গেলে আপনি এটিকে ক্যাশে রাখতে পারেন এবং এটি আরও দ্রুত পরিবেশন করতে পারেন।

আপনার কৌণিক অ্যাপ্লিকেশনটিতে সার্ভার-সাইড রেন্ডারিং বাস্তবায়নের জন্য, আপনি কৌণিক ইউনিভার্সাল প্যাকেজটি ব্যবহার করতে পারেন।

কৌণিক ইউনিভার্সাল

একটি নতুন কৌণিক প্রকল্প তৈরি করুন:

নতুন প্রকল্পের নাম

এই প্রকল্পে, নিম্নলিখিত প্যাকেজগুলিতে কৌনিক ইউনিভার্সাল ডাউনলোড করুন এবং যুক্ত করুন:

সিডি প্রকল্পের নাম
এনপিএম ইনস্টল করুন - সেভ @ কৌণিক / প্ল্যাটফর্মসভার @ এনজিউনিভারসাল / মডিউল-ম্যাপ-এনজিফ্যাক্টরি-লোডার [email protected] এক্সপ্রেস
এনজি সর্বজনীন প্রকল্পের নাম উত্পন্ন করে

এটি নিম্নলিখিত ফাইলগুলি তৈরি এবং আপডেট করবে:

Src / app / app.server.module.ts তৈরি করুন src / main.server.ts তৈরি করুন src / tsconfig.server.json আপডেট প্যাকেজ.জসন আপডেট .angular-cli.json আপডেট src / main.ts Src / app / app.module.ts আপডেট করুন। Gitignore

মডিউল: আপনার এখন দুটি পৃথক রুট মডিউল রয়েছে: app.server.module.ts এবং app.module.ts। সার্ভার মডিউল @ অ্যাঙ্গেল / প্ল্যাটফর্ম-সার্ভার প্যাকেজ থেকে সার্ভারমডিউলগুলি আমদানি করে। ব্রাউজার মডিউলটি ব্রোভারমুডুলকে বলে w উইথসার্ভারট্রান্সিশন () পদ্ধতিটি, যা অ্যাঙ্গুলারকে বলে যে আমরা সার্ভার-সাইড রেন্ডারিং ব্যবহার করছি এবং পুরো ফ্রেমওয়ার্কটি লোড হয়ে গেলে দৃশটি অদলবদল করা দরকার।

এন্ট্রি পয়েন্ট: আপনার অ্যাপ্লিকেশনের জন্য আপনার দুটি প্রবেশ পয়েন্ট রয়েছে: src / main.ts এবং src / main.server.ts। পরেরটি হ'ল সার্ভারের প্রবেশ পয়েন্ট এবং কেবল আমাদের সার্ভার মডিউলটি রফতানি করে।

কনফিগারেশন ফাইলগুলি: কৌণিক সংকলকটি বলতে যে আমাদের দুটি ইনপুট মডিউল আছে, tsconfig.server.json ফাইলটি তৈরি করা হয়েছে। Tsconfig.app.json ফাইল ব্রাউজার অ্যাপ্লিকেশনটি সংকলন করে।

কৌণিক সিএলআই: সার্ভার বান্ডিলের জন্য একটি দ্বিতীয় প্রোফাইল কৌণিক- cli.json ফাইলটিতে যুক্ত করা হয়।

বুটস্ট্র্যাপিং: আপনার ফটোগুলি নিম্নলিখিত ফাংশনটির সাথে আপডেট হবে:

document.addEventListener ('DOMContentLoADed', () => {প্ল্যাটফর্ম ব্রাউজারডাইমিক ()

এটি ডিওএম লোড করার পরে কৌণিক অ্যাপ্লিকেশন বুট হয় তা নিশ্চিত করা হয়। অ্যাপ্লিকেশনটির বুটস্ট্র্যাপ যুক্তিটি ডোমকন্টেন্টলয়েড ইভেন্টে রয়েছে।

নোড সার্ভার

এর পরে, আপনাকে অ্যাপ্লিকেশনটির মূল ডিরেক্টরিতে একটি সার্ভার তৈরি করতে হবে। এই ফাইলটি এনপিএম রান বিল্ড চলমান চলাকালীন তৈরি জাভাস্ক্রিপ্ট ফাইলটি ব্যবহার করে: ssr .angular-cli.json ফাইলটিতে কনফিগার করা সার্ভার অ্যাপ্লিকেশনটি ব্যবহার করে। এরপরে এটি সূচক html পৃষ্ঠাতে প্রয়োগ করা হয়। আপনার প্রকল্পের মূলের মধ্যে একটি সার্ভার.এসটি ফাইল তৈরি করুন এবং নিম্নলিখিত কোডটি যুক্ত করুন:

সার্ভারে জাভাস্ক্রিপ্ট ফাইলটি কার্যকর করার জন্য সার্ভার.এসটি ফাইলের একটি ওয়েবপ্যাক কনফিগারেশন প্রয়োজন। আপনার অ্যাপ্লিকেশনটির মূল ডিরেক্টরিতে একটি ওয়েবপ্যাক.সেরওয়ার.কনফিগ.জেএস ফাইল তৈরি করুন এবং নিম্নলিখিত কোডটি যুক্ত করুন:

আপনার প্যাকেজ.জসন ফাইলটিতে আপনার স্ক্রিপ্ট অ্যারেতে নিম্নলিখিত কমান্ডগুলি যুক্ত করুন:

"বিল্ড: এসএসআর": "এনপিএম রান বিল্ড: ক্লায়েন্ট-ও-সার্ভার-বান্ডিল &&NP রান ওয়েবপ্যাক: সার্ভার",
"পরিবেশন করুন: এসএসআর": "নোড ডিস্ট / সার্ভার.জেএস",
"বিল্ড: ক্লায়েন্ট-ও-সার্ভার-বান্ডিল": "এনজি বিল্ড - প্রোড এবং&g এনজিও - প্রোড - অ্যাপ 1 - আউটপুট-হ্যাশিং = মিথ্যা",
"ওয়েবপ্যাক: সার্ভার": "ওয়েবপ্যাক - কনফিগ ওয়েবপ্যাক.সেরওয়ার.কনফিগ.জেএস - প্রগ্রেস - রঙগুলি"

প্রথম রান এনপিএম রান বিল্ড: এসএসআর। এটি সম্পূর্ণ হলে, এনপিএম রান পরিবেশন করুন: এসএসআর। আপনার অ্যাপ্লিকেশনটি লোকালহোস্টে সরবরাহ করা উচিত: 4201।

সংক্রমণ স্থিতি

যখন আমরা কৌণিক ইউনিভার্সাল ব্যবহার করি, তখন এপিআই যে সামগ্রী সরবরাহ করে তাদের দু'বার ডাকা হয়। প্রথমত, যখন সার্ভার পৃষ্ঠাটি রেন্ডার করে এবং দ্বিতীয়টি যখন অ্যাপ্লিকেশন বুট হয়। এটি স্ক্রিনটি সাধারণত ফ্লিকার হিসাবে প্রচ্ছন্নতার সমস্যা এবং দুর্বল ব্যবহারকারীর অভিজ্ঞতা বাড়ে। এখানে কিভাবে এটা কাজ করে:

উপস্টেট ইন্টারেক্টিভ, এলএলসি ডিজাইন করেছেন

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

উপস্টেট ইন্টারেক্টিভ, এলএলসি ডিজাইন করেছেন

আমাদের আবেদনে ট্রান্সফারস্টেট পরিষেবাটি ব্যবহার করুন। ব্রাউজার ট্রান্সফার স্টেটমডিউলটি app.module.ts এ আমদানি করুন:

Ser ব্রাউজারমডুল, ব্রাউজার ট্রান্সফার স্টেটমডুল} '@ অ্যাঙ্গেল / প্ল্যাটফর্ম-ব্রাউজার' থেকে আমদানি;
আমদানি: [ব্রাউজারমডিউল.উইথ সার্ভার ট্রান্সসিশন ({appId: 'মাই-অ্যাপ'}), ব্রাউজার ট্রান্সফারস্টেটমোডিয়াল, ...]

App.server.module.ts এ সার্ভার ট্রান্সফারস্টেটমডিউল আমদানি করুন:

'@ অ্যাঙ্গেল / প্ল্যাটফর্ম-সার্ভার' থেকে Import সার্ভারমডুল, সার্ভার ট্রান্সফারস্টেটমোডুল Import আমদানি করুন;
আমদানি: [অ্যাপমডিউল, সার্ভারমডুল, সার্ভার ট্রান্সফারস্টেটমডিউল, ...]

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

আপনি আপনার API এর জন্য যে ফাইলটি ব্যবহার করেন তাতে ট্রান্সফারস্টেট এবং মেকস্টেটকি মডিউলগুলি আমদানি করুন।

@ ট্রান্সফারস্টেট, মেকস্টেটকি @ '@ অ্যাঙ্গেল / প্ল্যাটফর্ম-ব্রাউজার' থেকে আমদানি;

আপনার কনস্ট্রাক্টর ফাংশনে ট্রান্সফারস্টেট পরিষেবাটি ইনজেক্ট করুন:

কনস্ট্রাক্টর (প্রাইভেট স্টেট: ট্রান্সফারস্টেট, ...) {

আপনার ডেটা সংরক্ষণ করার জন্য কীগুলি তৈরি করুন:

কনস্ট KEY_NAME = মেকস্টেটকি ('ভেরিয়েবল_নেম');

আপনার ফাংশনে যেখানে আপনি একটি এপিআই কল করবেন সেখানে এই স্টেট.জেট দিয়ে স্থিতি থেকে আপনার ডেটা পান। যদি এন্ট্রি না পাওয়া যায় তবে HTTP এ যান। আপনি যখন HTTP কল থেকে আপনার ডেটা ফিরে পাবেন, তখন এটি.স্টেট.সেট দিয়ে স্থিতিতে সংরক্ষণ করুন।

ফাংশনটির নাম () {চলুন ভেরিয়েবল_নেম = this.state.get (KEY_NAME, অন্যের মতো নਾਲ) দিন; যদি (চলক নাম) - অবজার্ভযোগ্য.ফ (পরিবর্তনশীল নাম) ফেরত; this this.http.get ('url') ফিরিয়ে দিন ... this.state.set (KEY_NAME, অন্যের মতো চলক নাম); রিটার্ন ভেরিয়েবল_নাম; }

ডেটা রেন্ডারিং সার্ভার থেকে ডেটা ফিরে এলে এখন আপনার ক্লায়েন্ট কোনও এইচটিটিপি কল করবেন না কারণ এটি স্থিতিতে সঞ্চিত রয়েছে।

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

সর্বোপরি, প্রতিটি অ্যাপ্লিকেশন সার্ভার-সাইড রেন্ডারিংয়ের গ্যারান্টি দেয় না। এটি নিজে ব্যাখ্যা করার পরিবর্তে, এসএসআর আপনার প্রকল্পের জন্য কখন সঠিক তা নিয়ে একটি সংক্ষিপ্ত বিবরণ জন্য এই নিবন্ধটি পড়ার পরামর্শ দেব recommend এই বিষয়টি সম্পর্কে আমার বেশিরভাগ উপলব্ধি নিম্নলিখিত টিউটোরিয়াল থেকে উঠে এসেছে: http://www.dotnetcurry.com/angularjs/1388/server-side-rendering-angular-nodejs। আমি কেবল নিজেই অ্যাপ্লিকেশনটি তৈরির প্রস্তাব দিতে পারি।

দ্বিতীয় খণ্ড পড়ুন: এনজিআরএক্সের সাথে কৌণিক ইউনিভার্সাল স্থাপন করা।

আমি যে সহায়ক ছিল আশা করি!

☞ আমরা বি 2 বি সংগঠনগুলিকে দুর্দান্ত ধারণাগুলিকে সফ্টওয়্যারে পরিণত করতে সহায়তা করি। তুমি কি আরো কিছু জানতে চাও?

Following আপনি নিম্নলিখিত নিবন্ধগুলি পছন্দ করতে পারেন।