Sự khác nhau giữa client side rendering, server side rendering, SPA, MPA
Góc nhìn của một tay mơ về mấy mô hình bên frontend
Lúc trưa đi ăn, mấy đồng nghiệp có nói chuyện về sự khác nhau giữa client-side rendering và server-side rendering, và vì sao NextJS lại không giống PHP, dù nghe qua thì có vẻ là cơ chế hoạt động giống nhau. Là một người ngoại đạo chưa làm frontend bao giờ, nhưng nghe chủ đề thú vị nên tôi cũng muốn thử tìm hiểu xem sao.
https://vercel.com/blog/understanding-react-server-components
Để có thể hiểu sâu sắc về một thứ gì đó, không gì tốt hơn việc điểm lại những sự kiện lịch sử phát trển của nó. Tôi có hai bài bài thuyết trình về chủ đề “Lịch sử Internet” và “Lịch sử Computer Chip”, cũng đề cập về kha khá các mốc sự kiện đáng chú ý trong lịch sử phát triển của nghành IT chúng ta. Nếu có thời gian rảnh, mời bạn đọc ghé xem thử.
Quay trở lại chủ đề chính, cùng xem để có được sự đa dạng các frontend framework như hiện nay, thì thế giới đã trải qua những giai đoạn nào:
1993 - 1996: Chỉ một tình yêu chỉ một HTML
Đây là giai đoạn đánh dấu những viên gạch đầu tiên được xây, đi cùng với sự ra đời của trang web đầu tiên, browser đầu tiên, và HTML. Lúc này Javascript còn chưa ra đời, CSS cũng thế, nên các trang web đều hiển thị dưới dạng thuần HTML. Bên dưới là website đầu tiên trên thế giới, viết bởi Tim Bernes-Lee tại viện khoa học CERN, vẫn còn tồn tại đến ngày nay.
https://info.cern.ch/hypertext/WWW/TheProject.html
1996-2000s: Javascript ra đời
Javascript ra đời trong thời gian này, viết bởi ông Brendan Eich khi ông đang làm việc cho Netscape (cũng là một trong những browser đầu tiên). Javascript ban đầu được tạo ra với cái tên là LiveScript, nhưng vì lúc bấy giờ Java đang là ngôn ngữ hot, nên LiveScript đã đổi tên thành JavaScript để được chú ý hơn. Có bài nói chuyện của Lex Fridman và Brenden Eich ở đây.
Năm 1996, Internet Explorer của Microsoft cũng ra đời. Sau đó 3 năm thì họ giới thiệu XMLHttpRequest. Công nghệ này cho phép data được fetch về asynchronous. Đến đây tôi có thắc mắc rằng “javascript là single-threaded language”, vậy làm sao mà XMLHttpRequest có thể chạy async được? À thì hoá ra là do phần callbacks sẽ được browser lưu ở một chỗ khác, và khi callback đó có kết quả, single-threaded kia sẽ quay lại và execute cái callback đó.
2000s - 2010s: Ajax và jQuery
XMLHttpRequest cải tiến thành Ajax, và sau đó là jQuery. Bài giới thiệu về Ajax viết năm 2005 vẫn còn đến ngày nay.
2010s-2015s: Javascript framework
Bắt đầu với sự ra đời của 3 framework lớn, đó là BackboneJS, KnockoutJS, và AngularJS.
Angular là sản phẩm của Google. Angular 1 gây được tiếng vang lớn và được sử dụng rộng rãi. Nhưng do Angular 2 ra đời mà lại không tương thích với Angular 1, nên một lượng lớn lập trình viên đã cảm thấy không còn muốn gắn bó với Angular nữa.
Đúng lúc này, năm 2013, React của facebook ra đời. Và gần như ngay lập tức framework này chiếm lĩnh thị trường.
2016-2020: GraphQL ra đời, Next.js ra đời
Cùng vơi sự phát triển như vũ bão của các công nghệ mới. Next.js đã đời trong thời kì này.
Deno đang dần thay thế Node.js?
Còn về SPA và MPA thì sao?
Single Page Application (SPA) giống như client-side rendering
Multiple Page Application (MPA) lại giống như server-side rendering
Vì sao NextJS lại không giống PHP?
Thực ra câu chuyện một công nghệ ra đời, sau đó khoảng vài năm, người ta mới nhận ra công nghệ đó không phù hợp là chuyện chẳng hiếm gặp. Ví dụ có thể kể đến câu chuyện về SQL. Cứ dăm ba năm sẽ có một ngôn ngữ truy vấn nào đó ra đời, nói rằng ưu việt hơn SQL. Nhưng rồi đã gần 40 năm qua, SQL vẫn là lựa chọn không thể thay thế. Hay câu chuyện về PHP, cứ 5 năm, sẽ có một ai đó hỏi một câu đại loại như: “Trong vòng 5 năm tới, PHP có còn ai dùng nữa không?”, dĩ nhiên vẫn rất nhiều người đang dùng PHP và sẽ còn dùng PHP.
Tuy nhiên những công nghệ mới ra đời không phải chỉ để cho vui. Chúng ra đời để giải quyết những vẫn đề mà công nghệ cũ không giải quyết được. Ví dụ như câu chuyện của Deno được sinh ra để giải quyết một số vấn đề không thể giải quyết được của NodeJS.
NextJS cũng vậy, nó có một số tính năng mà PHP không có, nó phục vụ những usecases riêng. Cụ thể thì khi nào dùng NextJS?
Nếu cần cải thiện SEO
Nếu team hiện tại đang dùng React ở phía frontend
Nếu web yêu cầu tính tương tác cao với người dùng
Nếu muốn nâng cao developer experience (code không bị cáu)