Skip to content

Commit

Permalink
docs: update nextjs/isr
Browse files Browse the repository at this point in the history
  • Loading branch information
A-Najmabadi committed Dec 8, 2024
1 parent 4a60e47 commit 1733d46
Showing 1 changed file with 91 additions and 1 deletion.
92 changes: 91 additions & 1 deletion src/pages/paas/nextjs/how-tos/use-isr.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,100 @@ import Head from "next/head";
# استفاده از قابلیت ISR
<hr className="mb-2" />

ISR (Incremental Static Regeneration) یکی از قابلیت‌های NextJS است که به شما اجازه می‌دهد تا صفحاتی را که به‌صورت استاتیک تولید شده‌اند، بدون نیاز به بازسازی کامل سایت، به‌روز کنید.
<a href="https://nextjs.org/docs/pages/building-your-application/data-fetching/incremental-static-regeneration" className="text-[#2196f3]">ISR</a> یا Incremental Static Regeneration یک ویژگی در NextJS است که به شما اجازه می‌دهد تا صفحات استاتیک را به صورت انتخابی و بدون نیاز به بازسازی کل سایت، به‌روزرسانی کنید.
این قابلیت ترکیبی از مزایای Static Site Generation (SSG) و انعطاف‌پذیری Server-Side Rendering (SSR) را ارائه می‌دهد.
در واقع، عملکرد ISR به شکل زیر است:

<div className="h-2" />
<ul>

<li ><b>ساخت تدریجی صفحات: </b>صفحات استاتیک می‌توانند پس از بیلد اولیه سایت، در صورت نیاز (با request کاربر)، build یا به‌روز شوند.</li>
<div className="h-1" />
<li ><b>پیکربندی از طریق revalidate: </b>شما می‌توانید زمان‌بندی به‌روزرسانی صفحات را با استفاده از ویژگی revalidate تعیین کنید. برای مثال، اگر مقدار revalidate را برابر با ۱۰ قرار دهید، صفحه هر ۱۰ ثانیه یک‌بار به‌روزرسانی می‌شود.</li>
<div className="h-1" />
<li ><b>پاسخ‌دهی سریع: </b>در زمان درخواست کاربر، نسخه موجود در کش به سرعت ارائه می‌شود و به‌روزرسانی‌ها به صورت پس‌زمینه انجام می‌شوند.</li>
{/* <div className="h-1" />
<li style={{ "padding-inline-start": 20}}><b></b></li> */}
</ul>
<div className="h-2" />

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

در این فرآیند، NextJS از کش (Cache) برای ارائه سریع نسخه موجود صفحه استفاده می‌کند. این باعث می‌شود تا کاربران تجربه سریعی داشته باشند، حتی اگر داده‌های صفحه در حال به‌روزرسانی باشد. هنگامی که فرآیند بازسازی کامل شد، نسخه جدید جایگزین نسخه قدیمی می‌شود و برای درخواست‌های بعدی ارائه خواهد شد. این ویژگی برای وب‌سایت‌هایی که شامل محتوای متغیر یا صفحات زیادی هستند، مانند فروشگاه‌های آنلاین یا سایت‌های خبری، بسیار ایده‌آل است.

<Section id="enable-isr" title="نحوه استفاده" />
مثال زیر نحوه پیاده‌سازی ISR را نشان می‌دهد. این کد داده‌ها را از یک API فرضی دریافت کرده و هر ۱۰ ثانیه، صفحه را به‌روز می‌کند:

<div className="h-2" />
<div dir='ltr'>
<Highlight className="js">
{`// pages/isr-example.js
export async function getStaticProps() {
const data = await fetch('https://jsonplaceholder.typicode.com/posts/1')
.then((res) => res.json());
return {
props: { data },
revalidate: 10, // updates every 10 seconds
};
}
const ISRExample = ({ data }) => {
return (
<div>
<h1>ISR Example</h1>
<p><strong>Title:</strong> {data.title}</p>
<p><strong>Body:</strong> {data.body}</p>
</div>
);
};
export default ISRExample;
`}
</Highlight>
</div>
<div className="h-2" />

در پروژه‌های واقعی ممکن است داده‌ها ناقص باشند یا API به درستی پاسخ ندهد. در چنین مواردی، می‌توانید مانند قطعه کد زیر، عمل کنید:

<div className="h-2" />
<div dir='ltr'>
<Highlight className="js">
{`export async function getStaticProps() {
try {
const data = await fetch('https://jsonplaceholder.typicode.com/posts/1')
.then((res) => res.json());
if (!data) {
return {
notFound: true, // display 404 page
};
}
return {
props: { data },
revalidate: 10, // update every 10 seconds
};
} catch (error) {
console.error('Error fetching data:', error);
return {
props: { data: null },
revalidate: 10,
};
}
}
`}
</Highlight>
</div>
<div className="h-2" />


<Section id="enable-in-liara" title="نحوه استفاده در لیارا" />
از آنجایی که فضای نوشتن در حالتِ پیش‌فرضِ Writable، متغیر است و در حالت فایل‌سیستم ReadOnly فضایی برای نوشتن وجود ندارد؛ ممکن است که به افزایش فضا برای ذخیره‌سازی صفحات ساخته شده مبتنی بر ISR، نیاز داشته باشید. برای این کار کافیست تا طبق مراحل زیر، عمل کنید:

<div className="h-4" />

<Tabs
tabs={["Pages Router", "App Router"]}
content={[
Expand Down

0 comments on commit 1733d46

Please sign in to comment.