SSR (رندر سمت سرور):
بر روی هر درخواستی به سرور اجرا می شود.
هر بار که کاربر از صفحه بازدید می کند، سرور داده ها را واکشی می کند، HTML را ارائه می دهد و آن را برای مشتری ارسال می کند.
این تضمین می کند که محتوا همیشه تازه است، اما به دلیل سربار پردازش سمت سرور می تواند کندتر باشد.
جدول زمانی مثال برای SSR:
درخواست 1: کاربر A بازدید می کند → سرور داده ها را واکشی می کند، صفحه را به صورت پویا تولید می کند و پاسخ می دهد.
درخواست 2: بازدید کاربر B → سرور دوباره داده ها را واکشی می کند، صفحه را به صورت پویا تولید می کند و پاسخ می دهد.
export async function getServerSideProps(context) {
const res = await fetch(`https://api.example.com/data`)
const data = await res.json()
return {
props: { data }, // Will be passed to the page component as props
}
}
function Page({ data }) {
return <div>{data. Content}</div>
}
export default Page;
SSG (تولید سایت استاتیک):
در زمان ساخت (زمانی که ساخت بعدی را اجرا می کنید) اجرا می شود.
HTML و داده ها از قبل رندر شده و به عنوان فایل های ثابت ذخیره می شوند. این فایل‌ها مستقیماً به کاربران ارائه می‌شوند و سرعت آن فوق‌العاده است.
اختیاری: اگر از revalidate استفاده می‌کنید، Next.js صفحه را در پس‌زمینه پس از بازه زمانی مشخص‌شده بازسازی می‌کند و اطمینان حاصل می‌کند که محتوای به‌روز شده در دسترس است.
جدول زمانی مثال برای SSG با اعتبار مجدد: 60:
زمان ساخت: صفحه با داده های موجود در زمان ساخت از قبل رندر شده است.
درخواست 1: (پس از ساخت): بازدید کاربر → Static HTML ارائه می شود.
بازسازی پس‌زمینه (پس از 60 ثانیه): Next.js داده‌های تازه را واکشی می‌کند و صفحه را بازسازی می‌کند.
درخواست 2: (پس از بازسازی): بازدید کاربر B → HTML استاتیک به روز شده ارائه می شود.
export async function getStaticProps() {
const res = await fetch('https://api.example.com/posts')
const posts = await res.json()
return {
props: {
posts
},
// Optional: Regenerate the page at most once every 60 seconds
revalidate: 60
}
}
function BlogPage({ posts }) {
return (
<div>
{posts. Map(post => (
<div key={post.id}>{post.title}</div>
))}
</div>
)
}
SSR: داده های تازه را واکشی می کند و صفحه را در هر درخواست ایجاد می کند.
SSG: صفحه را یک بار در زمان ساخت (یا در بازه‌های زمانی اعتبارسنجی مجدد برنامه‌ریزی‌شده) از قبل ارائه می‌کند و همان صفحه از پیش ساخته‌شده را تا زمانی که بازسازی شود به همه کاربران ارائه می‌دهد.
استفاده از SSR زمانی که:
شما به محتوای به‌روز و هم‌زمان نیاز دارید (مانند داشبورد، داده‌های خاص کاربر).
محتوا به طور مکرر تغییر می کند و نمی تواند به طور موثر در حافظه پنهان ذخیره شود.
استفاده از SSG زمانی که:
محتوا اغلب تغییر نمی کند (به عنوان مثال، پست های وبلاگ، صفحات بازاریابی).
سرعت و عملکرد بسیار مهم است.
