Sự trở lại của Server Side Rendering

Client Side Rendering và Server Side Rendering

Client Side Rendering :  

CSR là sự kết xuất các file từ Client ( máy khách - là có nghĩa là máy của bạn ). Điều này phụ thuộc vào cấu hình của máy bạn sử dụng để truy cập. Có nghĩa là các tệp sẽ được tải về máy và render khi gọi qua các API mà máy chủ cung cấp để hiển thị nội dung bạn cần thấy. CSR rất phổ biến hơn 10 năm trở lại đây khi các framework JS ra đời như Angualr, React, Vue … Và điều tuyệt vời hơn khi các bản cao cấp hơn ra đời như Next JS, Nuxt JS ra đời với Pre-rendering. 
Pre-rendering là bản có thể cao cấp khi kết hợp giữa server và client render nhưng vẫn dựa trên cấu trúc của các Javascipt và các framework JS có sẵn.

Server Side Rendering:

 ( SSR ) là sự kết xuất các file ở Server ( máy chủ - là máy chủ của nhà phát hành và hiện tại là các cloud ). Máy chủ càng mạnh sẽ render ra các file nhanh và việc truy cập tốt. Nếu lượng truy cập lớn nhưng máy chủ nhỏ và không đáp ứng được lưu lượng sẽ khiến máy chủ bị truy cập chậm và việc tải trang lâu. Điều này bạn có thể thấy phổ biến nhất như ở các ngôn ngữ lập trình như PHP ( ví dụ điển hình là Wordpress, Lavarel ), Java ( Spring boot ), C# ( Asp.Net ), Python ( django vs flask ) hoặc Ruby on rails… còn nhiều hơn ở ngoài kia mà tôi không thể kể hết.

Ưu và nhược điểm và các công ty đang dùng: 

Ưu và nhược điểm:

Trong khi Client Side Rendering làm giải tải trọng từ máy chủ ( Sever ) và tận dụng một phần của máy khách ( Client ). Giúp cho việc giảm lưu lượng truy cập vào máy chủ cùng một lúc và việc xử lý ở máy chủ ít hơn. Thì Server Side Rendering tập trung vào xử lý ở máy chủ. Khiến hệ thống trở nên nặng nề và dễ bị nghẽn cổ chai traffic.

Nhưng bài viết này tôi sẽ cho bạn thấy rõ việc nào tốt hơn ở góc nhìn của tôi.

Về SEO:

Việc bạn phát triển một website và để cho website mình có một thứ hạn tốt thì SEO ( Search Engine Optimization là tối ưu hóa công cụ tìm kiếm ) thì SEO rất quan trọng trong việc làm web. Nếu website bạn viết ra không có người tìm thấy và không có lượt truy cập thì điều đó thật nhàm chán. Việc SEO sẽ đưa website bạn dễ tìm thấy hơn trên các công cụ tìm kiếm như Google, Bing… và tiếp theo có thể là data cho các AI. Thì điều này ở  Server Side Rendering làm tốt hơn. Có thể nhiều góc nhìn sẽ cho thấy rằng Pre-rendering sẽ tốt hơn. Thì đúng vậy, chủ yếu dựa vào tư duy và chiến lược SEO lâu dài thì điều này tốt và phát triển nội dung ổn định. Nhưng ở Server Side Rendering sẽ có những thủ thuật mà chỉ ở Server đó mới làm và bạn sẽ hoàn toàn không biết nó. Điều này sẽ dựa vào tư duy hệ thống và cách lập trình của lập trình viên. 
Vậy Server Side Rendering sẽ tốt hơn cho SEO nếu bạn biết tư duy phát triển và tối ưu hóa tốc độ của nó

Về độ phổ biến: 

Hơn 10 năm trở lại đây thì việc sử dụng các framework JS đã trở thành điều cơ bản của các lập trình viên. Việc tranh luận giữa dùng Vue, React và Angular cũng là một vấn đề nhiều tranh cãi. Nhưng việc phổ biến cũng không của Wordpress cũng là sự kính sợ của các anh js-ter. Nhưng cộng đồng JS vẫn là sự lựa chọn tốt cho các start-up khi muốn phát triển và có một frameword cộng đồng phát triển tốt và dễ kiếm được các lập trình viên.

Wordpress chỉ thích hợp làm website đơn giản.

Các bạn cần phân biệt giữa ngôn ngữ lập trình và framework. Việc sử dụng Wordpress để phát triển hệ thống nhiều người dùng điều này dường như không khả thi cho lắm. Nếu bạn cần một CMS, một trang bán hàng đơn giản, một page nhanh chóng thì hãy dùng Wordpress. Nhưng nếu có ý tưởng lâu dài thì nên dùng một frameword khung như Lavarel chẳng hạn hoặc cái gì đó khác mà bạn thích. ( tôi không khuyến khích điều này ).

Hãy nhớ rằng Facebook hiện tại vẫn còn đang dùng PHP. Điều này cho chúng ta hiểu rằng. Dù Facebook ra nhiều công nghệ mới, điều mới lạ nhưng cốt lỗi vẫn là ngôn ngữ lập trình.

Vậy các framework JS và Server Side Rendering sẽ phổ biến hơn.

Về bảo mật: 

