طرح بندی RFC | Next.js

Currently, Next.js uses client-side routing. After the initial load and on subsequent navigation, a request is made to the server for the resources of the new page. This includes the JavaScript for every component (including components only shown under certain conditions) and their props (JSON data from getServerSideProps یا getStaticProps). پس از بارگیری جاوا اسکریپت و داده ها از سرور، React کامپوننت ها را در سمت کلاینت رندر می کند.

در این مدل جدید، Next.js از مسیریابی سرور محور در حالی که از انتقال سمت کلاینت پشتیبانی می کند، استفاده می کند. این با اجزای سرور در حال ارزیابی روی سرور سازگار است.

در ناوبری، داده‌ها واکشی می‌شوند و React مؤلفه‌ها را رندر می‌کند سمت سرور. خروجی سرور دستورالعمل‌های ویژه‌ای (نه HTML یا JSON) برای React روی کلاینت برای به‌روزرسانی DOM است. این دستورالعمل ها شامل نتیجه از اجزای سرور رندر شده، به این معنی که هیچ جاوا اسکریپتی برای آن مؤلفه لازم نیست در مرورگر بارگذاری شود تا نتیجه ارائه شود.

این برخلاف پیش‌فرض فعلی مؤلفه‌های کلاینت است که مؤلفه جاوا اسکریپت برای مرورگر باید در سمت کلاینت ارائه شود.

برخی از مزایای مسیریابی سرور محور با React Server Components عبارتند از:

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

همانطور که کاربران در اطراف یک برنامه حرکت می کنند، روتر نتیجه را از React Server Component ذخیره می کند محموله در کش سمت کلاینت حافظه پنهان به بخش‌های مسیر تقسیم می‌شود، که امکان عدم اعتبار در هر سطح را فراهم می‌کند و ثبات را در بین رندرهای همزمان تضمین می‌کند. این به این معنی است که در موارد خاصی می توان از حافظه پنهان یک بخش که قبلاً واکشی شده است دوباره استفاده کرد.

توجه داشته باشید

• برای بهینه سازی بازیابی داده ها می توان از تولید استاتیک و کش سمت سرور استفاده کرد.
• اطلاعات بالا رفتار پیمایش های زیر را شرح می دهد. بارگذاری اولیه فرآیند متفاوتی است که شامل رندر سمت سرور برای تولید HTML است.
• اگرچه مسیریابی سمت کلاینت برای Next.js به خوبی کار می کند، اما زمانی که تعداد مسیرهای بالقوه زیاد است، مقیاس ضعیفی دارد، زیرا مشتری باید دانلود کند. نقشه مسیر
• به طور کلی، با استفاده از React Server Components، ناوبری سمت کلاینت سریع‌تر است، زیرا ما مؤلفه‌های کمتری را در مرورگر بارگذاری و رندر می‌کنیم.

در مسیریابی سمت سرور، ناوبری انجام می شود بعد از در حال واکشی و رندر کردن داده‌ها، بنابراین مهم است که هنگام واکشی داده‌ها، رابط کاربری بارگیری نشان داده شود، در غیر این صورت برنامه پاسخگو نخواهد بود.

روتر جدید از Suspense برای حالت‌های راه‌اندازی فوری و اسکلت‌های پیش‌فرض استفاده می‌کند. این بدان معناست که رابط کاربری بارگیری می‌تواند بلافاصله در حین بارگیری محتوای بخش جدید نمایش داده شود. پس از اتمام رندر سرور، محتوای جدید مبادله می شود.

در حالی که رندر در حال انجام است:

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

لینک را به عنوان کپی کنیداسکلت های بارگیری پیش فرض

محدودیت های ولتاژ به طور خودکار در پشت صحنه با یک قرارداد فایل جدید به نام انجام می شود loading.js.

مثال:

شما می توانید با افزودن a یک اسکلت لودر پیش فرض ایجاد کنید loading.js فایل در یک پوشه

را loading.js باید یک جزء React صادر کند:

export default function Loading() {
  return YourSkeleton />
}
 
// layout.js
export default function Layout({children}) {
  return (
    
      Sidebar />
      {children}
    >
  )
}
 
