Next.js 13 و React Suspense: یک مؤلفه بارگیری ایجاد کنید

نوشته سورج ویشواکارما✏️

مدتی از راه‌اندازی Next.js 13 در اکتبر 2022 می‌گذرد. ​​در نسخه بتا، از تغییرات عمده‌ای در Next.js مطلع شدیم، مانند پشتیبانی از Suspense، یک ویژگی React که به شما امکان می‌دهد نمایش یک مؤلفه را تا زمانی که بچه‌ها به تاخیر بیاندازید. بارگیری به پایان رسیده است.

صفحه نمایش بارگذاری بخش مهمی از هر وب سایت است. با اطلاع دادن به کاربر که برخی پردازش ها در حال انجام است، می توانید ناامیدی او را کاهش دهید و احتمال ترک وب سایت را کاهش دهید. علاوه بر این، با اجازه دادن به محتوا برای بارگیری ناهمزمان، می توانید UX و عملکرد یک وب سایت را بهبود بخشید. در این آموزش، نحوه ایجاد کامپوننت بارگیری با استفاده از Next.js 13 و React Suspense را خواهیم آموخت. بیا شروع کنیم!

پرش به جلو:

React Suspense چیست؟

کامپوننت Suspense React برای اولین بار در نسخه 16.6 به React اضافه شد که در سال 2018 منتشر شد. Suspense عملیات ناهمزمان مانند تقسیم کد و واکشی داده را مدیریت می کند. به زبان ساده، به شما امکان می دهد تا زمانی که کامپوننت فرزند به طور کامل بارگذاری شود، یک جزء بازگشتی را نمایش دهید. کد زیر دستور React Suspense را نشان می دهد:

<Suspense fallback={<Loading />}>
  <SomeComponent />
</Suspense>

برای بارگیری چندین مؤلفه، می‌توانید چندین مؤلفه فرزند را به آن اضافه کنید <Suspense> جزء. Suspense عملکرد وب سایت و تجربه کاربری را بهبود می بخشد و به بخش مهمی از اکوسیستم React تبدیل می شود. اکنون، Next.js راه جدیدی برای اضافه کردن Suspense به یک برنامه با استفاده از آن ارائه می دهد app فهرست، به عنوان بخشی از Next.js 13 منتشر شد.

با استفاده از Next.js و React Suspense

The Next.js app دایرکتوری یک قرارداد فایل جدید را معرفی کرده است. اکنون می توانید تمام فایل ها و اجزای مربوط به مسیر را در یک دایرکتوری واحد اضافه کنید. این شامل کامپوننت ها و فایل های CSS می شود، بنابراین نیازی به ایجاد دایرکتوری جداگانه برای فایل های CSS نیست. در route دایرکتوری، شما می توانید شامل loading.js فایل برای افزودن رابط کاربری بارگیری خود برای مؤلفه بازگشتی React Suspense:

Next.js از رندر سمت سرور پشتیبانی می کند، بنابراین بارگیری رابط کاربری کمی طول می کشد. در چنین مواقعی می توانید از Suspense برای بارگذاری UI استفاده کنید. جزء در loading.js به عنوان یک جزء کاربردی که می تواند به عنوان پیش فرض صادر شود، تعریف می شود. سینتکس زیر است:

export default function Loading() {
  // You can add any UI inside Loading, including a Skeleton.
  return <LoadingSkeleton />
}

حالا بیایید Suspense را با ساختن یک پروژه کوچک در Next.js 13 پیاده سازی کنیم.

راه اندازی پروژه Next.js 13 ما

ما یک برنامه وب می سازیم که از TMDB API برای واکشی فیلم های پرطرفدار استفاده می کند. ما دو مسیر داریم:

1. root(/): صفحه خوشامدگویی را در برنامه نمایش می دهد
2. movies(/movies): فیلم های پرطرفدار واکشی شده از API را نمایش می دهد

نصب Next.js 13

می توانید Next.js 13 را با دستور زیر نصب کنید. به خاطر داشته باشید که باید Node.js را از قبل روی دستگاه خود نصب کنید:

npx create-next-app@latest --experimental-app

با وارد کردن دستور بالا در ترمینال، به سوالات زیر پاسخ می دهید:

