Giới thiệu về UmiJS P4 (Server Side Rendering)

Bài viết này mình sẽ giới thiệu cách triển khai Server side rendering reactJS phát triển trên nền tảng umi. Để coi nhiều cấu hình hơn SSR các bạn xem thêm trên trang chủ umiJS

Tại sao ở đây mình lại triển khai SSR với umi luôn. Bởi vì nếu các bạn đã và đang làm việc với umi trong các ứng dụng reactJS của mình thì việc chuyển qua SSR là vô cùng đơn giản, không cần thay đổi mã nhiều, chỉ cần bật thêm cấu hình lên và thêm phương thức tìm nạp dữ liệu trước khi render là xong, không thay đổi gì quá nhiều về kiến trúc khi làm việc

Cách tiếp cận

Để sử dụng được SSR trong ứng dụng umi, mình có 3 thao tác sau

  1. Dựng server node để xử lý việc render từ server (ở đây mình dùng expressJS, sẽ có nhiều tùy chọn khác như koa, egg)
  2. Bật cấu hình ssr trong file cấu hình (.umirc.js)
  3. Thêm phương thức tĩnh getInitialProps nếu bạn để nạp dữ liệu trước khi render

Dựng server xử lý render

Ở bước này bạn tạo file server.js ở thư mục root của ứng dụng, với nội dung

Ở đây umi cung cấp cho mình package umi-server để sử lý việc render từ server. Sau đó, bạn update lại file package.json để thêm thao tác build và chạy ứng dụng

Bật cấu hình ssr trong file cấu hình

Bạn thêm cấu hình ssr: true trong file .umirc.js (tùy môi trường khác nhau mà bạn thêm trong các file .umirc.js khác nhau)

Mặc định thì ssr sẽ không được bật. Khi bạn bật ssr lên thì trong quá trình build ứng dụng, umi sẽ phát sinh thêm 2 file mới trong thư mục build (dist) của bạn umi.server.jsssr-client-mainifest.json

Thêm phương tĩnh getInitialProps nếu bạn muốn nạp dữ liệu trước khi render

Xét ví dụ, mình có pages/news/$id.jsx có nội dung

Có 2 trường hợp khi nạp dữ liệu trước khi render

Trường hợp không sử dụng dva trong ứng dụng

Nếu bạn không sử dung dva thì phương thức getInitialProps của bạn trả về giá trị là 1 promise đã xử lý Promise.resolve (ở ví dụ trên là data[id] || data[0]), dữ liệu trả về này sẽ được đưa vào props của hàm render như đoạn mã trên, lúc đó thì thuộc tính id và name sẽ được lấy từ props của component

Trường hợp có sử dụng dva trong ứng dụng (dva: true)

Trong trường hợp này thì tham số context của hàm getInitialProps sẽ cung cấp cho chúng ta biến store, lúc này việc trả về một promise từ getInitialProps sẽ từ store.dispatch (store.dispatch({type: ‘news/init’}) chẳng hạn). Thường thì với kiến trúc này mổi model của ứng dụng mình  sẽ thêm 1 effect là init để gọi khi mình muốn tải dữ liệu trước khi render

Với giá trị được trả về từ store.dispatch ở trên thường thì sẽ trả về undefined, còn việc lấy dữ liệu ra dùng là lấy từ state của ứng dụng thông qua Hocs connect. Trong trường hợp sau khi thực hiện xong effect init và có trả về dữ liệu gì thì sao, xét file model models/news.js

Sau khi log thử props ra thì kết quả là object được trả về sẽ được ghi vào trong props với key: value tương ứng, vậy ngoài việc đợi dispatch dữ liệu cập nhật vào store thì nó cũng sẽ ghi dữ liệu trả về vào props hiện tại mà không cần thông qua connect

Xem ứng dụng mẫu

Các bạn có thể tham khảo thêm ví dụ tại umi-ssr

Giới thiệu về UmiJS P1 (Tổng quan về umiJS)
Giới thiệu về UmiJS P2 (Cấu trúc thư mục, cấu hình thường dùng)
Giới thiệu về UmiJS P3 (Permission routing)

Nguồn: umiJS

You May Also Like

About the Author: truongluu

9 Comments

  1. Em gặp 1 lỗi với router của umi mong được a giải đáp:
    Lỗi của em như sau – Khi em build production đường dẫn chỉ tồn tại khi e k reload page còn nếu em đang ở 1 đường dẫn mà reload là nó sẽ hiện thị page 404 not found. :(((. E tìm tài liệu fix mà chưa có giải pháp . mong được a support

    1. Trường hợp này có 2 cách để làm nha em. Một là em chỉnh cấu hình history: ‘hash’ trong umi config (tức là lúc đó các link sẽ có thêm dấu ‘#’, 2 là e cấu hình server nhé em đang dùng (nginx hay apache sẽ có cách cấu hình khác nhau à)

  2. a cho e hỏi là :
    Em có 1 thư mục html là landing page có sử dụng query và css thì làm sao để e import nó vào được umi vậy ạ ?
    Mong nhận được sự giúp đỡ của a

Leave a Reply

Your email address will not be published. Required fields are marked *