Tại sao render phía server nhưng components vẫn nằm ở client?


Mình tạo một ứng dụng angular ssr và có 2 components test, mình biết là render phía server bởi mình tắt js đi thì thấy trang web vẫn show lên. Có cái mình không hiểu là tại sao render phía server nhưng các components lại nằm ở client (thư mục browser). Cảm ơn mọi người

Mình mới biết sơ sơ về Angular đủ làm trang web đơn giản, mình vừa chuyển sang angular ssr thì thấy ít tài liệu quá không thể tìm để học, mình có search thử tiếng Anh rồi GG dịch nhưng vẫn chưa ra câu trả lời.

Bạn nên liên tưởng đến thế giới thật, và phải nắm căn bản về cách một trang web hoạt động, client side như thế nào, server side như thế nào, có những ca nào ngoại lệ hoặc đặc biệt không.

Khi bạn bắt tay vào thứ thuộc lại nâng cao mà không nắm căn bản rồi lại đổ lỗi là “angular ssr thì thấy ít tài liệu quá” <= cái này không đúng, vì người ta không viết theo kiểu mì ăn liền cho dân không biết gì/ hoặc học mót không có nền tảng. Angular mặc định lập trình viên dùng nó có kiến thức về server side rendering, phân biệt được server-side rendering, server-side generation rồi các thứ bên phía client-side hoặc hybrid.

Khi tìm hiểu về web, bạn cũng phải đọc qua lịch sử của nó, chỉ tốn vài buổi nhưng kiến thức đó bạn dùng mãi về sau khi vẫn còn làm việc với Web. Mình không phải dân IT nên mình tìm hiểu khá kỹ về WWW, HTTP, và các thứ xung quanh World Wide Web, kịp hiểu thế giớ Web theo ngôn ngữ đời thường như sau:

Trong quá khứ gần như không có việc client side rendering. Lý do: JavaScript hồi đó còn mới mẻ, HTML phiên bản 3.2 hoặc 4.0 chưa có nhiều hỗ trợ cho cái gọi là AJAX, Web API, càng không có WebSockets,… và các trình duyệt Web xử lý 1 trang HTML có độ vênh khá xa nhau, sự thống trị của trình duyêt IE 6 với các bug không thèm sửa, nên rất rắc rối để một người làm web có thể load nội dung vào cái khung sườn. Lúc bấy giờ mình còn không biết có lập trình viên chuyên JavaScript nào ngoài ngài Douglas Crockford. Các JavaScript framework còn chưa ra đời, jQuery được xem là manh nha cho thời đại JS Framework thì cũng phải 2006 mới xuất hiện. Tức thời kỳ đồ đá của Web chỉ chuyển sang thời đồ đồng vào lúc iPhone 3 ra đời 2007.

html-pllaceholder

Nhìn hình trên, trong quá khứ file ở server đều là HTML, thi thoảng mới có file CSS, file JS nên mọi nội dung được làm sẵn trong file HTML, và cũng chẳng phải lập trình gì ở server. Tức là bạn xem HTML souce nghĩa là tất cả những gì mà trang web đó có, bạn có thể Save As lại và chép CD, chép đĩa USB mang trang Web qua máy tính khác không có kết nối Internet để mở lên xem bình thường. Và hồi đó web chủ yếu là web tĩnh, tức chỉ xem nội dung như bạn đọc sách điện tử ebook file PDF ngày nay mà không có form để bạn điền dữ liệu hay comment gì và nội dung fixed cứng, không có bản tin chứng khoán hay cửa sổ chat gì cả (nếu có thì cũng chỉ một số trang web dùng Java Applet làm).

Nhưng rồi một ngày nọ, người ta nghĩ nếu cứ mỗi trang web đều phải ngồi copy & paste những phần giống nhau (như hình minh họa khung ở trên), và edit những nội dung thêm vào thì nếu là một tờ báo điện tử, có mà chết, công sức đâu mà làm. Vậy là các nhà làm web, các công ty bắt đầu dùng ngôn ngữ lập trình để xử lý. Lúc này thì Perl và Java được dùng trước tiên, sau này có PHP, ASP cổ điển, mục đích là để tách phần nội dung thường thay đổi và những phần thẻ HTML cố định rời nhau. Đến lúc này mới có cái gọi là Dynamic Web (đừng nhầm với DHTML nhé, DHTML là mấy cái mà ngày nay gọi là Animation trên trang web).

Sau năm 2004 thì ngươi ta bắt đầu dùng Ajax như hot trend, và rồi HTML 5 phát triển, CSS 3.0 ra đời, JavaScript ES6 (tức ECMAScript 2015, hay ECMAScript ES6) ra đi vào thực tế. Tầm 2016 trình duyệt có nhân là Chromium, Gecko thống soái, lúc này có cả tá thứ…

Sự rắc rối/ tình hình trở nên phức tạp nảy sinh khi năm 2009 NodeJS ra đời (trước đó rất ít lập trình viên sử dụng Rhino, JScript để làm môi trường phát triển JavaScript cho server side). Lúc này, những người học hành lập trình web thiếu nghiêm túc/ mì ăn liền bắt đầu lẫn lộn không biết đâu là front-end, đâu là back-end vì họ chẳng viết JavaScript của họ chạy ra làm sao, rồi họ còn không biết ECMAScript bà con gì JavaScript, JavaScript vs TypeScript, hoặc cá gì đó như GWT, Dart,… v.v… nên đôi lúc cãi nhau trên mạng xã hội khiến dân học hành nghiêm túc “chỉ biết câm nín”.

Blah blah có khi cả cuốn sách, bạn nên lên MDN https://developer.mozilla.org/en-US/ đọc đi, muốn tìm kiếm gì thì gõ trên đó, rõ rồi thì làm chứ mù mờ thì nguy. Dục tốc bất đạt nhưng nếu muốn xem qua thử có những kiểu rendering/ parsing/ generation thì https://www.netlify.com/blog/the-acronyms-of-rendering/ để soi vào trường hợp Angular bạn đang dùng.

Nếu tìm kiếm trên mạng chưa thạo thì học một khóa về Searching Internet, học một lần, dùng lâu dài.

2 Likes

Tuyệt vời. Cảm ơn b nhé, k phải dân IT mà đỉnh thật

Câu trả lời là khi bạn tạo Project và chọn option SSR trong Angular 17 (vì mình đang dùng và test trên Angular 17) thì mặc định Project sẽ bật chế độ Prerender (SSG) và các components sẽ được render khi build và đặt ở phía Client (thư mục browser). Mình đã thử tạo một vài component khác nhau và đặt hàm check Platform trong ngOninit + Disable JS để test thì thấy những component này không được render phía Server. Giải pháp để render các component phía server là mọi người tắt prerender bằng cách vào file angular.json, tại đường dẫn “projects”.“tên_project”.“architect”.“build”.“options” tìm đến key “prerender” và đặt là false. Vậy là tất cả các component sẽ được render phía server.

Để tìm hiểu các bạn cứ search keyword chứa “prerender” hoặc “SSG”. Tài liệu về Angular SSR trên mạng đúng là rất ít, phải kiên trì tìm kiếm mới có câu trả lời nhé :smiley:

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