toidicodedao: Sự khác biệt giữa server-side rendering và client-side rendering

Trong series Lược Sử Lập Trình Web, mình đã kể về chuyện lập trình web đang có xu hướng chuyển dần từ server-side rendering sang client-side rendering.
Trong bài này, chúng ta sẽ cùng tìm hiểu về sự khác nhau giữa hai cơ chế này, ưu nhược điểm của chúng để có thể dễ dàng lựa chọn khi sử dụng nhé! Chúng ta cũng sẽ tìm hiểu những công ty công nghệ lớn như Facebook, AirBnB sử dụng cơ chế nào luôn!

Cơ chế server-side rendering

Cơ chế server-side rendering đã được dùng từ thuở xưa ơi là xưa. Gọi nó là server-side rendering là vì phần lớn logic sẽ được xử lý ở server:

• Khi người dùng vào một trang web, trình duyệt sẽ gửi GET request tới web server
• Web server sẽ nhận request, đọc dữ liệu từ database.
• Web server sẽ render HTML, trả về cho browser để hiển thị cho người dùng

Mô hình đơn giản về Server Side Rendering

Một số tính chất của cơ chế server side rendering:

• Logic từ đơn giản (validation, đọc dữ liệu) cho đến phức tạp (phân quyền, thanh toán) đều nằm ở phía server
• Logic để routing – chuyển trang nằm ở server
• Logic để render – hiển thị trang web cũng nằm ở server nốt

Ưu và nhược điểm của Server Side Rendering

Ra đời đã lâu, server side rendering đã được sử dụng, cải tiến rất nhiều (Caching, CDN). Những ưu điểm của cơ chế này:

• Initial load nhanh, dễ otpimize, vì toàn bộ dữ liệu đã được xử lý ở server. Client chỉ việc hiển thị.
• Các web framework từ xưa đến nay đều hỗ trợ cơ chế này
• Dễ hiểu và dễ code hơn. Developer chỉ cần code 1 project web là được, không cần phải tách ra front-end và back-end
• SEO tốt vì khi bot của Google, Bing vào web sẽ thấy toàn bộ dữ liệu dưới dạng HTML.
• Chạy được trên phần lớn mọi trình duyệt, kể cả disable JavaScript vẫn chạy tốt

SSR dễ code, hỗ trợ SEO cũng khá tốt

Thế nhưng, bên cạnh đó, server side rendering cũng có một số nhược điểm:

• Mỗi lần người dùng chuyển trang là site phải load lại nhiều lần, gây khó chịu
• Nặng server vì server phải xử lý nhiều logic và dữ liệu. Có thể sử dụng caching để giảm tải.
• Tốn băng thông vì server phải gửi nhiều dữ liệu thừa và trùng  (HTML, header, footer). Có thể sử dụng CDN để giảm tải.
• Tương tác không tốt như Client Side rendering vì trang phải refresh, load lại nhiều lần.

Cơ chế server side rendering vẫn còn được sử dụng ở rất rất nhiều site. Do vậy, chỉ cần hiểu rõ và nắm vững cơ chế này là bạn đã có thể làm một trang web đầy đủ tính năng rồi.
Các trang web sử dụng cơ chế này:

• Toàn bộ những trang web được build từ CMS như Joomla, WordPress.
• Các trang web bán hàng, web tin tức: Thegioididong, Vnexpress, Zing News
• Các web đọc truyện và forum: Webtretho, vozforum

Các trang web lớn, web tin tức vẫn sử dụng cơ chế SSR

Cơ chế client-side rendering

Thế rồi, ở những năm 2010, với sự phát triển của JavaScript và AJAX, cơ chế client-side rendering bắt đầu được sử dụng.
Developer bắt đầu build ứng dụng dưới dạng SPA – Single Page Application. Ứng dụng nằm trong 1 page duy nhất nên được gọi là Single Page Application.
Client Side Rendering tức là việc render HTML, CSS sẽ được thực hiện ở client (Tức JavaScript ở trình duyệt)

Những logic về render dữ liệu sẽ được xử lý ở phía client thay cho server