Bạn có nghĩ rằng: “ Bạn đưa code cho người khác và điều này bảo mật hơn”. Tôi khẳng định rằng Server Side Rendering sẽ bảo mật tốt hơn. Khi các tác vụ xử lý đều được xử lý ở máy chủ. Và trả về Client những thông tin hạn hẹp. Nên việc bảo mật ở Server Side Rendering sẽ tốt hơn. Và điều này cũng còn phụ thuộc tư duy của lập trình viên và sự kết nối giữa Front-end và Back-end của một hệ thống nữa. 

“ Điều gì càng phổ biến thì càng khó bảo mật ”

Các công ty đang dùng phổ biến.

Tôi chỉ đưa ra những ví dụ điển hình. Tôi không đi vào sâu sắc và phân tích kỹ càng về các công ty sử dụng công nghệ nào. Vì đằng sau mỗi công ty đều nó lối tư duy và phát triển riêng.

Client Side Rendering:

Phổ biến nhất có thể nói về Tiki và Shopee. Trong khi Tiki đang sử dụng Next Js thì Shopee tôi không khẳng định được điều đó. Nhưng tôi biết rằng Shopee đang sử dụng Client Side Rendering và có thể kết hợp thêm nhiều yếu tố khác.

Server Side Rendering:

Nếu bạn là lập trình viên Việt Nam. Thì bạn có tường tò mò về Thế Giới Di Động và Điện Máy Xanh. Thì cả 2 đều sử dụng Server Side Rendering và bạn thấy nó thật sự hiểu quả cho SEO.

Ngoại lai và khắc phục những hạn chế.

Client Side Rendering sẽ có Pre-rendering để khắc phục những hạn chế về SEO. Còn Server Side Rendering sẽ phát triển những javascript để làm giảm tải trọng lên về từ máy khách. Nhưng việc AI phát triển như hiện tại thì Client Side Rendering sẽ cần chú trọng hơn về vấn đề bảo mật. Những AI có thể tải xuống và phân tích code của bạn chỉ trong thời gian ngắn và có thể truy cập và vượt qua những gì bạn viết một cách tốt hơn. Vì chúng ta biết rằng, tư duy logic của chúng ta sẽ không bằng một cổ máy được. Vì nó phát triển ra dựa trên nó.

Tôi đang dùng công nghệ gì?

Tôi đang dùng chính là Server Side Rendering và dựa theo các componet js để sử dụng client side render trên những tag vụ cần điều nhanh nhóng. Các component của tôi được viết riêng biệt dựa trên vanilla JS và render ở Server để tạo nên sự bảo mật tuyệt đối về các key nhạy cảm.

Lý thuyết này bằng nguồn từ đâu?

Trước đây tôi có dùng Angular và sau đó tôi tìm hiểu sâu hơn về JAM stack. Việc JAM stack đang dần trở nên phổ biến thì tôi bắt đầu dựa vào nhưng thử nghiệm thực tiển để phát triển công nghệ của riêng mình. Dựa trên những gì học được từ web component, JS framework. Tôi tự phát triển công nghệ cho riêng mình những công nghệ tôi có thể kiếm soát từ Client, Server và các API.

Định hướng và những gì tôi đang làm

Tôi Huỳnh Nhân Quốc, một kẻ mang mộng mơ về “ Độc lập công nghệ”. Tôi đã viết những gì dại khờ…

Phát triển hệ thống module

Nếu bạn đang cần một module như bài viết, tuyển dụng, xác thực, tạo link rút gọn, QR code thanh toán…

Tôi viết những module này và bắt đầu cho thuê. Tôi đang định hướng trở thành một công ty công nghệ về “ Cho thuê những module này… ” Việc này dựa trên cloud và có thể truy cập ở mọi nơi.

SaaS và Headless API.

Khi các điện toán đám mây đang dần trở nên phố biến thì SaaS sẽ là xu hướng của tương lai.

Vậy SaaS là gì?

SaaS là bạn cho thuê một phần mềm hay sản phẩm công nghệ dưới dạng một dịch vụ như Google Drive, Google Work Space hoặc một kho lưu trữ Adobe Creative Cloud hoặc phần mềm sử dụng online mà bạn có thể truy cập từ Internet bất kỳ và bạn phải trả chi phi khi bạn dụng các gói cao cấp hơn.

Headless API 

Có thể nó sẽ phổ biến hơn với các lập trình viên. Khi họ cho bạn thuê hoặc tính phí dựa trên lượng truy vấn API. Việc này sẽ tạo nên sự tiết kiệm chi phí phát triển ban đầu cho các startup . Việc bạn phát triển một công nghệ quá nhiều giai đoạn và hình thành. Nên Headless API là một điều sẽ dần trở nên phổ biến cho các Framework JS. Việc bạn chỉ phát triển Font-end và Back-end đã có những Headless API xử lý giúp bạn. Có thể thấy một ví dụ điện hình như Chat GPT cho thuê gói cao cấp dựa trên các token request.

Cảm ơn các bạn đã quan tâm về Client Side Rendering và Server Side Rendering. 
Tôi là Huỳnh Nhân Quốc, hãy chia sẽ thêm cho tôi những gì bạn biết. 
Và đây là bài viết đầu tiên kỉ niệm ta viết ra Module Blog thuộc kitblog.vn