Lưu ý: Bài viết này chủ yếu hướng đến các tester và lập trình viên.
Nếu bạn từng thắc mắc về việc tại sao một số trang web khi kiểm tra qua tab Network lại không thấy các yêu cầu API, hãy cùng khám phá nhé!
1. Những Khái Niệm Cơ Bản
Trước khi đi sâu vào vấn đề, chúng ta sẽ ôn lại đôi chút về chức năng của bộ lọc “Fetch/XHR” trên tab Network trong Developer Tools và cách thức hoạt động của một trang web.
Chức Năng Bộ Lọc “Fetch/XHR”
Bộ lọc “Fetch/XHR” cho phép chúng ta thấy được những yêu cầu mạng được thực hiện qua Fetch API hoặc XMLHttpRequest (XHR). Đây là hai phương pháp phổ biến để gửi yêu cầu HTTP không đồng bộ từ trang web đến máy chủ, giúp bạn dễ dàng theo dõi và phát hiện ra các yêu cầu API mà trang web đang gọi.
Cách Thức Hoạt Động Của Trang Web
Khi nói về hoạt động của một trang web, chúng ta thường nghĩ đến hai thành phần chính:
- Client: Là các thiết bị kết nối Internet dùng để duyệt web (ví dụ: máy tính, điện thoại cùng với các trình duyệt như Chrome, Firefox, ...).
- Server: Là các máy chủ lưu trữ dữ liệu và logic của trang web. Khi client truy cập vào trang web, một bản sao của trang sẽ được tải từ server xuống client để hiển thị trên trình duyệt của người dùng.
2. Phân Biệt Giữa Client-Side Rendering (CSR) và Server-Side Rendering (SSR)
Để làm rõ vấn đề, chúng tôi sẽ phân tích hai trường hợp trang web dưới đây:
- Trường hợp có API: Shopee Food
- Trường hợp không có API: The Present Writer
Bạn có biết rằng sự khác biệt không nằm ở việc một trang có API và trang kia không có API hay không? Thực tế, cả hai loại đều có thể sử dụng API, nhưng thời điểm gọi khác nhau dẫn đến việc kiểm tra không thấy API.
Cách Xây Dựng Một Trang Web
Để một trang web hiển thị đúng như chúng ta thấy trên trình duyệt, nó phải trải qua một quá trình được gọi là render. Quá trình này chuyển đổi mã HTML, CSS và JavaScript thành giao diện người dùng. Quá trình render có thể xảy ra ở:
- Phía Server (Server-Side Rendering - SSR)
- Phía Client (Client-Side Rendering - CSR)
Dưới đây là phân tích về hai phương thức này:
Server-Side Rendering (SSR)
- Nhận yêu cầu: Server nhận yêu cầu từ trình duyệt khi người dùng truy cập trang web.
- Tạo HTML: Server sử dụng mã nguồn và dữ liệu từ cơ sở dữ liệu để tạo một trang HTML hoàn chỉnh. Nếu có sử dụng API, đây là lúc chúng được gọi.
- Gửi HTML về browser: HTML đã render được gửi về trình duyệt để người dùng thấy nội dung ngay lập tức. Bạn có thể thấy kết quả này ở phần “doc” trong tab Network.
- Tải JavaScript: Sau khi HTML đã được tải, JavaScript có thể tiếp tục chạy để kích hoạt các tính năng tương tác.
Client-Side Rendering (CSR)
- Nhận yêu cầu và tải HTML cơ bản: Trình duyệt nhận một trang HTML đơn giản cùng với các liên kết đến các tệp JavaScript và CSS.
- Tải JavaScript: Trình duyệt tải và thực thi các tệp JavaScript, thường là từ các framework như React, Vue, hoặc Angular.
- Render trên browser: Sau khi JavaScript được tải, các yêu cầu API sẽ được gửi từ trình duyệt tới server để lấy dữ liệu, sau đó render nội dung trên trình duyệt.
- Hiển thị nội dung: Người dùng có thể xem nội dung trang web được render và tương tác với nó.
Ngoài ra, một số trang web còn có thể kết hợp cả hai phương thức này, được gọi là “Hybrid Rendering” hoặc “Universal Rendering”, trong đó một số phần được render ở phía server và những phần khác được render ở phía client.
Kết Luận
Một trang web chỉ sử dụng SSR sẽ không hiển thị các yêu cầu API trong tab Network do quá trình gọi API và render được hoàn tất ở server. Hy vọng qua bài viết này, bạn đã hiểu rõ hơn về lý do tại sao một số trang web không thấy API khi kiểm tra từ client.
source: viblo
