Nội dung chính của bài viết
Ngày nay, phần lớn lưu lượng truy cập các trang web đến từ các thiết bị di động. Vì vậy, với ưu điểm nhỏ, nhẹ, có thể tải nhanh trên các thiết bị có kết nối internet kém cộng thêm sự ra đời của các Static Site Generator, các trang web tĩnh đang dần dần được sử dụng nhiều hơn. Vậy trang web tĩnh là gì? Chúng ta kiểm tra trang web là tĩnh hay động ra sao? Hãy cùng tìm hiểu qua bài viết sau đây.
Trang web tĩnh là gì? So sánh giữa static web với dynamic web
Định nghĩa trang web tĩnh là gì
Trang web tĩnh hay trang cố định là trang web được gửi đến trình duyệt web của người dùng chính xác như nó được lưu trữ, trái ngược với trang web động được tạo bởi ứng dụng web.
(Theo wikipedia)
Điều này có nghĩa là, khi người dùng truy cập trang web tĩnh (thường có đuôi là .html hoặc .htm), trình duyệt sẽ tải và biên dịch file html được lưu trữ trên máy chủ ra nội dung của trang web. Nội dung trang web tĩnh thể hiện là như nhau với bất cứ ai.
Nhiều người lầm tưởng trang web tĩnh không có thành phần đồ hoạ và không thể tương tác. Thực tế, trang web tĩnh vẫn có ảnh động, video,… bạn vẫn có thể tương tác với nó, nhưng kết quả của hành động tương tác của bạn so với những người khác là như nhau.
Ví dụ: Khi bạn click vào một nút và nó đổi màu đỏ, thì người khác cũng sẽ nhận kết quả tương tự khi nhấn nút đấy.
Ngược lại, khi truy cập vào trang web động, thông tin và nội dung trang web sẽ thay đổi dựa trên dữ liệu của được truyền tới máy chủ thông qua trình duyệt. Dữ liệu có thể là thông tin người dùng, ngôn ngữ, hay thời gian trong ngày,… Các trang web động được tạo ra tự động thông qua ngôn ngữ lập trình server khi có yêu cầu truy cập.
Ví dụ: Khi bạn truy cập vào Facebook, bạn sẽ thấy các bài viết của bạn bè trên Newfeed, đấy là do Facebook dựa vào những thông tin đăng nhập bạn cung cấp để biết bạn là ai và hiển thị nội dung thích hợp cho riêng bạn.
Lưu ý
Điểm mấu chốt tạo nên khác biệt giữa trang web tĩnh và trang web động là dynamic web có cơ sở dữ liệu và sử dụng ngôn ngữ lập trình server (PHP, ASP.NET, RUBY…) còn static web thì không. Chúng ta sẽ đi sâu vào sự khác nhau giữa trang web tĩnh và động trong phần sau.
Cơ chế hoạt động của trang web tĩnh
Trang web tĩnh bao gồm tối đa 3 thành phần:
- File ngôn ngữ đánh dấu siêu văn bản (.html): Xây dựng cấu trúc siêu văn bản trên website, nếu xem trang web tĩnh là một cơ thể, thì Html chính là bộ xương cho cơ thể đó. Siêu văn bản là loại văn bản tích hợp nhiều loại dữ liệu khác nhau như: văn bản, âm thanh, hình ảnh video,…
- File Css có chức năng tìm và định dạng các phần tử Html (.css): Tạo nên màu sắc, kích cỡ chữ, ảnh nền,… cho siêu văn bản thô từ Html.
- File ngôn ngữ kịch bản javascript giúp tăng tính năng tương tác trên website (.js): Ví dụ khi người dùng đăng nhập mà quên nhập mật khẩu, trang web tĩnh sẽ yêu cầu nhập lại.
Hiện nay các ngôn ngữ Html và Css đã được nâng cấp lên Html5 và Css3, vì vậy một trang web tĩnh cơ bản hiện đại sẽ bao gồm: Html5, Css3 và Javascript.
Trang web tĩnh sau khi được các lập trình viên hay trình tạo trang tĩnh (Site Generators) tạo ra sẽ được lưu trữ ở máy chủ web (các máy server chuyên dụng) dưới dạng Html, người dùng có thể truy cập chúng bằng trình duyệt (Chrome, Firefox, Opera,…).
Lúc này, trình duyệt sẽ tải file Html và các file liên quan về và biên dịch ra nội dung hiển thị cho khách truy cập. Tuy nhiên, các file này chỉ được tải về một lần duy nhất, người dùng không thể tương tác ngược lại với máy chủ chứa trang web tĩnh.
Ví dụ: Người dùng không thể tạo và gửi thông tin tài khoản cũng như các bình luận về máy chủ web. Static site không có cơ sở dữ liệu để nhận và lưu trữ lại những thông tin của người dùng.
Cập nhật kiến thức
Trang web tĩnh đã phát triển trong những năm gần đây, bạn đã có thể tạo tài khoản và để lại bình luận, tuy nhiên thông tin sẽ được lưu trữ bởi ứng dụng bên thứ ba hoặc các cơ sở dữ liệu bên ngoài. Về bản chất, người dùng vẫn không thể tương tác với máy chủ chứa trang web tĩnh qua hình thức trao đổi dữ liệu.
Trang web tĩnh – Ưu và nhược điểm
Ưu điểm của trang web tĩnh
- Tốc độ truy cập nhanh : Dung lượng trang web tĩnh thường khá nhẹ, file Html luôn sẵn sàng tải xuống từ server nên tốc độ truy cập trang web được tối ưu.
- Chi phí đầu tư ít: Một website tĩnh có không quá nhiều trang con thì dễ phát triển hơn so với trang web động do không có database và ngôn ngữ lập trình server.
- Ít tốn tài nguyên máy chủ: Dung lượng trang web tĩnh nhỏ nên tiết kiệm bộ nhớ lưu trữ, băng thông cũng như các chi phí vận hành, sao lưu và bảo trì.
- Thiết kế đẹp độc đáo: Mỗi static site chứa một nội dung riêng ít thay đổi, nên ta có thể thiết kế từng trang theo phong cách mới lạ, ấn tượng.
- Trang web tĩnh thân thiện với bộ máy tìm kiếm: Bạn có thể đặt tên file Html tùy ý nhằm thân thiện nhất với các công cụ tìm kiếm.
- Static website ít lỗi hơn dynamic website: Lý do chính là do các lỗi về web thường liên quan đến cơ sở dữ liệu.
- Bảo mật cao: Trang web tĩnh không cần kết nối đến cơ sở dữ liệu nên trang web tĩnh an toàn trước những cuộc tấn công nhắm vào database như: tấn công chèn mã SQL (SQL Injection), tấn công tràn bộ đệm,…
Nhược điểm của trang web tĩnh
- Quản lý thay đổi nội dung hết sức khó khăn: Do không có giao diện người dùng để tạo mới hay thay đổi nội dung của một trang web tĩnh, tất cả đều phải thực hiện trên các file Html, Css, Javascript nên rất tốn thời gian và công sức.
- Khó nâng cấp bảo trì: Với các trang web có hàng trăm trang hay sản phẩm, việc thực hiện thay đổi lên tất cả các trang gây ra rất nhiều khó khăn. Với các trang web động, việc thay đổi thường diễn ra trên các template chung.
Ví dụ: Bạn có một trang web tĩnh bán quần áo gồm 100 sản phẩm, mỗi một sản phẩm được mô tả trong một trang riêng biệt. Khi bạn muốn thay đổi màu sắc nút nhấn mua hàng, bạn phải vào 100 trang để thay đổi code Html.
- Người dùng không có khả năng tương tác với cơ sở dữ liệu máy chủ website: Bạn không thể tìm kiếm tin tức muốn đọc hay mặt hàng cần mua, thêm vào giỏ hàng và thanh toán trên static website. Điều này là điểm yếu chí mạng trong thời đại bùng nổ thương mại điện tử hiện nay.
So sánh trang web tĩnh và trang web động
Giống nhau: Đều được xây dựng bởi HTML5, CSS3 và JAVASCRIPT, đều có thể tương tác với người dùng (nhưng không phải tương tác với cơ sở dữ liệu của máy chủ)
Khác nhau: (xem bảng phân tích chi tiết ngay dưới đây)
| Website tĩnh | Website động |
| Nội dung giống nhau với bất kỳ khách truy cập nào, được lưu trữ sẵn sàng để tải xuống | Nội dung có thể thay đổi dựa trên dữ liệu đầu vào, khi có yêu cầu truy cập trang web động mới được tạo ra |
| Chỉ tối đa 3 thành phần: Html5, Css3, Javascript | Có thêm ngôn ngữ lập trình Server như ASP.NET, PHP,… và cơ sở dữ liệu SQL Server, MySQL,… |
| Không cho phép người dùng tương tác với cơ sở dữ liệu trên website | Cho phép người dùng có thể tương tác theo thời gian thực (real-time) với cơ sở dữ liệu của website |
| Các thông tin cần thay đổi trên website cần can thiệp trực tiếp để sửa trên file HTML | Quản lý, sửa đổi nội dung dễ dàng với các hệ quản trị nội dung, gọi tắt là CMS (Content Management System) như WordPress, Joomla |
| Khó khăn trong việc bảo trì, nâng cấp | Dễ dàng bảo trì và nâng cấp website thông qua các template |
| Chi phí thiết kế website thấp | Chi phí xây dựng cao |
| Giao diện đẹp, đa dạng, độc đáo | Giao diện thường đồng nhất, không đa dạng |
| Ứng dụng làm các trang nội dung ít thay đổi như trang demo sản phẩm dịch vụ, liên hệ, giới thiệu, trang thông báo bảo trì hay nâng cấp,… | Ứng dụng nhiều lĩnh vực: Thiết kế website bán hàng, thiết kế website bất động sản, thiết kế website doanh nghiệp |
Cách kiểm tra trang web là tĩnh hay động
Các bạn có thể dùng các site kiểm tra như builtwith.com hoặc wappalyzer.com. Các trang này cũng có Chrome Extension tương ứng để có thể cài đặt và kiểm tra nhanh hơn.
Với Wappalyzer, các bạn chú ý phần “Static Site Generator”, ở Builtwith thì phần “ Frameworks” cần lưu ý.
Nếu bạn thấy trình tạo trang web tĩnh phổ biến như Gatsby, Hugo, Jekyll, Gridsome, Scully, Sculpin, and Sapper,… thì trang đang kiểm tra là trang web tĩnh được tạo ra từ các Static Site Generator.
Để xác định trang web động, bạn cần kiểm tra có ngôn ngữ lập trình server (PHP, ASP.NET, RUBY) hoặc có CMS (Content Management Service) như WordPress, Joomla,… hay không.
Kết quả kiểm tra trang https://michaeldwan.com/ là trang web tĩnh tại
Kết quả kiểm tra trang vnexpress.net là trang web động tại đường link https://builtwith.com/vnexpress.net
Tuy nhiên, sẽ có vài trang web không thể kiểm tra được do chúng không cho phép các phần mềm bên ngoài theo dõi công nghệ được sử dụng. Lúc này bạn cần kiểm tra theo cách thủ công.
Bạn có thể để ý nếu trang chủ của website thay đổi khi bạn thay đổi tùy chọn ngôn ngữ, quốc gia, sở thích,… hay nếu bình luận của bạn hiển thị ngay lập tức trên trang web thì khả năng cao đây là trang web động. Đặc điểm thường thấy của loại web này là có khả năng tự động cập nhật theo thời gian thực (update in real-time).
Ví dụ: Nếu có bình luận gần nhất trên bài đăng Facebook của bạn thì bạn có thể thấy ngay không cần tải lại trang.
Trên đây là những thông tin về trang web tĩnh và cách kiểm tra một trang web là static hay dynamic website. Rất mong bài viết đã giúp bạn hiểu rõ trang web tĩnh là gì và có sự khác biệt ra sao với trang web động. Truy cập ngay vào website của chúng tôi để biết thêm nhiều thông tin thú vị và bổ ích khác về lập trình web.