So với Server Side Rendering (SSR) đã nhắc trong phần 1, Client Side Rendering (CSR) có những đặc điểm sau:

• Những logic đơn giản (validation, đọc dữ liệu, sorting, filtering) nằm ở client side
• Logic để routing (chuyển trang), render (hiển thị) dữ liệu thì 96.69% là nằm ở client side
• Logic phức tạp (thanh toán, phân quyền) hoặc cần xử lý nhiều (data processing, report) vẫn nằm ở server side.

Ưu nhược điểm của Client-side rendering

Ra mắt sau nên Client Side Rendering giải quyết được một số vấn đề của server side rendering:

• Page chỉ cần load một lần duy nhất. Khi user chuyển trang hoặc thêm dữ liệu, JavaScript sẽ lấy và gửi dữ liệu từ server qua AJAX. User có thể thấy dữ liệu mới mà không cần chuyển trang.
• Chuyển logic sang client nên giảm tải được một phần cho server.
• Giảm được băng thông do chỉ cần lấy JSON và dữ liệu cần thiết, thay vì phải lấy toàn bộ trang
• Với các ứng dụng cần tương tác nhiều, SPA hoạt động mượt mà hơn vì code chạy trên browser, không cần load đi loại lại nhiều

Tất nhiên là client side rendering cũng có một số nhược điểm riêng:

• Initial load sẽ chậm hơn nếu không biết optimize. Lý do là broser phải tải toàn bộ JavaScript về (khá nặng), parse và chạy JS, gọi API để lấy dữ liệu từ server (chậm), sau đó render dữ liệu
• Đòi hỏi project phải chia làm 2 phần riêng là back-end (REST api) và front-end nên khó code hơn
• Không chạy được nếu JavaScript bị disable, hoặc ở các trình duyệt cũ không nhận JavaScript ES6 (Có thể dùng transpiler và polyfill nhưng sẽ làm tăng kích cỡ file js)
• SEO không tốt bằng Server Side Rendering (Do bot crawl không đọc được dữ liệu). Để giải quyết, ta phải kết hợp thêm SSR (Bot mới của Google đọc được client-side rendering rồi).
• Nếu client sử dụng mobile, device yếu thì khi load sẽ bị chậm

Với Client Side Rendering, dự án phải chia ra làm 2 phần là front-end và back-end

Các website sử dụng Client-Side Rendering

Vì Client-side rendering rất phù hợp cho những ứng dụng cần tương tác nhiều, hầu hết web của các công ty công nghệ, công ty startup đều đùng cơ chế này:

• Facebook (React)
• Instagram (React)
• Netflix (React)
• Dropbox (React)
• AirBnb (React)
• Trello (Angular)
• Paypal (Angular + React)
• Xiaomi (VueJS)
• Alibabe (VueJS)
• Gitlab (VueJS)

Website của các ông lớn như Airbnb, Facebook, Netflix, Uber đều sử dụng cơ chế Client Side Rendering cả

Nói chung, client side rendering còn khá mới mẻ nên vẫn còn một số vấn đề nhỏ chưa được giải quyết tốt (tối ưu tốc độ initial load, giảm kích cỡ file JavaScript của app).
Các vấn đề này vẫn đang được giải quyết bởi các engineer trâu bò hàng đầu ở Facebook, Netflix, Instagram…

Kết

Trong bài viết này, mình đã giới thiệu sơ về 2 cơ chế client-side rendering và server-side rending. Mình cũng chia sẻ về những ưu nhược điểm của 2 cơ chế này.
Một điều mình không nhắc đến trong bài là đôi khi các website sẽ kết hợp cả server-side rending lẫn client side rendering. Ví dụ server sẽ tải trước một số dữ liệu dưới dạng JSON cho client, hoặc server sẽ render HTML khi gặp bot đễ hỗ trợ crawl tốt hơn.
Bản thân các thư viện client-side rendering như React, VueJS cũng đều hỗ trợ server rendering (React có react-dom/server, VueJS có Nuxt). Nếu có hứng thú, các bạn có thể tự tìm hiểu thêm nhé!

