Next.js 13 فایل ویژه، واکشی داده ها و برچسب سر – صفحه، طرح و قالب

قبل از شروع، به این نکته توجه کنید به طور پیش فرض اجزای Next.js 13 اجزای سرور هستند. این تقریباً به این معنی است که شما نمی توانید از عوارض جانبی مشتری و اقداماتی مانند این استفاده کنید useEffect، استفاده از ایالت، روی کلیک کنیدو غیره. می توانید با افزودن، سمت کلاینت کامپوننت را بسازید “استفاده از مشتری”؛ بخشنامه در بالای جزء بر واردات.
اجزای سرور همچنین با کاهش مقدار جاوا اسکریپت ارسال شده به مشتری، عملکرد را بهبود می بخشد، واکشی داده ها را آسان تر می کند، برای SEO بهتر است زیرا ربات های موتور جستجو می توانند به راحتی به محتوای HTML صفحه دسترسی داشته باشند و نیازی به منتظر ماندن برای مشتری نیست. اجرای کد سمت.

اگر می خواهید اصول مسیریابی و دایرکتوری برنامه را بدانید، می توانید به مقاله قبلی مراجعه کنید.

صفحات

مهمترین فایل در فهرست برنامه جدید صفحه است. این به این دلیل است که فایل صفحه مسیر را در دسترس عموم قرار می دهد.

شما با صادر کردن تابع به عنوان پیش فرض از صفحه، صفحه ایجاد می کنید page.tsx فایل مانند مثال زیر شما می توانید تابع را هر چه می خواهید صدا بزنید.

طرح بندی ها

که در layout.tsx، یک رابط کاربری ایجاد می کنید که بین چندین صفحه فرزند به اشتراک گذاشته می شود. بنابراین شما می توانید یک UI برای /شرکت/درباره و این طرح برای تمام صفحات تحت مسیر اعمال خواهد شد /company/about/*، اما نه برای مسیرهای خواهر و برادر مانند /شرکت/حرفه.
می توانید در هر سطحی از مسیر یک طرح بندی ایجاد کنید.

در مسیریابی، طرح‌بندی‌ها حالت را حفظ می‌کنند، تعاملی باقی می‌مانند و دوباره ارائه نمی‌شوند.

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

در چیدمان ریشه باید شامل شود html و بدن برچسب ها

هر طرح بندی دیگری می تواند به این شکل باشد (طرح بندی برای /در باره صفحه)

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

قالب ها

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

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

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

واکشی داده ها

صفحات و طرح‌بندی‌ها مانند سایر اجزا می‌توانند داده‌ها را واکشی کنند. به دلیل کامپوننت های سرور جدید، واکشی داده ها در Next.js 13 واقعاً مفید است و مزایای زیادی دارد.

همچنین می توانید داده ها را در مؤلفه های مشتری واکشی کنید. کتابخانه هایی مانند SWR یا React Query در Client Components توصیه می شوند. (در آینده استفاده از آن نیز امکان پذیر خواهد بود استفاده کنید() قلاب).

شما می توانید با استفاده از بومی به سیستم جدید واکشی داده ها دسترسی داشته باشید رفتن و آوردن() Web API و استفاده کنید ناهمگام/در انتظار در اجزای سرور

می‌توانید داده‌ها را در چندین مؤلفه واکشی کنید، Next.js 13 به‌طور خودکار درخواست‌ها را کش می‌کند (گرفتن) که ورودی یکسانی در حافظه پنهان موقت دارند. به این ترتیب از موقعیت‌هایی که در آن داده‌های یکسان را می‌توان بیش از یک بار واکشی کرد، جلوگیری کرد. برای واکشی داده‌ها در طرح‌بندی‌ها مفید است، زیرا امکان انتقال داده‌ها بین طرح‌بندی والد و فرزندان آن وجود ندارد. کافی است داده‌ها را مستقیماً در طرح‌بندی مورد نیاز واکشی کنید، و Next.js 13 از ذخیره‌سازی و حذف درخواست‌ها مراقبت می‌کند.

دو الگوی واکشی داده

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

اگر می‌خواهید درباره الگوهای واکشی داده‌ها بیشتر بدانید، به مستندات Next.js 13 مراجعه کنید.
اگر می‌خواهید دانش خود را به طور کلی در مورد واکشی داده در Next.js 13 گسترش دهید، این لینک است.

در حال اصلاح سر برچسب زدن

یک چیز دیگر که باید بدانید روش جدیدی برای اصلاح است سر برچسب زدن

اگر از مقادیر استاتیک در تگ head استفاده می کنید:

اگر از داده های پویا در تگ head استفاده می کنید:

این همه در این مقاله است. اگر می خواهید دانش خود را گسترش دهید، مستندات را بررسی کنید.
امیدوارم لذت برده باشید! 🚀