You are Here
প্রগতিশীল জেএসএন – অত্যধিক আচরণ
News

প্রগতিশীল জেএসএন – অত্যধিক আচরণ

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

আমরা যদি জেএসএন স্থানান্তর করতে একই ধারণা প্রয়োগ করি?

ধরুন আপনার কাছে কিছু ডেটা সহ একটি জসন গাছ রয়েছে:

{
  header: 'Welcome to my blog',
  post: {
    content: 'This is my article',
    comments: (
      'First comment',
      'Second comment',
      // ...
    )
  },
  footer: 'Hope you like it'
}

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

ক্লায়েন্ট করতে পারে না কিছু সার্ভারটি প্রেরণ না হওয়া পর্যন্ত JSON এর সাথে শেষ বাইট যদি JSON এর কোনও অংশ সার্ভারে উত্পন্ন করতে ধীর হয় (যেমন লোডিং comments একটি ধীর ডাটাবেস ট্রিপ নিয়েছে), ক্লায়েন্ট পারে না যে কোনও শুরু করুন সার্ভার পর্যন্ত কাজ করুন সব শেষ কাজ।

আপনি কি ভাল ইঞ্জিনিয়ারিং কল করবেন? এবং তবুও এটি স্থিতাবস্থা – এটাই 99.9999%* অ্যাপস এর প্রেরণ এবং প্রক্রিয়া json। আমরা কি এর উন্নতি করার সাহস করি?

* আমি এটি তৈরি করেছি

স্ট্রিমিং জসন

আমরা বাস্তবায়ন করে এটি উন্নত করার চেষ্টা করতে পারি স্ট্রিমিং জসন পার্সার। একটি স্ট্রিমিং জেএসএন পার্সার অসম্পূর্ণ ইনপুট থেকে একটি অবজেক্ট ট্রি উত্পাদন করতে সক্ষম হবে:

