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

Next.js 13+ ویژگی‌ها و پیشرفت‌های جدیدی را معرفی می‌کند که ساخت برنامه‌های بسیار بهینه و سریع را آسان‌تر می‌کند. در این آموزش، تکنیک‌های مختلفی را برای افزایش عملکرد برنامه‌های Next.js 13+ شما بررسی می‌کنیم و تجربه کاربری روان و کارآمدی را تضمین می‌کنیم.

چرا بهینه سازی عملکرد مهم است

بهینه سازی عملکرد برای ارائه تجربیات کاربر با کیفیت بسیار مهم است. زمان رندر آهسته می تواند منجر به تعامل ضعیف کاربر، افزایش نرخ پرش و نرخ تبدیل کمتر شود. با بهینه سازی برنامه های Next.js خود، می توانید رضایت کاربر را افزایش دهید و عملکرد کلی برنامه خود را بهبود بخشید.

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

1. استفاده از تولید سایت استاتیک (SSG) و بازسازی استاتیک افزایشی (ISR)

Next.js از ایجاد سایت ایستا (SSG) و بازسازی استاتیک افزایشی (ISR) برای پیش رندر کردن صفحات در زمان ساخت پشتیبانی می کند. این کار زمان بارگذاری را با ارائه فایل های HTML ایستا بهبود می بخشد.

تولید سایت ایستا (SSG)

// pages/index.js
import { GetStaticProps } from 'next';

export const getStaticProps: GetStaticProps = async () => {
  const data = await fetch('https://api.example.com/data').then(res => res.json());

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

const HomePage = ({ data }) => (
  <div>
    <h1>Welcome to the Home Page</h1>
    <pre>{JSON.stringify(data, null, 2)}</pre>
  </div>
);

export default HomePage;

بازسازی استاتیک افزایشی (ISR)

// pages/index.js
import { GetStaticProps } from 'next';

export const getStaticProps: GetStaticProps = async () => {
  const data = await fetch('https://api.example.com/data').then(res => res.json());

  return {
    props: {
      data,
    },
    revalidate: 60, // Regenerate the page every 60 seconds
  };
};

const HomePage = ({ data }) => (
  <div>
    <h1>Welcome to the Home Page</h1>
    <pre>{JSON.stringify(data, null, 2)}</pre>
  </div>
);

export default HomePage;

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

برای داده‌های پویا که مرتباً تغییر می‌کنند، از رندر سمت سرور (SSR) برای تولید صفحات در هر درخواست استفاده کنید. این تضمین می کند که کاربر همیشه به روزترین مطالب را ببیند.

// pages/index.js
import { GetServerSideProps } from 'next';

export const getServerSideProps: GetServerSideProps = async () => {
  const data = await fetch('https://api.example.com/data').then(res => res.json());

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

const HomePage = ({ data }) => (
  <div>
    <h1>Welcome to the Home Page</h1>
    <pre>{JSON.stringify(data, null, 2)}</pre>
  </div>
);

export default HomePage;

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

Next.js فراهم می کند next/image جزء، که به طور خودکار تصاویر را برای بهبود عملکرد بهینه می کند. از بارگذاری تنبل، تغییر اندازه و ارائه تصاویر در قالب های مدرن مانند WebP پشتیبانی می کند.

// pages/index.js
import Image from 'next/image';

const HomePage = () => (
  <div>
    <h1>Welcome to the Home Page</h1>
    <Image
      src="/images/sample.jpg"
      alt="Sample Image"
      width={800}
      height={600}
      priority
    />
  </div>
);

export default HomePage;

4. تقسیم کد و واردات پویا

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

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

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

const HomePage = () => (
  <div>
    <h1>Welcome to the Home Page</h1>
    <DynamicComponent />
  </div>
);

export default HomePage;

5. واکشی از قبل پیوندها با next/link

Next.js می تواند صفحات پیوند داده شده را از قبل واکشی کند تا سرعت پیمایش را بهبود بخشد. استفاده کنید prefetch ویژگی در next/link کامپوننت برای واکشی از قبل صفحه زمانی که پیوند در پنجره نمایش است.

// pages/index.js
import Link from 'next/link';

const HomePage = () => (
  <div>
    <h1>Welcome to the Home Page</h1>
    <Link href="/about" prefetch={true}>
      <a>About Us</a>
    </Link>
  </div>
);

export default HomePage;

6. استفاده از React.memo و useMemo برای Component Optimization

استفاده کنید React.memo برای به خاطر سپردن اجزا و useMemo برای به خاطر سپردن مقادیر این از رندرها و محاسبات مجدد غیر ضروری جلوگیری می کند و عملکرد را بهبود می بخشد.

// components/ExpensiveComponent.js
import React from 'react';

const ExpensiveComponent = React.memo(({ data }) => {
  console.log('Rendering ExpensiveComponent');
  return <div>{data}</div>;
});

export default ExpensiveComponent;

// pages/index.js
import { useMemo, useState } from 'react';
import ExpensiveComponent from '../components/ExpensiveComponent';

const HomePage = () => {
  const [count, setCount] = useState(0);
  const data = useMemo(() => ({ value: count }), [count]);

  return (
    <div>
      <h1>Welcome to the Home Page</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <ExpensiveComponent data={data} />
    </div>
  );
};

export default HomePage;

7. تجزیه و تحلیل و کاهش اندازه بسته نرم افزاری

استفاده کنید next-bundle-analyzer بسته ای برای تجزیه و تحلیل اندازه بسته نرم افزاری شما و شناسایی فرصت هایی برای کاهش آن.

npm install @next/bundle-analyzer

// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer({
  // Your Next.js configuration
});