• What is your project named?: نام پروژه خود را هر چه می خواهید بگذارید
• Would you like to use TypeScript with this project?: خیر. در صورت تمایل، می توانید با TypeScript ادامه دهید، اما تغییرات زیادی ایجاد نخواهد شد
• Would you like to use ESLint with this project?: آره؛ ESLint در اشکال زدایی خطاها مفید خواهد بود
• Would you like to use src/ directory with this project?: نه، ما از جدیدترین ها استفاده خواهیم کرد app فهرست راهنما

با آن، پروژه به طور خودکار با بسته های لازم نصب شده برای شما راه اندازی می شود.

حذف فایل ها و پوشه های غیر ضروری

کد boilerplate زیادی در Next.js وجود ندارد، اما به هر حال باید آن را پاک کنیم. باز کن app دایرکتوری و حذف کنید API دایرکتوری که برای سرور است. تمام کدهای CSS را از قسمت حذف کنید global.css فایل در app فهرست راهنما. الان باز است page.js و تمام کدهای داخل را حذف کنید return بخش. سپس کد زیر را وارد کنید page.js برای نمایش یک صفحه اصلی با پیام خوش آمدگویی برای کاربر:

async function Page() {
  return (
    <div>
      <h3>List of trending Movies & TV</h3>
    </div>
  );
}
export default Page;

حال، بیایید به بخش layout از قسمت نگاه کنیم layout.js فایل:

import { Suspense } from "react";
import Link from "next/link";
import Loading from "./loading";
export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <h1>Trending Movies & Movies</h1>
        <li>
          <Link href="/">Home</Link>
        </li>
        <li>
          <Link href="/movies">Movie</Link>
        </li>
        <Suspense fallback={<Loading />}>{children}</Suspense>
      </body>
    </html>
  );
}

در کد بالا، a را ایجاد کردیم navbar در قسمت بدنه که در تمام مسیرها نمایش داده می شود. که در navbar، ما پیوندهایی به root، movies، و TV مسیرها

ایجاد یک loading.js فایل

در root دایرکتوری، ایجاد کنید loading.js فایل با کد زیر:

export default function Loading() {
  return <p>Loading Data...</p>;
}

ما یک مؤلفه بارگذاری اولیه برای نمایش ایجاد کرده‌ایم، اما شما می‌توانید صفحه بارگیری بسیار پیچیده‌تری مانند اسپینرها یا صفحه بارگیری اسکلت اضافه کنید. کامپوننت عملکردی و قرارداد نامگذاری فایل یکسان باقی خواهد ماند.

ایجاد movies مسیر

در Next.js 13، ایجاد مسیر مشابه نسخه های قبلی آن است. یک دایرکتوری در فهرست برنامه با نام ایجاد کنید movies. داخل movies، یک فایل به نام ایجاد کنید page.js با کد زیر:

async function getMovies() {
  let res = await fetch(
    `https://api.themoviedb.org/3/trending/movie/day?api_key=${process.env.NEXT_PUBLIC_TMDB_API}`
  );
  await new Promise((resolve) => setTimeout(resolve, 2000));
  return res.json();
}

async function Trending() {
  let { results } = await getMovies();
  return (
    <div>
      <h3>Movies</h3>
      {results &&
        results.map((index) => {
          return <li>{index.title}</li>;
        })}
    </div>
  );
}
export default Trending;

در بالا، ما یک فایل دو جزئی داریم. getMovies() داده‌ها را از API واکشی می‌کند، که با نام به مؤلفه عملکردی پیش‌فرض ارسال می‌شود Trending. می بینید که این یک جزء رندر سمت سرور است. این دارای یک جزء کاربردی ناهمگام برای واکشی داده مبتنی بر وعده است زیرا Suspense می داند که واکشی داده در حال انجام است. ما همچنین یک تاخیر دو ثانیه ای را برای مشاهده صحیح مؤلفه بارگذاری پیاده سازی کرده ایم.

در Trending جزء را می نامیم getMovies() تابع برای دریافت داده های واکشی شده است. در بازگشت، ما در حال نقشه برداری از داده ها هستیم تا همه فیلم های پرطرفدار را در یک لیست نمایش دهیم.