{
  header: 'Welcome to my blog',
  post: {
    content: 'This is my article',
    comments: (
      'First comment',
      'Second comment'

আপনি যদি এই মুহুর্তে ফলাফলের জন্য জিজ্ঞাসা করেন তবে একটি স্ট্রিমিং পার্সার আপনাকে এটি হস্তান্তর করবে:

{
  header: 'Welcome to my blog',
  post: {
    content: 'This is my article',
    comments: (
      'First comment',
      'Second comment'
      // (The rest of the comments are missing)
    )
  }
  // (The footer property is missing)
}

তবে এটিও খুব বড় নয়।

এই পদ্ধতির একটি নেতিবাচক দিকটি হ’ল বস্তুগুলি এক ধরণের ত্রুটিযুক্ত। উদাহরণস্বরূপ, শীর্ষ-স্তরের অবজেক্টের তিনটি বৈশিষ্ট্য থাকার কথা ছিল (header, postএবং footer), তবে footer অনুপস্থিত কারণ এটি এখনও স্রোতে উপস্থিত হয়নি। দ্য post তিনটি থাকার কথা ছিল commentsকিন্তু আপনি আসলে বলতে পারি না আরও কি comments আসছে বা যদি এটি শেষ ছিল।

একরকমভাবে, এটি স্ট্রিমিংয়ের অন্তর্নিহিত – আমরা কি না চাই অসম্পূর্ণ ডেটা পেতে? ut এটি আসলে এটি খুব কঠিন করে তোলে ব্যবহার ক্লায়েন্টের উপর এই ডেটা। অনুপস্থিত ক্ষেত্রগুলির কারণে কোনও ধরণের “ম্যাচ আপ” নেই। আমরা জানি না কী সম্পূর্ণ এবং কী নয়। এজন্য স্ট্রিমিং জসন কুলুঙ্গি ব্যবহারের কেসগুলি বাদ দিয়ে জনপ্রিয় নয়। অ্যাপ্লিকেশন যুক্তিতে আসলে এটির সুবিধা নেওয়া খুব কঠিন যা সাধারণত ধরে নেয় যে প্রকারগুলি সঠিক, “প্রস্তুত” এর অর্থ “সম্পূর্ণ” এবং আরও অনেক কিছু।

জেপিইজি এর সাথে সাদৃশ্যটিতে, স্ট্রিমিংয়ের এই নির্বোধ পদ্ধতির সাথে ডিফল্ট “টপ-ডাউন” লোডিং প্রক্রিয়াটির সাথে মেলে। আপনি যে ছবিটি দেখছেন তা খাস্তা তবে আপনি কেবল শীর্ষ 10%দেখতে পান। সুতরাং উচ্চ বিশ্বস্ততা সত্ত্বেও, আপনি আসলে দেখতে পাচ্ছেন না কি ছবিতে।

কৌতূহলজনকভাবে, এটিও কীভাবে স্ট্রিমিং নিজেই এইচটিএমএল ডিফল্টরূপে কাজ করে। আপনি যদি ধীর সংযোগে কোনও এইচটিএমএল পৃষ্ঠা লোড করেন তবে এটি ডকুমেন্ট ক্রমে প্রবাহিত হবে:

<html>
  <body>
    <header>Welcome to my blog</header>
    <article>
      <p>This is my article</p>
        <ul class="comments">
          <li>First comment</li>
          <li>Second comment</li>

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

আসুন আমরা এটি পুনরাবৃত্তি করি: যখন আমরা জিনিসগুলি ক্রমে প্রবাহিত করি তখন সেগুলি প্রদর্শিত হয়, ক একক ধীর অংশ বিলম্ব সবকিছু এটি পরে আসে। আপনি কি এটি ঠিক করার কোনও উপায় ভাবতে পারেন?

প্রগতিশীল জসন

স্ট্রিমিংয়ের কাছে যাওয়ার আরও একটি উপায় রয়েছে।

এখনও পর্যন্ত আমরা জিনিস পাঠাচ্ছি গভীরতা-প্রথম। আমরা শীর্ষ স্তরের অবজেক্টের বৈশিষ্ট্যগুলি দিয়ে শুরু করি, আমরা সেই বস্তুর মধ্যে যাই post সম্পত্তি, তারপর আমরা ভিতরে যাই যে অবজেক্টের comments সম্পত্তি, এবং আরও। যদি কিছু ধীর হয় তবে অন্য সমস্ত কিছু ধরে যায়।

তবে আমরা ডেটাও পাঠাতে পারি প্রস্থ-প্রথম।

ধরুন আমরা এর মতো শীর্ষ-স্তরের অবজেক্টটি প্রেরণ করি:

{
  header: "$1",
  post: "$2",
  footer: "$3"
}

এখানে, "$1", "$2", "$3" তথ্যের টুকরো দেখুন এখনও প্রেরণ করা হয়নি। এগুলি স্থানধারক যা প্রগতিশীলভাবে স্ট্রিমের পরে পূরণ করা যেতে পারে।

উদাহরণস্বরূপ, ধরুন সার্ভারটি স্ট্রিমটিতে আরও কয়েকটি সারি ডেটা প্রেরণ করে:

{
  header: "$1",
  post: "$2",
  footer: "$3"
}
/* $1 */
"Welcome to my blog"
/* $3 */
"Hope you like it"

লক্ষ্য করুন যে আমরা কোনও নির্দিষ্ট ক্রমে সারিগুলি প্রেরণ করতে বাধ্য নই। উপরের উদাহরণে, আমরা উভয়ই পাঠিয়েছি $1 এবং $3– তবে $2 সারি এখনও মুলতুবি আছে!

যদি ক্লায়েন্ট এই মুহুর্তে গাছটি পুনর্গঠন করার চেষ্টা করে তবে এটি দেখতে এটির মতো দেখতে পারে:

{
  header: "Welcome to my blog",
  post: new Promise(/* ... not yet resolved ... */),
  footer: "Hope you like it"
}

আমরা সেই অংশগুলি উপস্থাপন করব যা প্রতিশ্রুতি হিসাবে এখনও লোড হয়নি।

তারপরে ধরুন সার্ভারটি আরও কয়েকটি সারিগুলিতে প্রবাহিত হতে পারে:

{
  header: "$1",
  post: "$2",
  footer: "$3"
}
/* $1 */
"Welcome to my blog"
/* $3 */
"Hope you like it"
/* $2 */
{
  content: "$4",
  comments: "$5"
}
/* $4 */
"This is my article"

এটি ক্লায়েন্টের দৃষ্টিকোণ থেকে নিখোঁজ কিছু টুকরো “পূরণ” করবে:

{
  header: "Welcome to my blog",
  post: {
    content: "This is my article",
    comments: new Promise(/* ... not yet resolved ... */),
  },
  footer: "Hope you like it"
}

প্রতিশ্রুতি post এখন একটি বস্তুর সমাধান হবে। যাইহোক, আমরা এখনও জানি না কি এর ভিতরে আছে commentsএখন তাই যারা প্রতিশ্রুতি হিসাবে প্রতিনিধিত্ব করা হয়।

অবশেষে, মন্তব্যগুলি প্রবাহিত হতে পারে:

{
  header: "$1",
  post: "$2",
  footer: "$3"
}
/* $1 */
"Welcome to my blog"
/* $3 */
"Hope you like it"
/* $2 */
{
  content: "$4",
  comments: "$5"
}
/* $4 */
"This is my article"
/* $5 */
("$6", "$7", "$8")
/* $6 */
"This is the first comment"
/* $7 */
"This is the second comment"
/* $8 */
"This is the third comment"

এখন, ক্লায়েন্টের দৃষ্টিকোণ থেকে পুরো গাছটি সম্পূর্ণ হবে:

{
  header: "Welcome to my blog",
  post: {
    content: "This is my article",
    comments: (
      "This is the first comment",
      "This is the second comment",
      "This is the third comment"
    )
  },
  footer: "Hope you like it"
}

খণ্ডগুলিতে প্রথমে ডেটা প্রেরণ করে আমরা ক্লায়েন্টের উপর ক্রমান্বয়ে এটি পরিচালনা করার ক্ষমতা অর্জন করেছি। যতক্ষণ ক্লায়েন্ট কিছু অংশ “প্রস্তুত নয়” (প্রতিশ্রুতি হিসাবে প্রতিনিধিত্ব করে) এবং বাকী অংশটি প্রক্রিয়া করতে পারে ততক্ষণ এটি একটি উন্নতি!

ইনলাইনিং

এখন যেহেতু আমাদের কাছে প্রাথমিক প্রক্রিয়া রয়েছে, আমরা এটি আরও দক্ষ আউটপুটের জন্য সামঞ্জস্য করব। আসুন শেষ উদাহরণ থেকে পুরো স্ট্রিমিং সিকোয়েন্সটি আরও একটি নজর দেওয়া যাক:

{
  header: "$1",
  post: "$2",
  footer: "$3"
}
/* $1 */
"Welcome to my blog"
/* $3 */
"Hope you like it"
/* $2 */
{
  content: "$4",
  comments: "$5"
}
/* $4 */
"This is my article"
/* $5 */
("$6", "$7", "$8")
/* $6 */
"This is the first comment"
/* $7 */
"This is the second comment"
/* $8 */
"This is the third comment"

আমরা যেতে পারি একটি ছোট এখানে স্ট্রিমিং সহ অনেক দূরে। যদি না কিছু অংশ উত্পাদন না হয় ধীর গতিতে, আমরা তাদের পৃথক সারি হিসাবে প্রেরণ থেকে কিছু পাই না।

মনে করুন যে আমাদের দুটি পৃথক ধীর অপারেশন রয়েছে: একটি পোস্ট লোড করা এবং একটি পোস্টের মন্তব্য লোড করা। সেক্ষেত্রে মোট তিনটি অংশ প্রেরণ করা বোধগম্য হবে।

প্রথমত, আমরা বাইরের শেলটি প্রেরণ করব:

{
  header: "Welcome to my blog",
  post: "$1",
  footer: "Hope you like it"
}

ক্লায়েন্টের উপর, এটি অবিলম্বে পরিণত হবে:

{
  header: "Welcome to my blog",
  post: new Promise(/* ... not yet resolved ... */),
  footer: "Hope you like it"
}

তারপরে আমরা পাঠাতে চাই post ডেটা (তবে ছাড়া comments):

{
  header: "Welcome to my blog",
  post: "$1",
  footer: "Hope you like it"
}
/* $1 */
{
  content: "This is my article",
  comments: "$2"
}

ক্লায়েন্টের দৃষ্টিকোণ থেকে:

{
  header: "Welcome to my blog",
  post: {
    content: "This is my article",
    comments: new Promise(/* ... not yet resolved ... */),
  },
  footer: "Hope you like it"
}

অবশেষে, আমরা মন্তব্যগুলি একটি একক অংশে প্রেরণ করব:

{
  header: "Welcome to my blog",
  post: "$1",
  footer: "Hope you like it"
}
/* $1 */
{
  content: "This is my article",
  comments: "$2"
}
/* $2 */
(
  "This is the first comment",
  "This is the second comment",
  "This is the third comment"
)

এটি আমাদের ক্লায়েন্টের পুরো গাছটি দেবে:

{
  header: "Welcome to my blog",
  post: {
    content: "This is my article",
    comments: (
      "This is the first comment",
      "This is the second comment",
      "This is the third comment"
    )
  },
  footer: "Hope you like it"
}

এটি আরও কমপ্যাক্ট এবং একই উদ্দেশ্য অর্জন করে।

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

রূপরেখা

এই পদ্ধতির একটি আকর্ষণীয় পরিণতি এটি হ’ল এটি এছাড়াও আউটপুট স্ট্রিমে পুনরাবৃত্তি হ্রাস করার জন্য আমাদের একটি প্রাকৃতিক উপায় দেয়। আমরা যদি ইতিমধ্যে দেখেছি এমন কোনও বস্তুকে সিরিয়ালাইজ করছি তবে আমরা এটিকে কেবল একটি পৃথক সারি হিসাবে রূপরেখা করতে পারি এবং এটি পুনরায় ব্যবহার করতে পারি।

উদাহরণস্বরূপ, ধরুন আমাদের কাছে এর মতো একটি বস্তু গাছ রয়েছে:

const userInfo = { name: 'Dan' };
 
(
  { type: 'header', user: userInfo },
  { type: 'sidebar', user: userInfo },
  { type: 'footer', user: userInfo }
)

যদি আমরা এটি প্লেইন জসনে সিরিয়ালাইজ করতে চাই তবে আমরা পুনরাবৃত্তি করব { name: 'Dan' }::

(
  { type: 'header', user: { name: 'Dan' } },
  { type: 'sidebar', user: { name: 'Dan' } },
  { type: 'footer', user: { name: 'Dan' } }
)

তবে, যদি আমরা ক্রমান্বয়ে JSON পরিবেশন করি তবে আমরা এটির রূপরেখা বেছে নিতে পারি:

(
  { type: 'header', user: "$1" },
  { type: 'sidebar', user: "$1" },
  { type: 'footer', user: "$1" }
)
/* $1 */
{ name: "Dan" }

আমরা আরও সুষম কৌশলটিও অনুসরণ করতে পারি – উদাহরণস্বরূপ, ডিফল্টরূপে অবজেক্টগুলিকে ইনলাইন করার জন্য (কমপ্যাক্টনেসের জন্য) যতক্ষণ না আমরা কিছু অবজেক্টকে দুই বা ততোধিক বার ব্যবহার করা হচ্ছে না, যে বিন্দুতে আমরা এটি আলাদাভাবে নির্গত করব এবং বাকী অংশগুলি প্রবাহে ডেডআপ করব।

এর অর্থ হ’ল, প্লেইন জেএসওএসের বিপরীতে আমরা সিরিয়ালাইজিং সাইক্লিক অবজেক্টগুলিকে সমর্থন করতে পারি। একটি চক্রীয় বস্তুর কেবল একটি সম্পত্তি রয়েছে যা তার নিজস্ব স্ট্রিম “সারি” এর দিকে নির্দেশ করে।

স্ট্রিমিং ডেটা বনাম স্ট্রিমিং ইউআই

উপরে বর্ণিত পদ্ধতির মূলত কীভাবে প্রতিক্রিয়া সার্ভারের উপাদানগুলি কাজ করে।

মনে করুন আপনি প্রতিক্রিয়া সার্ভারের উপাদানগুলির সাথে একটি পৃষ্ঠা লিখেছেন:

function Page() {
  return (
    <html>
      <body>
        <header>Welcome to my blog</header>
        <Post />
        <footer>Hope you like it</footer>
      </body>
    </html>
  );
}
 
async function Post() {
  const post = await loadPost();
  return (
    <article>
      <p>{post.text}</p>
      <Comments />
    </article>
  );
}
 
async function Comments() {
  const comments = await loadComments();
  return <ul>{comments.map(c => <li key={c.id}>{c.text}</li>)}</ul>;
}

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

প্রাথমিকভাবে, ক্লায়েন্টের প্রতিক্রিয়া গাছটি এরকম উপস্থিত হবে:

<html>
  <body>
    <header>Welcome to my blog</header>
    {new Promise(/* ... not resolved yet */)}
    <footer>Hope you like it</footer>
  </body>
</html>

তারপর, হিসাবে loadPost সার্ভারে সমাধান করে, আরও স্ট্রিম হবে:

<html>
  <body>
    <header>Welcome to my blog</header>
    <article>
      <p>This is my post</p>
      {new Promise(/* ... not resolved yet */)}
    </article>
    <footer>Hope you like it</footer>
  </body>
</html>

অবশেষে, কখন loadComments সার্ভারে সমাধান করে, ক্লায়েন্ট বাকীটি গ্রহণ করে:

<html>
  <body>
    <header>Welcome to my blog</header>
    <article>
      <p>This is my post</p>
      <ul>
        <li key="1">This is the first comment</li>
        <li key="2">This is the second comment</li>
        <li key="3">This is the third comment</li>
      </ul>
    </article>
    <footer>Hope you like it</footer>
  </body>
</html>

যাইহোক, এখানে লাথি।

আপনি আসলে না চাই ডেটা প্রবাহিত হিসাবে নির্বিচারে লাফ দেওয়ার পৃষ্ঠাটি উদাহরণস্বরূপ, সম্ভবত আপনি পৃষ্ঠাটি কখনও দেখাতে চান না ছাড়া পোস্টের সামগ্রী।

এই কারণেই প্রতিক্রিয়া মুলতুবি প্রতিশ্রুতিগুলির জন্য “গর্ত” প্রদর্শন করে না। পরিবর্তে, এটি দ্বারা নির্দেশিত নিকটতম ঘোষণামূলক লোডিং অবস্থা প্রদর্শন করে <Suspense>।

উপরের উদাহরণে, কোন নেই <Suspense> গাছের সীমানা। এর অর্থ হ’ল, যদিও প্রতিক্রিয়াটি গ্রহণ করবে ডেটা একটি স্ট্রিম হিসাবে, এটি আসলে ব্যবহারকারীর কাছে একটি “জাম্পিং” পৃষ্ঠাটি প্রদর্শন করবে না। এটি জন্য অপেক্ষা করবে পুরো প্রস্তুত হতে পৃষ্ঠা।

তবে আপনি পারেন অপ্ট ইউআই গাছের একটি অংশ মোড়ানো দিয়ে একটি ক্রমান্বয়ে প্রকাশিত লোডিং অবস্থা <Suspense>। এটি কীভাবে ডেটা প্রেরণ করা হয় তা পরিবর্তন করে না (এটি এখনও সম্ভব “স্ট্রিমিং” হিসাবে) তবে এটি পরিবর্তিত হয় কখন প্রতিক্রিয়া এটি ব্যবহারকারীর কাছে প্রকাশ করে।

উদাহরণস্বরূপ:

import { Suspense } from 'react';
 
function Page() {
  return (
    <html>
      <body>
        <header>Welcome to my blog</header>
        <Post />
        <footer>Hope you like it</footer>
      </body>
    </html>
  );
}
 
async function Post() {
  const post = await loadPost();
  return (
    <article>
      <p>{post.text}</p>
      <Suspense fallback={<CommentsGlimmer />}>
        <Comments />
      </Suspense>
    </article>
  );
}
 
async function Comments() {
  const comments = await loadComments();
  return <ul>{comments.map(c => <li key={c.id}>{c.text}</li>)}</ul>;
}

এখন ব্যবহারকারী দুটি পর্যায়ে লোডিং ক্রম বুঝতে পারবেন:

  • প্রথমত, পোস্টটি শিরোনাম, পাদচরণ এবং মন্তব্যের জন্য একটি ঝিলিমিলির সাথে “পপস ইন”। শিরোনাম এবং পাদচরণ কখনও নিজেরাই উপস্থিত হয় না।
  • তারপরে, মন্তব্যগুলি নিজেরাই “পপ ইন”।

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

একরকমভাবে, আপনি প্রতিক্রিয়া গাছের সেই প্রতিশ্রুতিগুলি প্রায় একটির মতো অভিনয় করতে পারেন throwযখন <Suspense> প্রায় ক catch। সার্ভার এটি প্রেরণের জন্য প্রস্তুত যে ক্রমে ডেটা যত তাড়াতাড়ি সম্ভব আসে, তবে প্রতিক্রিয়াটি লোডিং সিকোয়েন্সটি করুণভাবে উপস্থাপন করতে যত্ন নেয় এবং বিকাশকারীকে ভিজ্যুয়াল প্রকাশ করতে দিন।

মনে রাখবেন যে আমি এখন পর্যন্ত যা বর্ণনা করেছি তার “এসএসআর” বা এইচটিএমএল এর সাথে কোনও সম্পর্ক নেই। আমি জেএসএন হিসাবে প্রতিনিধিত্বকারী একটি ইউআই গাছকে স্ট্রিম করার জন্য একটি সাধারণ প্রক্রিয়া বর্ণনা করছিলাম। আপনি পারেন ঘুরিয়ে সেই জসন গাছটি ক্রমান্বয়ে এইচটিএমএল প্রকাশ করেছে (এবং প্রতিক্রিয়া এটি করতে পারে) তবে ধারণাটি এইচটিএমএল এর চেয়ে বিস্তৃত এবং স্পা-জাতীয় নেভিগেশনগুলিতেও প্রযোজ্য।

উপসংহারে

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

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

আমি এই পোস্টে দেখিয়েছি, স্ট্রিমিং একা যথেষ্ট নয় – আপনারও এমন একটি প্রোগ্রামিং মডেল দরকার যা পারে সুবিধা নিন স্ট্রিমিংয়ের এবং করুণভাবে অসম্পূর্ণ তথ্য পরিচালনা করুন। প্রতিক্রিয়া ইচ্ছাকৃতভাবে সমাধান করে <Suspense> লোডিং স্টেটস। আপনি যদি এমন সিস্টেমগুলি জানেন যা এটি অন্যভাবে সমাধান করে তবে আমি সেগুলি সম্পর্কে শুনতে পছন্দ করি!

আপনি যা পছন্দ করেন তা পরিশোধ করুন

গিটহাবের উপর ব্লুজস্কি · সম্পাদনা নিয়ে আলোচনা করুন

Source link

Share
Facebook Twitter Pinterest Linkedin

Related Posts