Trang Web SPA lưu ở đâu trên browser khi load lần đầu

ongchamchi · February 12, 2021, 1:11pm

Xin chào,
Cho em hỏi các trang SPA (gmail, facebook,…) khi truy cập lần đầu browser tải toàn bộ giao diện web về máy thì nó lưu ở đâu trong trình duyệt ạ, các bác có thể hướng dẫn em cách mở chỗ lưu của code HTML,CSS,JS đã tải về không ? Em chưa hiểu từ render trong “client rendering” nghĩa là gì. Nếu front end được lập trình viên code bằng reactJS, AngularJS,… sau khi code xong họ build ra thành HTML,JS,CSS rồi deploy lên hosting, VPS,… thì trình duyệt tải 1 lần hết toàn bộ giao diện thì chỉ việc hiển thị ra những file HTML,CSS,JS đã tải về rồi còn render là làm gì ạ ?
Chúc mừng năm mới

tonghoangvu · February 12, 2021, 3:04pm

Trình duyệt lưu vào cache nhé bạn, còn cache lưu ở đâu và lưu như thế nào thì trình duyệt mới biết. Mà mình nghĩ không cần quan tâm tới nó làm gì.
Render là render dữ liệu ra cho user nhìn thấy, giao diện chỉ là bộ khung thôi. Cái này bạn tìm hiểu về server side rendering trước thì sẽ hiểu. Ở SSR thì data được server pass thẳng vào web luôn, rồi trả về HTML đã có data. Còn CSR thì đầu tiên chỉ là bộ khung web rỗng, sau đó server trả về dữ liệu trong JSON qua API, rồi nhờ Javascript render dữ liệu đó thành các HTML elements (ở client).

kisuluoibieng · February 12, 2021, 3:52pm

Bạn có hiểu render trong câu trên nghĩa là gì không?

ongchamchi · February 12, 2021, 4:00pm

em chỉ hiểu render bên làm phim là dùng phần mềm dựng nên cảnh phim cuối cùng. hoàn chỉnh từ những nguyên liệu sẵn có (hiệu ứng, đoạn cắt cảnh, mô hình, khung ảnh,…) Còn web thì em không biết render là gì

SakaDream · February 2, 2022, 12:58am

Trước khi con người mới biết làm web thì người ta code từ xử lý logic đến ui chung 1 project, server tự xử và chỉ trả về UI (html, css, js, hình ảnh, video, âm thanh,…) cho client hiển thị lên.

Sau này web nó lớn hơn, UI cũng cần động động tí như màn hình chờ loading data chẳng hạn. Người ta tách một vài thành phần loading data bên logic code sang UI code và viết sang js. Giờ client chỉ cần load cái sườn UI (html, css) và logic load data (js) cho UI tự xử. Server đỡ việc hơn để làm nhiều tác vụ logic phức tạp hơn, còn UI thì được load động, nhìn giống application trên desktop hơn. Sau này người ta còn được thêm logic code vào thẳng UI như filter trên table, search trên table. Backend chỉ trả sườn UI + logic fetch data, còn UI tử xử hết việc call fetch data và đống logic còn lại.

Quay lại với Single Page App. SPA nó sử dụng mô hình client-side rendering, tức các xử lý logic đều có thể thực hiện được dưới client (cái laptop/smartphone bạn đang lướt DNH) . Client phải download toàn bộ frontend đã được build từ server frontend, đó là lý do bạn chạy Angular phải có node hoặc phải build production mode mới host bằng nginx. Sau đó code frontend đã được download đó sẽ chạy trên browser khi bạn truy cập trang web, chính code frontend đó sẽ xử lý từ routing page, fetch data từ rest api, xử lý logic trên data đó và render ra trình duyệt, 100% trên local. Còn server frontend chỉ host code cho client download về thôi, backend thì tạo API cho client fetch/post data

~~(Mai mình sẽ vẽ hình vào cho dễ hiểu hơn, nhắc trong này để thôi quên mất )~~

ongchamchi · February 13, 2021, 3:38am

@SakaDream bác ơi vẽ hình cho em với

viethuy13 · February 14, 2021, 10:05am

Ví dụ về client rendering bằng jquery :

$('body').append('<div><h1>Client rendering</h1></div>');

Như vậy trình duyệt lưu giao diện web bện trong thẻ “script” hoặc “script” chứa src tới file .js .

Thông thường nếu sài Vue hay angular . Máy chủ chỉ trả về json , từ json render ra giao diện từ nơi lưu như đã nói ở trên