بیلد را با فعال بودن تحلیلگر اجرا کنید:

ANALYZE=true npm run build

8. استفاده از Preact برای بسته های کوچکتر

React را با Preact در ساخت‌های تولیدی جایگزین کنید تا اندازه باندل را کاهش دهید. Preact یک جایگزین سبک وزن برای React با همان API مدرن است.

// next.config.js
const withPreact = require('next-plugin-preact');

module.exports = withPreact({
  // Your Next.js configuration
});

9. حافظه پنهان و CDN

از حافظه پنهان و شبکه‌های تحویل محتوا (CDN) برای ارائه سریع دارایی‌های ثابت و صفحات از پیش رندر شده استفاده کنید. Vercel، شرکت پشتیبان Next.js، پشتیبانی داخلی برای استقرار برنامه های Next.js با حافظه پنهان و CDN بهینه ارائه می کند.

10. نظارت و پروفایل

از ابزارهایی مانند Google Lighthouse و Next.js پروفایل داخلی برای نظارت و نمایه عملکرد برنامه خود استفاده کنید. شناسایی و رفع تنگناها برای اطمینان از عملکرد بهینه.

11. بهینه سازی توابع بدون سرور

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

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello World' });
}

12. پرس و جوهای پایگاه داده را بهینه کنید

پرس و جوهای پایگاه داده خود را برای کاهش زمان واکشی داده ها بهینه کنید. از ایندکس ها استفاده کنید، پرس و جوهای SQL خود را بهینه کنید و از یک ORM مانند Prisma برای واکشی کارآمد داده ها استفاده کنید.

// pages/api/data.js
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export default async function handler(req, res) {
  const data = await prisma.user.findMany();
  res.status(200).json(data);
}

نتیجه

بهینه سازی عملکرد برنامه های Next.js 13+ برای ارائه یک تجربه کاربری روان بسیار مهم است. با اجرای این تکنیک ها می توانید از رندر سریعتر و برنامه های کاربردی کارآمدتر اطمینان حاصل کنید.

برای بهبود عملکرد برنامه Next.js 13+ خود آماده هستید؟ با من در ارتباط باشید تا در مورد تکنیک های بهینه سازی برای رندر سریعتر بحث کنیم. 🚀

منابع

برای کشف تکنیک های بهینه سازی Next.js 13+ با من ارتباط برقرار کنید! بیایید با هم برنامه های سریع تر و کارآمدتر بسازیم! ⚛️