// Output

  Sidebar />
  Suspense fallback={Loading />}>{children}Suspense>
>

این باعث می شود که تمام بخش های پوشه در یک مرز کششی پیچیده شوند. اسکلت پیش‌فرض زمانی که طرح‌بندی برای اولین بار بارگیری می‌شود و هنگام پیمایش بین صفحات مرتبط استفاده می‌شود.

ErrorBounders مؤلفه‌های React هستند که خطاهای جاوا اسکریپت را در هر نقطه از درخت مؤلفه فرزند خود می‌گیرند.

لینک را به عنوان کپی کنیدکنوانسیون

شما قادر خواهید بود یک خطای محدود ایجاد کنید که با اضافه کردن، خطاها را در یک زیردرخت تشخیص دهد error.js فایل و به طور پیش فرض صادر کردن یک جزء React است.

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

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

export default function Error({ error, reset }) {
  return (
    
      An error occurred: {error.message}
      button onClick={() => reset()}>Try againbutton>
    >
  );
}
 
// layout.js
export default function Layout({children}) {
  return (
    
      Sidebar />
      {children}
    >
  )
}
 
// Output

  Sidebar />
  ErrorBoundary fallback={Error />}>{children}ErrorBoundary>
>

توجه:

• خطاهای داخل a layout.js فایل در همان بخش به عنوان error.js گرفتار نخواهد شد زیرا کران خطای خودکار در اطراف فرزندان طرح بندی قرار می گیرد، نه خود طرح.

الگوها شبیه طرح‌بندی‌ها هستند زیرا هر صفحه‌آرایی یا صفحه‌ای را می‌پیچند.

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

توجه: توصیه می کنیم از طرح بندی استفاده کنید مگر اینکه دلیل خاصی برای استفاده از یک الگو داشته باشید.

لینک را به عنوان کپی کنیدکنوانسیون

الگو را می توان با صادرات کامپوننت پیش فرض React از a تعریف کرد template.js فایل جزء باید الف را بپذیرد children پایه ای که با بخش های تو در تو پر می شود.

لینک را به عنوان کپی کنیدیک مثال

export default function Template({ children }) {
  return Container>{children}Container>;
}

خروجی رندر شده یک بخش مسیر با طرح و قالب به صورت زیر خواهد بود:

Layout>
  {/* Note that the template is given a unique key. */}
  Template key={routeParam}>{children}Template>
Layout>

لینک را به عنوان کپی کنیدرفتار

ممکن است مواردی وجود داشته باشد که شما نیاز به نصب و جداسازی رابط کاربری مشترک داشته باشید و الگوها گزینه بهتری باشند. به عنوان مثال:

• با استفاده از CSS یا کتابخانه های انیمیشن، انیمیشن ها را وارد/خروج کنید
• کارکردهایی که بر آن تکیه دارند useEffect (به عنوان مثال ورود به سیستم بازدید از صفحه) و useState (به عنوان مثال یک فرم بازخورد در یک صفحه)
• برای تغییر رفتار قاب پیش فرض. به عنوان مثال مرزهای ولتاژ در طرح‌بندی‌ها فقط زمانی که طرح‌بندی برای اولین بار بارگذاری می‌شود، بازگشت را نشان می‌دهد، نه هنگام تعویض صفحات. برای الگوها، نسخه بازگشتی در هر پیمایش نمایش داده می شود.

به عنوان مثال، طراحی یک چیدمان تودرتو با یک محفظه محدود که باید در اطراف هر صفحه فرعی قرار گیرد را در نظر بگیرید.

می توانید ظرف را در طرح والد قرار دهید (shop/layout.js):

export default function Layout({ children }) {
  return div className="container">{children}div>;
}
 
// shop/page.js
export default function Page() {
  return div>...div>;
}
 
// shop/categories/layout.js
export default function CategoryLayout({ children }) {
  return div>{children}div>;
}

اما همه انیمیشن‌های ورود/خروج در سوئیچ‌های صفحه پخش نمی‌شوند زیرا طرح‌بندی والد مشترک دوباره ارائه نمی‌شود.

می‌توانید ظرف را در هر طرح یا صفحه‌ای تودرتو قرار دهید:

