Mục lục
- 1. Tại sao nên tạo pre-rendered page?
- 2. Cách tiếp cận “giả JAMstack” cho WordPress
- 3. Mẫu code dựng trang tĩnh
- 4. Rewrite để ưu tiên hiển thị HTML tĩnh
- 5. Khi nào nên cập nhật HTML?
- 6. Ưu và nhược điểm
- Mở rộng nâng cao
- Kết luận
- 7. Kết hợp với CDN để tăng tốc tối đa
- Sử dụng Cloudflare (miễn phí)
- Lưu ý:
- Các CDN khác:
Bài viết này hướng dẫn bạn tạo các trang tĩnh từ nội dung WordPress – hiệu quả gần như JAMstack mà không cần bỏ WordPress.
1. Tại sao nên tạo pre-rendered page?
- Giảm số request PHP cần xử lý
- Không cần bật full page caching phức tạp
- Phù hợp với site ít cập nhật (landing page, product info, site affiliate…)
- Giúp dễ dàng dùng CDN cho nội dung HTML
2. Cách tiếp cận “giả JAMstack” cho WordPress
- Duyệt qua các trang hoặc bài viết cần dựng sẵn
- Render HTML bằng code hoặc WP CLI
- Lưu nội dung HTML thành file tĩnh trong thư mục cache
- Dùng rewrite rule để hiển thị file HTML thay vì gọi WordPress
3. Mẫu code dựng trang tĩnh
// functions/dump-static.php
function dump_static_page( $post_id ) {
$post = get_post($post_id);
if (!$post || $post->post_status !== 'publish') return;
$html = apply_filters('the_content', $post->post_content);
$template = '<!DOCTYPE html><html><head><meta charset="utf-8"></head><body>' . $html . '</body></html>';
$path = ABSPATH . 'static-cache/' . $post->post_name . '.html';
file_put_contents($path, $template);
}
// Hook để dump sau khi cập nhật bài viết
add_action('save_post', 'dump_static_page');
4. Rewrite để ưu tiên hiển thị HTML tĩnh
Dùng .htaccess (với Apache):
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{DOCUMENT_ROOT}/static-cache/$1.html -f
RewriteRule ^(.*)$ /static-cache/$1.html [L]Với NGINX:
location / {
try_files /static-cache/$uri.html $uri $uri/ /index.php?$args;
}
5. Khi nào nên cập nhật HTML?
- Ngay khi bài viết được cập nhật (qua hook
save_post) - Qua WP-CLI để rebuild toàn bộ:
wp static-generate all - Định kỳ bằng cron nếu cần
6. Ưu và nhược điểm
| Ưu điểm | Nhược điểm |
|---|---|
| Tải cực nhanh (HTML tĩnh) | Không phù hợp site dynamic theo user |
| Ít dùng tài nguyên server | Phải build lại thủ công khi nội dung thay đổi |
| Dễ kết hợp CDN | Không phù hợp cho comment, login… |
Mở rộng nâng cao
- Chỉ pre-render các trang “tiếp thị” (landing page, trang review…)
- Kết hợp plugin cache để fallback nếu không có HTML tĩnh
- Gắn build process với Git hoặc trigger từ webhook
- Dùng plugin WP2Static nếu bạn muốn xuất toàn bộ site thành JAMstack thật sự
Kết luận
Dù WordPress không sinh ra để là một site tĩnh, nhưng với cách dựng pre-rendered HTML page, bạn có thể đạt được 90% lợi ích từ JAMstack mà không rời bỏ hệ sinh thái quen thuộc. Cách này rất đáng thử nếu bạn làm site affiliate, tài liệu, hoặc trang giới thiệu không thay đổi nhiều.
Gợi ý tiếp theo: Bạn có thể kết hợp giải pháp này với Cloudflare Cache Everything để đẩy tốc độ lên cực đại – miễn phí và hiệu quả.
7. Kết hợp với CDN để tăng tốc tối đa
Sau khi đã tạo các file HTML tĩnh, bạn có thể cache toàn bộ trang ở mức CDN để gần như không còn request nào phải về lại server gốc.
Sử dụng Cloudflare (miễn phí)
- Vào Cache Rules
- Thiết lập rule:
example.com/static-cache/*- Cache Level: Cache Everything
- Edge Cache TTL: tùy chọn (1 ngày, 1 tuần…)
- (Tùy chọn) Bật “Origin Cache Control” nếu bạn muốn kiểm soát thời gian cache từ server
Lưu ý:
- Cloudflare sẽ cache cả nội dung HTML – nếu bạn cập nhật bài viết, cần xóa cache ở cả Cloudflare (có thể dùng API để xóa theo URL)
- Không áp dụng với những trang có dữ liệu động như giỏ hàng, form đăng nhập, comment
- Đảm bảo các file HTML có header
Cache-Controlphù hợp (hoặc để Cloudflare override)
Các CDN khác:
- Bunny CDN: Dễ tích hợp, giá rẻ, có cache HTML tốt
- Fastly, CloudFront: Cấu hình phức tạp hơn nhưng phù hợp site lớn
Bình luận