ممکن است برای شما غیرعادی باشد که ما هنوز از Suspense استفاده نکرده ایم. Next.js 13 متوجه می شود که چه زمانی چیزی در حال بارگذاری وجود دارد. اگر وجود دارد loading.js فایل در route یا حتی root دایرکتوری، مؤلفه بارگیری خود را هنگام بارگیری نمایش می دهد.

ما می توانیم اجزای بارگذاری مختلف را به طور جداگانه در هر مسیر با اضافه کردن آن اضافه کنیم loading.js فایل. بیایید گیف زیر را که خروجی را نمایش می دهد بررسی کنیم:

به صورت اختیاری، می توانید با Supsense نیز مرزهایی ایجاد کنید. با استفاده از اینها، اگر کامپوننتی به طور کامل بارگذاری نشده باشد، کامپوننت بارگیری نمایش داده خواهد شد. برای عملکرد بهتر، این <Suspense> جزء می تواند در طرح و اجزای صفحه باشد.

نتیجه

ساختن کامپوننت بارگیری با Next.js 13 و React Suspense می تواند تجربه کاربری برنامه وب شما را به میزان قابل توجهی بهبود بخشد. با Suspense، می‌توانید به راحتی حالت‌های بارگذاری را برای واکشی داده‌ها و واردات پویا ایجاد کنید و برنامه‌تان را پاسخگوتر و کارآمدتر کنید.

با دنبال کردن مراحل ذکر شده در این مقاله، می‌توانید یک تجربه بارگیری روان برای کاربران خود ایجاد کنید، ناامیدی را کاهش دهید و تعامل را بهبود بخشید. چه در حال ساخت یک وب سایت ساده یا یک برنامه پیچیده باشید، استفاده از Next.js 13 و React Suspense می تواند به شما کمک کند تا تجربه کاربری یکپارچه و لذت بخش تری ایجاد کنید.

به خاطر داشته باشید که Next.js 13 در زمان نوشتن نسخه بتا است، بنابراین ممکن است گاهی اوقات رفتار غیرعادی را تجربه کنید. امیدوارم این مقاله به شما در درک Suspense در Next.js 13 کمک کرده باشد. از خواندن متشکریم!

LogRocket: مشاهده کامل برنامه های React تولیدی شما

اشکال زدایی برنامه های React می تواند دشوار باشد، به خصوص زمانی که کاربران مشکلاتی را تجربه می کنند که بازتولید آن دشوار است. اگر به نظارت و ردیابی وضعیت Redux، نمایش خودکار خطاهای جاوا اسکریپت، و ردیابی درخواست‌های کند شبکه و زمان بارگذاری مؤلفه علاقه دارید، LogRocket را امتحان کنید.

LogRocket پخش مجدد جلسه، تجزیه و تحلیل محصول و ردیابی خطا را ترکیب می کند – تیم های نرم افزاری را برای ایجاد تجربه ایده آل وب و محصول تلفن همراه توانمند می کند. این برای شما چه معنایی دارد؟

LogRocket به جای حدس زدن چرایی خطاها یا درخواست از کاربران برای اسکرین شات‌ها و گزارش‌ها، به شما این امکان را می‌دهد تا مشکلات را طوری تکرار کنید که گویی در مرورگر خودتان اتفاق افتاده‌اند تا به سرعت متوجه شوید که چه اشتباهی رخ داده است.

دیگر خبری از هشدار پر سر و صدا نیست. ردیابی هوشمند خطا به شما امکان می دهد مسائل را تریاژ و دسته بندی کنید، سپس از این موضوع درس بگیرید. از مشکلات تأثیرگذار کاربر مطلع شوید، نه موارد مثبت کاذب. هشدارهای کمتر، سیگنال بسیار مفیدتر.

بسته میان افزاری LogRocket Redux یک لایه دید اضافی را به جلسات کاربر شما اضافه می کند. LogRocket تمام اقدامات و وضعیت ها را از فروشگاه های Redux شما ثبت می کند.

نحوه اشکال زدایی برنامه های React خود را مدرن کنید — نظارت را به صورت رایگان شروع کنید.