Đã đăng vào Friday, 3:33 p.m. 5 phút đọc

Tối Ưu Next.js Cho Hiệu Suất & SEO: Bí Kíp Dành Cho Developer Chuẩn Bị Phỏng Vấn

Nếu bạn đang chuẩn bị cho buổi phỏng vấn Frontend/Fullstack hoặc đơn giản chỉ muốn website Next.js của mình chạy nhanh hơn và thân thiện với Google hơn, thì bài viết này là dành cho bạn.

Chúng ta sẽ đi qua 2 mảng quan trọng:

Tối ưu hiệu suất (Performance Optimization)
Tối ưu SEO (Search Engine Optimization)

1. Tối Ưu Hiệu Suất Trong Next.js

Trong Next.js, tốc độ tải trang và cách render dữ liệu phụ thuộc vào chiến lược render bạn chọn: SSG, ISR hay SSR. Dưới đây là bảng so sánh dễ hiểu 👇

Phương pháp	Tốc độ tải trang	Cập nhật nội dung	SEO	Phù hợp với
SSG	Rất nhanh	Cần build lại	Tốt	Blog, tài liệu, landing page
ISR	Rất nhanh	Cập nhật theo chu kỳ	Tốt	Trang tin tức, danh sách sản phẩm
SSR	Chậm hơn	Luôn cập nhật	Tốt	Trang cá nhân hóa, dữ liệu thay đổi liên tục

A. Các kỹ thuật tối ưu đặc trưng của Next.js

1. SSG & ISR (Static Site Generation / Incremental Static Regeneration)

Sử dụng getStaticProps và getStaticPaths cho dữ liệu ít thay đổi.
ISR cho phép tự động rebuild định kỳ, giúp nội dung luôn mới mà không cần deploy lại toàn site.

export async function getStaticProps() {
  const data = await fetchData()
  return { props: { data }, revalidate: 60 } // regenerate mỗi 60s
}

💡 Lợi ích: giảm tải cho server và tăng tốc TTFB (Time To First Byte).

2. SSR có chọn lọc (Server-Side Rendering)

Chỉ nên dùng getServerSideProps khi bắt buộc phải có dữ liệu real-time. Nếu không, hãy ưu tiên SSG hoặc ISR để tối ưu tốc độ.

3. Dynamic Imports (Code Splitting)

Tách những component nặng (như chart, map) và chỉ load khi cần thiết.

const Chart = dynamic(() => import('../components/Chart'), { ssr: false })

💡 Giúp giảm kích thước bundle ban đầu, tăng tốc độ hiển thị trang.

4. Image Optimization với next/image

Next.js tự động nén, lazy-load và đổi định dạng ảnh sang WebP/AVIF.

<Image src="/hero.jpg" alt="Hero" width={800} height={600} priority />

💡 Ảnh nhẹ hơn → tải nhanh hơn → điểm Core Web Vitals cao hơn!

5. Font Optimization với next/font

Tự host font thay vì gọi từ Google Fonts để tránh chặn render.

import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })

6. Caching & CDN

Sử dụng Vercel Edge Network hoặc CDN của riêng bạn.

Đặt cache-control hợp lý cho static assets.

7. Phân tích bundle (Bundle Analyzer)

Giúp bạn phát hiện gói thư viện nặng và loại bỏ code thừa:

npm install @next/bundle-analyzer

B. Các mẹo tối ưu hiệu suất tổng quát

Giảm tải JavaScript bằng tree-shaking, xóa code không dùng.
Dùng React.memo, useCallback, useMemo để tránh re-render không cần thiết.
Prefetch link (Next.js <Link /> làm sẵn rồi đó!).
Cache dữ liệu hoặc dùng SWR/React Query để giảm API call.
Lazy-load nội dung ở dưới màn hình (below-the-fold).

2. Tối Ưu SEO Trong Next.js

Phần này giúp website của bạn thân thiện với Google, tăng khả năng được xếp hạng cao hơn trên công cụ tìm kiếm.

A. Kỹ thuật SEO trong Next.js

1. Sử dụng metadata API hoặc next/head

Thêm thẻ meta, og:image, canonical cho mỗi trang.

import Head from 'next/head'

export default function Page() {
  return (
    <Head>
      <title>Trang chủ - Leif Dev Blog</title>
      <meta name="description" content="Chia sẻ kiến thức Next.js và web dev dễ hiểu" />
      <link rel="canonical" href="https://example.com" />
    </Head>
  )
}

2. URL sạch & Routing hợp lý

Dùng dynamic route /blog/[slug] thay vì /blog?id=123.
Google ưu tiên URL có nghĩa hơn.

3. Structured Data (Schema.org)

Giúp Google hiểu nội dung của bạn tốt hơn – hỗ trợ rich snippet.

<script type="application/ld+json">
  {JSON.stringify({
    "@context": "https://schema.org",
    "@type": "Article",
    headline: "Cách tối ưu SEO trong Next.js",
    datePublished: "2025-10-17",
  })}
</script>

4. Tối ưu Core Web Vitals

Các chỉ số quan trọng Google đánh giá:

LCP (Largest Contentful Paint) – tốc độ tải nội dung chính
CLS (Cumulative Layout Shift) – độ ổn định bố cục
FID (First Input Delay) – tốc độ phản hồi đầu tiên 👉 Dùng next/image, next/font, caching và prefetch để cải thiện.

5. SSR cho các trang cần SEO mạnh

Trang tin tức, sản phẩm… nên dùng SSR để Google luôn đọc nội dung mới nhất.

6. Sitemap & robots.txt

Tạo bằng package next-sitemap để Google crawl toàn bộ site hiệu quả hơn.

B. Nội dung & Accessibility

Dùng HTML ngữ nghĩa: <header>, <main>, <article>, <footer>.
Đặt tiêu đề theo thứ tự logic: h1 → h2 → h3.
Thêm alt text cho ảnh.
Dùng anchor text mô tả rõ ràng (“Xem chi tiết bài viết” thay vì “click here”).
Thiết kế responsive cho mọi kích thước màn hình.

3. Cách Trả Lời Khi Bị Hỏi Trong Phỏng Vấn

Một cách trả lời gọn gàng, có cấu trúc mà nhà tuyển dụng cực thích:

“Về hiệu suất, em chọn chiến lược render phù hợp — SSG kết hợp ISR cho trang tĩnh, và SSR chỉ khi cần dữ liệu real-time. Em cũng dùng dynamic import để giảm bundle, next/image để tối ưu ảnh, và CDN để cache nội dung. Còn về SEO, em đảm bảo mỗi trang có metadata, URL sạch, structured data, cùng sitemap và robots.txt. Em cũng chú trọng vào accessibility, semantic HTML và tối ưu Core Web Vitals để website thân thiện hơn với Google.”

Kết Luận

Tối ưu hiệu suất và SEO trong Next.js không hề khó — quan trọng là chọn đúng chiến lược render, giảm tải cho trình duyệt, và hiểu rõ cách Google đọc nội dung. Một website nhanh, sạch và thân thiện không chỉ giúp bạn được tuyển nhanh hơn, mà còn giúp người dùng yêu thích sản phẩm của bạn hơn.

Bí kíp Frontend nextjs