export default function Layout({ children }) {
  return div>{children}div>;
}
 
// shop/page.js
export default function Page() {
  return div className="container">...div>;
}
 
// shop/categories/layout.js
export default function CategoryLayout({ children }) {
  return div className="container">{children}div>;
}

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

با استفاده از این کنوانسیون، می توانید الگوهایی را بین مسیرها به اشتراک بگذارید که یک نمونه جدید در مسیریابی ایجاد می کند. این بدان معنی است که عناصر DOM دوباره ایجاد می شوند، وضعیت ذخیره نمی شود و افکت ها مجدداً همگام می شوند.

ما قصد داریم تا کنوانسیون هایی را برای پوشش لبه ها معرفی کنیم و به شما امکان می دهیم الگوهای مسیریابی پیچیده تری را پیاده سازی کنید. در زیر چند نمونه وجود دارد که ما فعالانه به آنها فکر می کنیم:

لینک را به عنوان کپی کنیدرهگیری مسیرها

گاهی اوقات رهگیری بخش های مسیر از مسیرهای دیگر می تواند مفید باشد. هنگام پیمایش، URL به طور معمول به روز می شود، اما بخش رهگیری شده در طرح مسیر فعلی نمایش داده می شود.

لینک را به عنوان کپی کنیدیک مثال

قبل از: با کلیک بر روی تصویر به مسیر جدیدی با چیدمان خاص خود می رسید.

بعد از: با برداشتن مسیر، کلیک روی تصویر اکنون بخش را در طرح بندی مسیر فعلی بارگیری می کند. به عنوان مثال به عنوان مدال

برای رهگیری /photo/[id] مسیر از داخل /[username] بخش، یک نسخه تکراری ایجاد کنید /photo/[id] پوشه داخل /[username] پوشه و ارائه آن با (..) کنوانسیون

لینک را به عنوان کپی کنیدکنوانسیون

• (..) – با بخش مسیر یک سطح به بالا (برادر دایرکتوری والد) مطابقت خواهد داشت. شبیه به ../ در مسیرهای نسبی
• (..)(..) – با بخش مسیر دو سطح بالاتر مطابقت دارد. شبیه به ../../ در مسیرهای نسبی
• (...) – با بخش مسیر در فهرست اصلی مطابقت دارد.

توجه: به‌روزرسانی یا اشتراک‌گذاری صفحه، مسیر را با طرح‌بندی پیش‌فرض بارگیری می‌کند.

لینک را به عنوان کپی کنیدمسیرهای موازی پویا

گاهی اوقات نمایش دو یا چند بخش از یک صفحه می تواند مفید باشد (page.js) در همان نمای قابل ناوبری مستقل.

برای مثال، دو یا چند گروه از برگه‌ها را در یک داشبورد در نظر بگیرید. پیمایش یک گروه از برگه ها نباید بر دیگری تأثیر بگذارد. هنگام پیمایش به عقب و جلو، ترکیبات برگه ها نیز باید به درستی بازیابی شوند.

لینک را به عنوان کپی کنیدکنوانسیون

به‌طور پیش‌فرض طرح‌بندی‌ها یک پایه به نام را می‌پذیرند children که حاوی یک طرح یا صفحه تو در تو خواهد بود. می‌توانید با ایجاد یک نام «slot» (پوشه‌ای که شامل آن می‌شود، نام آن را تغییر دهید @ پیشوند) و بخش های تو در تو در داخل آن.

پس از این تغییر، طرح یک پایه فراخوانی می شود customProp به جای children.

export default function Layout({ customProp }) {
  return {customProp}>;
}

شما می توانید مسیرهای موازی را با اضافه کردن بیش از یک اسلات نامگذاری شده در همان سطح ایجاد کنید. در مثال زیر، هر دو @views و @audience به عنوان پایه به طرح تحلیل منتقل می شوند.

می‌توانید از شکاف‌های نام‌گذاری‌شده برای نمایش هم‌زمان بخش‌هایی از صفحه استفاده کنید.

export default function Layout({ views, audience }) {
  return (
    
      div>
        ViewsNav />
        {views}
      div>
      div>
        AudienceNav />
        {audience}
      div>
    >
  );
}

