Giới thiệu

Khi phát triển ứng dụng với Next.js, một trong những yếu tố quan trọng nhất là tối ưu hóa hiệu suất. Tối ưu hóa giúp cải thiện tốc độ tải trang, giảm độ trễ và mang lại trải nghiệm người dùng mượt mà hơn. Trong bài viết này, chúng ta sẽ khám phá những cách tối ưu hiệu suất cho ứng dụng Next.js từ việc tối ưu hóa hình ảnh, code splitting, cho đến sử dụng các tính năng tối ưu có sẵn trong Next.js.

1. Sử dụng Static Site Generation (SSG)

Một trong những tính năng mạnh mẽ nhất của Next.js là Static Site Generation (SSG). Với SSG, bạn có thể pre-render các trang ngay khi xây dựng ứng dụng, giúp trang web tải nhanh hơn vì nội dung đã có sẵn khi người dùng truy cập.

Cách sử dụng:

Trong Next.js, bạn có thể sử dụng getStaticProps để fetch dữ liệu và pre-render trang. Điều này giúp trang web không cần phải gọi API mỗi khi người dùng truy cập.

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

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

  return {
    props: {
      data
    }
  };
};

const Home = ({ data }) => {
  return (
    <div>
      <h1>Welcome to the Optimized Next.js App!</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default Home;

2. Sử dụng Image Optimization

Một trong những yếu tố quan trọng trong việc tối ưu hóa hiệu suất là giảm kích thước hình ảnh. Next.js cung cấp một component next/image giúp tối ưu hóa hình ảnh tự động, bao gồm lazy loading, tự động điều chỉnh kích thước hình ảnh và tối ưu hóa định dạng.

Cách sử dụng:

import Image from 'next/image';

const MyComponent = () => (
  <div>
    <h1>Optimized Images</h1>
    <Image
      src="/images/example.jpg"
      alt="Example Image"
      width={500}
      height={300}
      quality={75}
    />
  </div>
);

Với next/image, hình ảnh sẽ được tải nhanh hơn và tự động điều chỉnh cho phù hợp với kích thước màn hình của người dùng.

3. Code Splitting và Dynamic Import

Next.js hỗ trợ code splitting tự động, giúp giảm kích thước bundle JavaScript. Tuy nhiên, bạn cũng có thể sử dụng dynamic imports để tải các phần tử hoặc module chỉ khi cần thiết, điều này giúp giảm thời gian tải trang ban đầu.

Cách sử dụng:

import dynamic from 'next/dynamic';

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

const Page = () => (
  <div>
    <h1>Dynamic Component Example</h1>
    <DynamicComponent />
  </div>
);

4. Tối ưu hóa CSS và JavaScript

Next.js hỗ trợ CSS-in-JS và có các tính năng như automatic static optimization giúp tự động loại bỏ CSS không sử dụng. Tuy nhiên, để tối ưu hơn, bạn có thể sử dụng công cụ như PurgeCSS hoặc Tailwind CSS để loại bỏ CSS không sử dụng trong sản phẩm cuối cùng.

Sử dụng Tailwind CSS để tối ưu hóa: Nếu bạn sử dụng Tailwind CSS, công cụ PurgeCSS sẽ tự động loại bỏ các lớp CSS không sử dụng khi build, giúp giảm kích thước CSS.

// tailwind.config.js
module.exports = {
  purge: ['./pages/**/*.tsx', './components/**/*.tsx'],
  darkMode: false,
  theme: {
    extend: {}
  },
  variants: {
    extend: {}
  },
  plugins: []
};

5. Caching và CDN

Để tăng tốc độ tải trang, bạn có thể sử dụng caching và CDN để phân phối nội dung tĩnh như hình ảnh, CSS, và JavaScript. Next.js hỗ trợ tốt việc triển khai trên các dịch vụ như Vercel, Netlify, giúp phân phối ứng dụng qua mạng lưới các máy chủ gần người dùng nhất.

Cách sử dụng:

Bạn có thể cấu hình caching trong Next.js thông qua next.config.js để xác định các chiến lược caching phù hợp cho các tài nguyên của ứng dụng.

module.exports = {
  async headers() {
    return [
      {
        source: '/(.*).(js|css|png|jpg|jpeg|svg|gif|webp|ico)',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
        ],
      },
    ];
  },
};

6. Cải thiện SEO với Server-Side Rendering (SSR)

Nếu ứng dụng của bạn cần phải có SEO tốt hơn, bạn có thể sử dụng Server-Side Rendering (SSR) với Next.js để render nội dung trên server trước khi gửi về client. Điều này giúp công cụ tìm kiếm dễ dàng index nội dung trang.

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

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

  return {
    props: {
      data
    }
  };
};

Kết luận

Tối ưu hóa hiệu suất trong Next.js không chỉ giúp cải thiện trải nghiệm người dùng mà còn góp phần vào việc tăng trưởng SEO và khả năng mở rộng ứng dụng. Bằng cách tận dụng các tính năng như SSG, tối ưu hóa hình ảnh, dynamic imports và caching, bạn có thể xây dựng các ứng dụng Next.js nhanh chóng và hiệu quả.