toidicodedao: 9 project nhỏ mà bạn có thể code để luyện tập kĩ năng lập trình

Hôm trước, mình có giới thiệu về JavaScript, đánh giá nó là một ngôn ngữ mạnh mẽ, đáng học.
Một trong những cách học nhanh nhất chính là sử dụng JavaScript để build một số pet project (dự án nhỏ) để làm quen với ngôn ngữ và công nghệ.
Mình cũng có hứa là sẽ chia sẻ một số project nhỏ mà các bạn có thể sử dụng JavaScript để build.
Do vậy, hôm nay mình viết bài này, tổng hợp 9 dự án nhỏ, đơn giản, dễ làm mà các bạn có thể tập code để nâng cao kĩ năng lập trình.
Note: Tuy nói là JavaScript nhưng các bạn có thể dùng bất cứ ngôn ngữ gì code cũng được nhé (C#, Java, PHP). Chỉ có một vài dự án sẽ cần dùng JavaScript ở front-end thôi.

Cấp độ dễ

Các dự án cấp độ dễ này chỉ cần đụng tới console/file. Thời gian code cũng khá nhanh. Hoàn thành các dự án này, bạn sẽ có nền tảng để làm những thứ phức tạp hơn.

1. Tool crawl dữ liệu từ các website

Mô tả: Viết một tool gửi HTTP Request tới một trang web tin tức bất kì như vnexpress, webtretho, kenh14, bóc tách dữ liệu từ HTML, sau đó in ra cửa sổ console.
Mình từng có 2 bài chia sẻ về cái này:

• Sử dụng HTML Agility Pack trong C#
• Sử dụng Puppeteer trong NodeJS

Kĩ năng học được:

• Cách sử dụng thư viện để gọi HTTP Request
• Cách sử dụng xpath/selector để lấy dữ liệu từ HTML

Làm một con web crawler đơn giản

2. Ứng dụng ghi chú (notes) trên console

Mô tả: Cửa sổ console sẽ hiện 1 menu bao gồm:

1. Hiển thị toàn bộ các ghi chú
2. Thêm một ghi chú mới
3. Sửa một ghi chú đã code
4. Xóa bỏ một ghi chú

Bonus: Nếu lưu toàn bộ các notes trong memory, khi tắt ứng dụng các note sẽ biến mất. Lưu toàn bộ các notes xuống file txt, khi mở ứng dụng lên ta sẽ đọc từ file này.
Kĩ năng học được:

• Cách nhận input/output từ console
• Cách làm việc với mảng
• Cách làm việc với file I/O

Cấp độ trung bình

Các dự án ở cấp độ trung bình này sẽ đòi hỏi bạn biết thêm về UI, database, cron, Web API.

3. Ứng dụng ghi chú (notes) cải tiến:

Mô tả: Chức năng tương tự như ứng dụng ghi chú phía trên, nhưng có UI (Dùng Electron của JS, Winform/WPF của C#, Java Swing của Java). Note nên được lưu vào database, đọc từ database
Kĩ năng học được:

• Cách làm việc với UI
• Cách lưu trữ, đọc dữ liệu từ database

Các bạn có thể tìm hiểu về Electron, framework cho phép ta dùng HTML/CSS/JS để build ứng dụng chạy trên mọi hệ điều hành

4. Rest API cho VNExpress, Web Trẻ Thơ

Mô tả: Dự án gồm 2 phần:

1. Crawler lấy dữ liệu bài viết từ VNExpress, webtretho, bao gồm: Tựa đề, nội dung, url bài viết, thời gian đăng, lưu xuống database. Crawler này sẽ chạy mỗi 60 phút. (Tìm hiểu về cron hoặc recurring task)
2. RESTful API, cho phép người dùng lấy thông tin các bài viết đã có trong database dưới dạng JSON. API này cho phép search, filtering, paging. Có thể dùng bất kì framework nào (Express, Hapi, ASP.NET MVC) tùy thích.

Bonus: Tìm cách deploy dự án này lên heroku hoặc now.sh cho bạn bè dùng thử. Nhớ thêm swageer để người dùng biết cách gọi API nha.
Kĩ năng học được:

• Cách viết cron job/recurring task
• Cách viết RestfulAPI sử dụng Web Framework

RestAPI của Code Dạo viết, cho phép tìm info diễn viên và những phim họ đã đóng

5. Làm Facebook chat bot

Mô tả: Làm một con Facebook chat bot đơn giản, có khả năng nhận tin nhắn của người dùng, chat lại những thứ người dùng nói
Hướng dẫn thì các bạn xem lại series Hướng dẫn Facebook Chat Bot của mình nha.
Kĩ năng học được:

• Hiểu về webhook, biết cách setup webhook
• Biết message payload của Facebook webhook gồm những thành phần nào
• Cách sử dụng RestAPI/ Facebook Graph API

Cấp độ khó

Nói là khó chứ cấp độ này cũng không quá khó đâu, chỉ có điều hơi nhiều chức năng và hơi rộng thôi.
Bạn phải hoàn thành những dự án nhỏ ở những cấp độ trước thì mới đủ khả năng hoàn thành những dự án này nhé. Đa phần các dự án này là dự án web, các bạn muốn dùng framework nào cũng được.

6. Ứng dụng ghi chú bản Web/Mobile

Mô tả: Đưa ứng dụng ghi chú của bạn lên Web/Mobile. Thêm một số tính năng như Login, cho phép người dùng chọn màu sắc, style của note.
Bạn có thể sử dụng framework gì tùy thích. Nếu làm bản mobile thì phía back-end sẽ tạo RestAPI cho mobile dùng nhé.
Kĩ năng học được:

• Cách dùng web framework để tạo 1 trang web động.
• Cách implement chức năng login, lưu trữ thông tin người dùng.

7. App chat đơn giản realtime

Mô tả: Làm một chatroom đơn giản, ko cần đăng nhập, chỉ cần nhập username là có thể chat (Tương tự ví dụ mẫu này: Làm app chat đơn giản với Firebase)
Bạn có thể tìm hiểu về Firebase, socket.io của NodeJS hoặc SignalR của .NET
Kĩ năng học được:

• Cách code ứng dụng realtime, dùng công nghệ hỗ trợ realtime.

Firebase dùng làm ứng dụng real-time khá là ok nha

8. Blog cá nhân

Mô tả: Tạo 1 blog cá nhân với 2 phần

• Phần mặt tiền: hiển thị blog, paging, chia blog theo các category, comment blog
• Phần admin: cho phép bạn tạo category, tạo bài viết, format dưới dạng HTML, sửa hoặc xóa bài viết.

Kĩ năng học được:

• Cách thiết kế Database cho một blog
• Cách lưu trữ hình ảnh (lưu file rồi đường dẫn xuống database nha), hiển thị hình ảnh
• Cách làm web động và sử dụng WYSIWYG editor

9. Web bán hàng

Mô tả: Tạo một trang web bán hàng với 2 phần

• Phần mặt tiền: Hiển thị sản phẩm theo category, tìm kiếm sản phẩm, mua hàng
• Phần admin: Tạo category và sản phẩm, kiểm tra/thay đổi trạng thái đơn hàng.

Kĩ năng học được:

• Cách thiết kế database cho một web bán hàng
• Cách xử lý transaction trong Database
• Thiết kế flow mua hàng/xử lý đơn hàng

Muốn sử dụng công nghê/ngôn ngữ gì cũng được nha

Tạm kết

Bạn có thể dùng những dự án này để luyện tập bất kì ngôn ngữ nào chứ không chỉ là  JavaScript nhé!
Đọc thì nhiều thế thôi chứ các bạn hoàn toàn có thể làm hết những dự án này trong khoảng 3-6 tuần, tùy vào ngộ tính và cần cù thôi.
Làm hết những thứ này, bạn sẽ đủ kiến thức và tự tin để đi phỏng vấn, xin việc ở những vị trí junior/fresher rồi. Chúc các bạn may mắn!
Ngoài ra, nếu có ý tưởng project nào nho nhỏ, thú vị, các bạn có thể comment bên dưới để mình bổ sung nha.