زمانی که کاربر برای اولین بار به /analytics، در page.js بخش در هر پوشه (@views و @audience) نشان داده شده اند.

هنگام پیمایش به /analytics/subscribers، فقط @audience در حال به روز رسانی است. به همین ترتیب، فقط @views هنگام پیمایش به به روز می شوند /analytics/impressions.

پیمایش به عقب و جلو، ترکیب صحیح مسیرهای موازی را بازیابی می کند.

لینک را به عنوان کپی کنیدترکیب مسیرهای متقاطع و موازی

شما می توانید مسیرهای رهگیری و موازی را برای دستیابی به رفتار مسیریابی خاص در برنامه خود ترکیب کنید.

یک مثال

به عنوان مثال، هنگام ایجاد یک مدال، اغلب باید از برخی چالش‌های رایج آگاه باشید، مانند:

• مدال ها از طریق URL قابل دسترسی نیستند.
• هنگامی که صفحه به روز می شود، مدال ها بسته می شوند.
• پیمایش به مسیر قبلی، نه مسیر پشت مودال.
• پیمایش به جلو، مودال را دوباره باز نمی کند.

ممکن است بخواهید modal هنگام باز شدن url را به روز کند و ناوبری عقب / جلو برای باز و بسته کردن modal. علاوه بر این، زمانی که URL را به اشتراک می گذارید، ممکن است بخواهید صفحه با مدال باز و زمینه پشت آن بارگیری شود، یا ممکن است بخواهید صفحه محتوا را بدون مدال بارگیری کند.

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

با استفاده از قراردادها، می‌توانیم نقشه رفتار مودال را به رفتار مسیریابی پیش‌فرض بسازیم.

این ساختار پوشه را در نظر بگیرید:

با این مدل:

• محتوای /photo/[id] از طریق URL در زمینه خود قابل دسترسی است. همچنین در یک مودال از داخل در دسترس است /[username] مسیر
• پیمایش به جلو و عقب با استفاده از ناوبری سمت سرویس گیرنده باید مودال را بسته و دوباره باز کند.
• تازه کردن صفحه (ناوبری سمت سرور) باید کاربر را به صفحه اصلی برساند /photo/id مسیر به جای نشان دادن مودال.

ج /@modal/(..)photo/[id]/page.js، می توانید محتوای صفحه را که در یک جزء معین پیچیده شده است برگردانید.

export default function PhotoPage() {
  const router = useRouter();
 
  return (
    Modal
      // the modal should always be shown on page load
      isOpen={true}
      // closing the modal should take user back to the previous page
      onClose={() => router.back()}
    >
      {/* Page Content */}
    Modal>
  );
}

توجه: این راه حل تنها راه برای ایجاد یک مدال در Next.js نیست، بلکه قصد دارد نشان دهد که چگونه می توانید قراردادها را برای دستیابی به رفتار مسیریابی پیچیده تر ترکیب کنید.

گاهی اوقات ممکن است برای تعیین مسیر نمایش به اطلاعات پویا مانند داده یا زمینه نیاز داشته باشید. شما می توانید از مسیرهای موازی برای بارگذاری مشروط یک مسیر یا مسیر دیگر استفاده کنید.

یک مثال

export async function getServerSideProps({ params }) {
  const { accountType } = await fetchAccount(params.slug);
  return { props: { isUser: accountType === 'user' } };
}
 
export default function UserOrTeamLayout({ isUser, user, team }) {
  return {isUser ? user : team}>;
}

در مثال بالا، می توانید یکی از این دو را برگردانید user یا team مسیر بسته به حلزون حرکت می کند. این به شما امکان می دهد تا داده ها را به صورت مشروط بارگذاری کنید و مسیرهای فرعی را روی یک گزینه یا گزینه دیگر نقشه برداری کنید.

ما در مورد آینده طرح‌بندی، مسیریابی و React 18 در Next.js هیجان‌زده هستیم. کار پیاده‌سازی آغاز شده است و به محض در دسترس شدن ویژگی‌ها را اعلام خواهیم کرد.

نظرات خود را بنویسید و به گفتگو در بحث های GitHub بپیوندید.