بهینه سازی عملکرد برنامه Next.js برای سرعت و سئو

مقدمه

به مقاله ما در مورد بهینه سازی عملکرد برنامه Next.js از طریق استفاده از getServerSideProps و getStaticProps خوش آمدید. به عنوان یک طرفدار بزرگ NextJS، می‌خواهم نشان دهم که چگونه می‌توانیم با استفاده از قدرت NextJS بهترین نتایج را بگیریم.

در این مقاله، به جزئیات این دو روش می پردازیم و به شما نشان می دهیم که چگونه از آنها به طور موثر برای واکشی داده ها به کارآمدترین روش ممکن استفاده کنید. چه یک توسعه‌دهنده باتجربه Next.js باشید و چه تازه شروع به کار کرده‌اید، این مقاله دانشی را در اختیار شما قرار می‌دهد که برای ارتقای عملکرد برنامه‌تان به سطح بعدی نیاز دارید. بنابراین، بیایید شروع کنیم و ببینیم چگونه می توانیم از این ابزار قدرتمند برای بهبود سرعت و عملکرد برنامه Next.js خود استفاده کنیم.

اهمیت بهینه سازی عملکرد برنامه Next.js

وقتی صحبت از ساخت برنامه های وب می شود، عملکرد کلیدی است. هیچ کس نمی خواهد از یک برنامه کند و بی نظم استفاده کند، و در دنیای پر سرعت امروز، مردم انتظار دارند وب سایت ها سریع و روان بارگذاری شوند. این امر به ویژه در مورد Next.js، یک چارچوب محبوب برای ساخت برنامه های React صادق است. با Next.js می‌توانید برنامه‌های وب قدرتمند و کارآمد بسازید، اما مهم است که برای بهینه‌سازی عملکرد برنامه‌تان وقت بگذارید تا مطمئن شوید که آن را در بهترین حالت اجرا می‌کند.

منظور از Optimization چیست؟

بهینه سازی عملکرد برنامه Next.js می تواند به معنای تفاوت بین یک برنامه موفق و برنامه کوتاه باشد. همچنین می تواند به معنای تفاوت بین یک تجربه کاربری خوب و یک تجربه خسته کننده باشد. و سئو را فراموش نکنیم، موتورهای جستجو مانند گوگل نیز به وب سایت های سریع و بهینه شده با رتبه بهتر پاداش می دهند که ترافیک بیشتری را برای وب سایت شما به ارمغان می آورد.
اگر با Next.js کار می کنید، ممکن است نام این ویژگی فانتزی به نام بازسازی استاتیک افزایشی را شنیده باشید. اساساً، این راهی است که Next.js می‌تواند عملکرد برنامه وب شما را تنها با بازسازی مجدد بخش‌هایی که تغییر کرده‌اند، به‌جای هر بار کل آن، بهینه کند. خیلی جالب به نظر می رسد، درست است؟

بیایید getServerSideProps و getStaticProps را بررسی کنیم، و چگونه آنها می توانند به شما در بهینه سازی عملکرد برنامه Next.js کمک کنند.

آشنایی با getServerSideProps

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

در اینجا یک مثال ساده از نحوه استفاده از getServerSideProps برای واکشی اطلاعات نمایه کاربر آورده شده است:

export async function getServerSideProps(context) {
  // Fetch user's profile information
  const res = await fetch(`https://my-api.com/users/${context.params.userId}`);
  const user = await res.json();

  // Pass user data to the page component
  return { props: { user } }
}

آشنایی با getStaticProps

از طرف دیگر، getStaticProps روشی است که به شما امکان می دهد داده ها را در زمان ساخت واکشی کنید و سپس داده ها به عنوان یک فایل JSON ذخیره شوند. این برای موقعیت‌هایی که داده‌های واکشی ثابت هستند و اغلب تغییر نمی‌کنند عالی است.

در اینجا مثالی از نحوه استفاده از getStaticProps برای واکشی لیستی از پست های وبلاگ آورده شده است:

export async function getStaticProps() {
   const slug = context.params?.slug as string;

    const blogPosts = await client.getEntries({
      'fields.slug[in]': slug,
    });

    const blogPost = blogPosts.items[0].fields as IBlogPostFields;

    return {
      props: {
        blogPost,
      },
    };
}

برای اینکه بتوانیم از getStaticProbs استفاده کنیم، باید تمام مسیرهای صفحاتی که می خواهیم به صورت ایستا ایجاد کنیم را مشخص کنیم. بنابراین، با تابع getStaticPaths همه مسیرها را تعریف می کنیم.

export async function getStaticPaths(){
  const allPosts = await client.getEntries();

  const paths = allPosts.items.map((post) => {
    return {
      params: { slug: post.slug },
    };
  });

  return {
    paths,
    fallback: 'blocking',
  };
}

تفاوت بین getServerSideProps و getStaticProps

بنابراین، تفاوت اصلی بین getServerSideProps و getStaticProps این است که اولی در طول درخواست اولیه در سمت سرور اجرا می شود و دومی در زمان ساخت اجرا می شود.

مهم است که به خاطر داشته باشید که getStaticProps فقط در زمان ساخت فراخوانی می شود، در حالی که getServerSideProps در هر درخواست فراخوانی می شود، بنابراین بهتر است از آن برای داده های پویا استفاده کنید و از getStaticProps برای داده های استاتیک استفاده کنید، به این ترتیب می توانید بهترین عملکرد را داشته باشید. از برنامه Next.js شما.

بهبود getStaticProps با اعتبار مجدد درخواستی

یکی از راه‌هایی که می‌توانید از این مزیت استفاده کنید، استفاده از اعتبارسنجی مجدد درخواستی است. این یک روش فانتزی برای گفتن این است که می توانید به طور انتخابی بخش های خاصی از برنامه خود را مجدداً تأیید کنید، بدون اینکه نیازی به بازسازی کل آن باشد. می‌توانید این کار را با استفاده از متدهای getStaticProps و getServerSideProps انجام دهید، که به شما امکان می‌دهد مشخص کنید کدام داده‌ها نیاز به اعتبارسنجی مجدد دارند.

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

یک ویژگی عالی برای تأیید مجدد محتوای صفحه استاتیک با استفاده از دایرکتوری NextJS API وجود دارد. در اینجا مثال رسمی از NextJS است:

// pages/api/revalidate.js

export default async function handler(req, res) {
  // Check for secret to confirm this is a valid request
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: 'Invalid token' })
  }

  try {
    // this should be the actual path not a rewritten path
    // e.g. for "/blog/[slug]" this should be "/blog/post-1"
    await res.revalidate('/path-to-revalidate')
    return res.json({ revalidated: true })
  } catch (err) {
    // If there was an error, Next.js will continue
    // to show the last successfully generated page
    return res.status(500).send('Error revalidating')
  }
}

من بهترین راه برای تأیید مجدد پست‌ها برای CMS Contentful Headless ایجاد یک هوک در حین ایجاد، انتشار و به‌روزرسانی است. با این روش، می‌توانیم قابلیت اعتبارسنجی مجدد را در پس‌زمینه فعال کنیم.

در نتیجه

بهینه سازی عملکرد برنامه Next.js برای ساختن یک برنامه وب موفق و کارآمد بسیار مهم است. با استفاده از ویژگی هایی مانند getServerSideProps و getStaticProps، می توانید سرعت و عملکرد برنامه خود را بهبود بخشید و مطمئن شوید که در بهترین حالت اجرا می شود. به یاد داشته باشید که عملکرد نه تنها برای تجربه کاربر مهم است، بلکه برای سئو سایت نیز مهم است، وب سایت سریعتر به معنای رتبه بهتر و ترافیک بیشتر است. با پیروی از بهترین روش‌های ذکر شده در این مقاله، می‌توانید برنامه Next.js خود را به سطح بالاتری ببرید و مطمئن شوید که در اوج عملکرد خود اجرا می‌شود.

توجه: این مقاله با کمک ChatGPT تهیه شده است

منابع

getServerSideProps

getStaticProps

getStaticPaths

واکشی افزایشی داده