Hỏi về cách hoạt động của hiệu ứng loading phía Server Side Render

Chào các bác.
Em đang có thắc mắc về cách để hiển thị nút loading ở phía SSR.
Ví dụ như Client Side sử dụng AJAX sẽ như sau:

  1. Hiện icon loading
    —> 2. Gửi Request
    --------> 3. Nhận response
    ------------> 4. Ẩn loading

Nhưng phía server sẽ render 1 file html sẵn nên không làm như trên được, mong các bác chỉ giáo em cách giải quyết với ạ.
Em xin cảm ơn

vậy ý của bạn muốn như thế nào?

1 Like

Page có 2 phần A & B:

  • A gồm: menu, sidebar, footer, …
  • B là icon loading

—> 1. Cho Hiện A và B
—> 2. Ajax gửi request
—> 3. Ajax nhận response (server response về cả HTML)
---- > 4. dùng js thay thế B - icon loading bằng response đó (innerHTML)

(tất cả các bước đều không reload lại trang)

2 Likes

Ý em là hiện loading với những kiểu reload lại trang.
Ví dụ như dùng JSP/Servlet thuần chẳng hạn.

Em đang hỏi có 1 số trang phải reload lại cả trang nhưng vẫn có hiệu ứng loading đó anh

bạn muốn load lại trang và có hiệu ứng loading, vậy bạn còn sử dụng ssr làm gì? tại sao không sử dụng csr?
bạn đang đặt ra một vấn đề khá vô lý

vậy chắc phải dùng công nghệ gì đó khác rồi, muốn SSR hoàn toàn mà dùng ajax là sai rồi đó, ajax dùng để call tới server mà ko reload lại trang.

1 Like

ssr cũng có call ajax mà, trước khi response lại cho trình duyệt hiển thị thì nó cũng load data tương tự như client, cũng có thể gọi ajax lấy data rồi render ở server rồi mới response (những gì đã render) cho client, client chỉ hiển thị và không cần làm gì thêm

nếu bạn ấy muốn ssr mà sau khi response cho trình duyệt rồi trình duyệt còn phải gọi ajax nữa thì hơi bị nửa mùa

4 Likes

Tại em thấy có vài trang dùng SSR mà vào homepage vẫn có hiệu ứng loading khá đẹp.
Có khi nào là setTimeout cho nó không anh?

người ta như nào thì kệ người ta, người ta có mục đích riêng, cực chẳng đã thì mới phải làm hiệu ứng đó chứ ai muốn page mình load chậm bao giờ
mà sao bạn biết đó là ssr?
ở đây có vẻ như bạn hơi thần thánh ssr rồi
có rất nhiều thể loại render web: ssr, csr, ssr+csr
đã là ssr thì không có cái trò loading đó, chỉ có 2 loại còn lại mới có

3 Likes

@Hoang_Nam_Le1

Có khi nào là setTimeout cho nó không anh?

Có, đây cũng là một cách.
Nhưng trừ khi có mục đích riêng thì ít ai “rảnh” gắn vô cho đẹp.
Đó là lý do câu hỏi của bạn trở nên tối nghĩa. (do làm khác thông thường)
Một lý do khác nữa, là bạn sử dụng từ SSR để mô tả mục đích, trong khi bạn chưa thật sự hiểu về nó.

Nên đổi lại cách hỏi.
VD:
Trang web của em trả về file HTML, không có gọi ajax, em muốn làm hiệu ứng loading trong vài giây cho nó đẹp, thì nên làm thế nào?

Những khái niệm nào bạn chưa thật sự hiểu thì không nên dùng một cách tự nhiên như vậy.

4 Likes

Tất cả những gì hiển thị trên màn hình đều là do máy tính phía client tự render, thường là bằng GPU. Dù trang web có là SSR hay CSR thì phía client vẫn phải xử lí mấy đoạn code HTML, CSS, JS rồi render hiệu ứng loading ra màn hình bằng GPU, thành ra câu này khá vô nghĩa.

Muốn hiển thị hiệu ứng loading trên web thì có 4 cách:

  1. Dùng ảnh động (thường là gif)
  2. Dùng SVG
  3. Dùng CSS animation
  4. Dùng canvas
3 Likes

thực ra thì ssr vẫn fake loading được, cơ mà nó cũng chẳng cần làm vì vốn dĩ đã có nguyên 1 icon loading ở trên thanh address bar rồi.

4 Likes
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?