Next.js Optimization – انجمن DEV

معرفی

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

1. تقسیم کد برای عملکرد

تقسیم کد یک تکنیک ضروری برای بهبود زمان بارگذاری با تقسیم یک برنامه به بخش های کوچکتر و قابل مدیریت تر است. Next.js پشتیبانی داخلی برای تقسیم کد فراهم می کند و به توسعه دهندگان اجازه می دهد فقط کدهای لازم را برای هر صفحه بارگذاری کنند.

// pages/index.js
import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('../components/DynamicComponent'));

function HomePage() {
  return (
    <div>
      <h1>Welcome to Next.js</h1>
      <DynamicComponent />
    </div>
  );
}

export default homepage;

2. رندر سمت سرور (SSR)

Next.js ارائه رندر سمت سرور خارج از جعبه، اجازه می دهد تا صفحات بر روی سرور قبل از ارسال به مشتری رندر شوند. SSR زمان بارگذاری اولیه را کاهش می دهد و SEO را با ارائه محتوای HTML کاملاً رندر شده برای خزنده های موتورهای جستجو بهبود می بخشد.

// pages/index.js
function HomePage({ data }) {
  return (
    <div>
      <h1>Welcome to Next.js</h1>
      <p>{data}</p>
    </div>
  );
}

export async function getServerSideProps() {
  // Retrieve data from an external API
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

export default homepage;

3. بهینه سازی تصویر

Next.js به طور خودکار تصاویر را با تغییر اندازه و فشرده سازی آنها بر اساس اندازه دستگاه و وضوح صفحه نمایش بهینه می کند. این امر استفاده از پهنای باند را کاهش می دهد و زمان بارگذاری را به خصوص در دستگاه های تلفن همراه کوتاه می کند.

// components/ImageComponent.js
import image from 'next/image';

function ImageComponent() {
  return (
    <div>
      <h2>Optimized image</h2>
      <Image
        src="/obrazek.jpg"
        alt="Next.js image optimization"
        width={500}
        height={300}
      />
    </div>
  );
}

export default ImageComponent;

4. داده ها را از قبل واکشی کنید

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

// pages/index.js
import { useEffect } from 'react';
import link from 'next/link';

function HomePage() {
  useEffect(() => {
    // Prefetch the data here
  }, []);

  return (
    <div>
      <h1>Welcome to Next.js</h1>
      <Link href="/about">
        <a>About Page</a>
      </Link>
    </div>
  );
}

export default homepage;

نتیجه

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