01Giới thiệu
02Lý thuyết
03Thực nghiệm
04Kết quả

Chương 1

GIỚI THIỆU
ĐỀ TÀI

Tên đề tài báo cáo

Triển khai kiến trúc Hybrid Rendering tối ưu hiệu năng và SEO trong ứng dụng MENN Stack

MongoDB — Express — Next.js — Node.js · IE213 · UIT · 2026

1.1 — Lý do chọn đề tài

Trong kỷ nguyên số hiện nay, trải nghiệm người dùng (UX) và khả năng tìm kiếm (SEO) là hai yếu tố sống còn của một ứng dụng Web. Kiến trúc truyền thống SPA với CSR tuy mượt mà nhưng gặp phải hai thách thức nghiêm trọng:

🐌

First Load chậm

LCP cao

Người dùng phải chờ trình duyệt tải và thực thi toàn bộ JavaScript bundle mới thấy được nội dung. Với SPA thuần CSR, Largest Contentful Paint (LCP) thường vượt quá ngưỡng 4s — Google xếp vào "Poor".

CSR Waterfall

01Browser nhận HTML rỗng
02Tải JS bundle (~500KB+)
03React parse & execute
04fetch() gọi API
05DOM render nội dung
06← Chỉ đến đây user thấy được gì
🤖

SEO bị hạn chế

Googlebot không đọc được

Các bot tìm kiếm (Google, Bing) crawl trang tại thời điểm HTML được trả về từ server. Với CSR, HTML lúc đó rỗng — bot không thấy title, description, hay nội dung bài viết. Kết quả: trang không được lập chỉ mục đúng cách.

CSR Waterfall

01Googlebot gửi request
02Server trả HTML rỗng: <div id="__next"></div>
03Bot không chạy JS
04Bot thấy trang trống
05→ Không lập chỉ mục nội dung
06→ Không xếp hạng từ khóa

Giải pháp

Kiến trúc Hybrid Rendering — kết hợp SSR, SSG, ISR và CSR trong cùng một ứng dụng Next.js — cho phép nhà phát triển lựa chọn phương thức render tối ưu nhất cho từng trang cụ thể. Trang blog dùng ISR (nhanh như tĩnh, data tự cập nhật). Trang search dùng SSR (data realtime). Admin dashboard dùng CSR (không cần SEO). Landing page dùng SSG (build một lần, phục vụ mãi mãi).

1.2 — Mục tiêu của đề tài
01

Nghiên cứu lý thuyết

Phân tích cơ chế hoạt động của các chiến lược Rendering hiện đại: SSR, SSG, ISR và CSR — so sánh trực tiếp trên cùng một ứng dụng thực tế.

Xem chi tiết →
02

Xây dựng ứng dụng

Hiện thực hóa Full-stack bằng MENN Stack: MongoDB (database) — Express (backend API) — Next.js (frontend hybrid rendering) — Node.js (runtime).

Xem chi tiết →
03

Triển khai thực tế

Thiết lập hệ thống trên VPS DigitalOcean, dùng Coolify orchestrate các Docker containers (Database, Backend, Frontend) — zero third-party PaaS phí.

Xem chi tiết →
04

Đo lường & đánh giá

Sử dụng Lighthouse, PageSpeed Insights và RenderBenchmark component tự build để phân tích hiệu năng thực tế: LCP, TBT, TTFB, FCP, CLS.

Xem chi tiết →
1.3 — Đối tượng và phạm vi nghiên cứu

Đối tượng nghiên cứu

  • Cơ chế Hybrid Rendering của Next.js và khả năng giao tiếp với Backend Node.js/Express
  • Quy trình triển khai ứng dụng lên Cloud thông qua VPS và công cụ quản trị Coolify
  • Các kỹ thuật tối ưu hóa SEO và chỉ số Core Web Vitals

Phạm vi nghiên cứu

  • Triển khai ứng dụng trên hạ tầng VPS của DigitalOcean (Singapore region)
  • Tập trung tối ưu hóa hiển thị và tốc độ phản hồi từ phía Server
  • Đo lường hiệu năng trong môi trường Cloud thực tế, không phải localhost
1.4 — Ý nghĩa khoa học và thực tiễn
🔬

Khoa học

Toàn cảnh Hybrid Rendering

Cung cấp cái nhìn toàn diện về dòng chảy dữ liệu trong kiến trúc Hybrid Rendering và cách thức các công nghệ hiện đại tương tác để giải quyết bài toán hiệu năng. Minh chứng bằng code thực tế, số liệu đo lường thật.

🏗️

Thực tiễn

Quy trình deployment chuyên nghiệp

Xây dựng quy trình triển khai ứng dụng Web từ khâu phát triển đến vận hành Cloud với chi phí tối ưu. Git push → auto build → zero-downtime deploy — toàn bộ trên một VPS $18/tháng.

⚡

Kỹ thuật

Next.js + VPS = Best of both

Minh chứng sức mạnh của việc kết hợp framework hiện đại (Next.js) và hạ tầng VPS trong việc cải thiện trải nghiệm người dùng và thứ hạng SEO — mà không phụ thuộc vào Vercel hay các managed PaaS đắt tiền.

Tiếp theo

Chương 2: Lý thuyết

Phân tích chi tiết SSG, SSR, ISR, CSR — cơ chế hoạt động và so sánh trực tiếp

Lý thuyết →