date
Jul 10, 2024
slug
vi-sao-f12-len-khong-thay-api
status
Published
tags
NextJs
NodeJs
summary
Lắm lúc bạn cần check API ở Network mà quái lạ nó không có API
type
Post
Key work chính là việc render trang web CSR hoặc SSR
  1. Server-Side Rendering (SSR)
    1. Nhận yêu cầu: Server nhận yêu cầu từ browser để truy cập trang web.
    2. Tạo HTML: Server sử dụng mã nguồn (HTML, CSS, JavaScript) và dữ liệu từ cơ sở dữ liệu (nếu cần) để tạo ra một trang HTML đầy đủ, chứa nội dung được render. Để truy xuất dữ liệu từ cơ sở dữ liệu, thông thường sẽ sử dụng các API hoặc các truy vấn trực tiếp đến cơ sở dữ liệu. ⇒ Nếu có sử dụng API thì sẽ được gọi ở bước này.
    3. Gửi HTML về browser: HTML đã render được gửi về browser, user thấy nội dung trang web ngay lập tức. Chúng ta có thể thấy thành quả server gởi về client ở filter “doc”.\
    4. Tải JavaScript: Sau khi HTML được tải, JavaScript có thể tiếp tục chạy trên browser (nếu có) để kích hoạt các tính năng tương tác.
  1. Client-Side Rendering (CSR)
    1. Nhận yêu cầu và tải HTML cơ bản: Browser nhận một trang HTML có cấu trúc cơ bản cùng với các liên kết đến các tệp JavaScript và CSS.
    2. Tải JavaScript: Browser tải và thực thi các tệp JavaScript được liên kết, thường là framework hoặc thư viện front-end như React, Vue hoặc Angular.
    3. Render trên browser: Sau khi JavaScript đã được tải và thực thi, các yêu cầu API được gửi từ browser đến server để lấy dữ liệu cần thiết. Sau khi dữ liệu được trả về từ API, JavaScript sẽ xử lý và sử dụng dữ liệu này để render nội dung trên browser, thường thông qua Virtual DOM trong React hoặc DOM manipulation trong các framework khác. ⇒ Nếu có sử dụng API thì sẽ được gọi ở bước này.
    4. Hiển thị nội dung: Trang web hiển thị với nội dung được render trên browser và user có thể tương tác với nó.
 

“Success is not final, failure is not fatal: it is the courage to continue that counts.“

Winston Churchill


© Hiếu Trần 2020 - 2025

Tip: Use console.table() for better array logging!
Anime Character