Hướng dẫn react ssr css - phản ứng ssr css
Chào bạn, sau một khoảng thời gian nghỉ tết ngắn, chúng ta hầu hết đã trở lại với công việc và mình cũng không ngoại lệ. Dư âm tết vẫn còn đấy nhưng cũng không thể quên nhiệm vụ, thế là hôm nay mình đã trở lại với một bài viết mới với một chủ đề tuy cũ nhưng lại mới với bản thân mình, đó là xây dựng các ứng dụng Show 1. Chuẩn bịYêu cầu:
Mục đích:
Những phần bỏ qua:
2. Nội dungNói một chút về SSR trong ReactBạn sẽ thường nghĩ đến 3 là cách nội dung của một trang web (full html) được render trên server chứ không phải trên trình duyệt của người dùng (client) bằng 9, và mọi trang đều làm cùng 1 cách như vậy, thường thì bạn sẽ thấy cách render này được sử dụng bởi các ngôn ngữ/ framework server như 0 và các tương tác phía client sẽ được triển khai bằng JavaScript.Điều này gần như trái ngược với cách tiếp cận của 1 đó là mỗi khi user truy cập vào một trang web, phía server sẽ gởi đến client một file html đơn giản có chưa các liên kết gồm link và script sau đó browser sẽ tiếp tục kích hoạt request để lấy các asset ấy, trong đó sẽ bao gồm 1 file 2 (đóng gọi toàn bộ những thứ cần thiết để tạo markup thông qua JS), và sau đó 3 từ trình duyệt của client sẽ tạo ra markup dựa vào tệp 2 đã được tải.Theo cách hiểu của mình thì 3 trong React sẽ hơi khác một chút, trang đầu tiên ( 7) sẽ được render từ phía server và gửi đến trình duyệt của client, khi user điều hướng đến các trang tiếp theo sẽ render trực tiếp tại client (đối với cách áp dụng code-splitting thì sẽ cần tải thêm script từ phía server), render theo hướng này thường được gọi là 8.Server dùng để renderVới bài viết này mình sẽ dùng Node server (với express framework) để xây dựng phần server-side vì tính phổ biến của nó, ngoài ra bạn cũng có thể dùng nhiều loại server khác. Khởi tạo ứng dụngTất nhiên là bạn hoàn toàn có thể tạo ứng dụng node bằng 9 hoặc 0, trong bài viết này mình sẽ dùng 9.Cài đặt thư việnMình sẽ cần cài một số lib quan trọng sau
Cấu hình để build 2
3
Với webpack bạn có thể sử dụng một mảng chứa nhiều config khác nhau để có thể xử lý cho nhiều đầu vào và đầu ra khác nhau nhé. Cụ thể ở đây sẽ chứa config cho 4 và 5 Khi tiến hành build sẽ mong đợi 2 loại đầu ra sau
Tạo các component và entry point 9
component này sẽ được dùng để render toàn bộ nội dung html gửi đến client 0
component này sẽ tạo ra nội dung cụ thể và được đưa vào bên trong 1. bạn có thể xem nó giống như 2 mà các ứng dụng 3 thường làm. Ngoài ra chúng ta sẽ thêm một event-handler đơn giản để thay đổi 1 đoạn text. 4 Chúng ta sẽ dựng 1 server express đơn giản và serve các static file trong cùng folder sau khi build. Phần quan trọng nhất của demo này, bạn sẽ thấy 5 và nó làm nhiệm vụ nhận mọi request từ phía client. Đối với render React phía server chúng ta sẽ cần dùng 6. Mình sẽ dùng 2 phương thức 7 và 8, về cơ bản thì 2 phương thức này là hoàn toàn tương tự nhau chỉ khác là 7 sẽ cho phép event-handler sau khi đồng bộ với phía client và 8 sẽ bỏ qua tất cả attribute mà React thêm vào DOM trong quá trình render 1 2 file này sẽ được tạo ra khi ta tiến hành build client bằng webpack Ngoài ra 2 sẽ được dùng để chứng minh việc render phía server lần đầu tiên. 3
Chúng ta sẽ cần dùng 4 thay cho 5 đây là yêu cầu khi bạn đã render ứng dụng từ phía server và muốn kết nối nó với phía clientChạy demo
Truy cập 6Mọi thứ đã hoạt động mà không có lỗi gì xảy ra Tiến hay thay đổi text bằng cách click vào button Text được thay đổi trực tiếp từ phía client, đó chính xác là những gì chúng ta mong đợi. Demo kết thúc. 3. Kết luậnMọi thứ trông thật đơn giản bạn nhỉ . .Đây chỉ mới được gọi là bước đệm, bước khởi đầu để chúng ta sẽ đi với 3 trong React trong tương lai.Hi vọng bài viết này có ích và giúp bạn trong quá trình tiến tới hoàn thiện khả năng lập trình Web và đặc biệt là luôn giữ tình yêu với Nếu bạn cảm thấy thích thú với 3 trong React và mong muốn mình chia sẽ thêm về 2 thì hãy comment bên dưới nhé.Cảm ơn đã đọc bài viết này Repo tại đây Repo tại đây |