Vài năm gần đây Single Page Application(SPA) là một cái tên đang nổi trong xu hướng phát triển web. Mặc dù concept này đã ra đời hơn chục năm nay và cũng không ít website đã áp dụng kỹ thuật này. Việc sử dụng SPA sẽ rất hiệu quả và tiết kiệm về băng thông, cũng như cho trải nghiệm người dùng tốt hơn.
Mọi thứ có vẻ rất OK cho đến khi chúng ta động đến SEO. Thôi xong, toang rồi @@. Những vấn đề tưởng chừng rất đơn giản đối với Multiple Page Applications từ việc: response status code, redirect, meta data, data structure,… ác mộng đến thật rồi L
Để giải quyết được vấn đề này các Frontend Framework đã mang đến cho sản phẩm của mình một định nghĩa đó là Server Side Rendering. Cụ thể trong Angular thì có (Angular Universal), VueJS thì có (Nuxt.js).
Trong bài viết này mình sẽ hướng dẫn cách bạn cách Server Side Rendering trong ứng dụng Angular
Bước 1: Tạo một project cơ bản với Angular
- Ta sẽ sử dụng Angular CLI bằng cách cài đặt thông qua NPM của NodeJS:
npm install -g @angular/cli
- Sau khi cài đặt xong ta gõ lệnh để biết được cli của angular gồm những cái gì:
ng help
- Tiếp theo ta gõ lệnh sau để tạo một project. Mình đặt tên project là tuananhzippy. Các bạn có thể đổi lại nhé:
ng new tuananhzippy
- Nhìn trên command line các bạn sẽ thấy các file: angular.json, tsconfig.json, main.ts, app.module.ts, … nhiều lắm. Các bạn tìm hiểu về Angular chắc biết hết những file này rồi 😀
- Tiếp theo ta cd vào thư mục tuananhzippy để chạy project:
cd tuananhzippy ng serve --open
- Và đây là thành quả 😀 Dễ quá phải không nào. Các bạn chờ tí Trình duyệt sẽ tự bật lên. Ôi bất ngờ chưa?
Bước 2: Build ứng dụng Angular chạy trên môi trường Production
Trong file angular.json các bạn để ý với key là build ta sẽ thấy có một object outputPath đây chính là đường dẫn sau khi build xong, mình sẽ đem cái này đi deploy lên server. Giờ thì build nhé:
ng build –prod
Ta sẽ thấy một thư mục xuất hiện là build/ đây là thành quả:
Nội dung trong file index.html vô cùng ngắn gọn và xúc tích, ơ sao view-source mà không thấy ảnh Angular đâu ? Mấy cái Link kia đâu rôi ? Sao không thấy ?
Để trả lời cho câu hỏi trên thì đó là ưu điểm của SPA. Cho nên khi bạn viewsource lên sẽ không có gì đâu. Vấn đề ở đây là khi các search engine như Google, Yahoo, Bing sẽ không index được nội dung của website chúng ta. Ý tưởng là ta sẽ prerender cho những search engine này thôi, còn lại người dùng bình thường thì vẫn dùng Client-Side Rendering.
Vậy câu hỏi đặt ra là mình làm sao để phân biệt giữa BOT và Client. Chắc chỉ có 1 cái để phân biệt thôi đó chính là User-Agent. Có hướng rồi giờ tiếp tục nhé
Bước 3: Server Side Rendering
Có ba lí do chính để SSR:
- Hỗ trợ các công cụ crawl, tối hưu hóa bộ máy tìm kiếm (SEO)
- Cải thiện hiệu suất đối với các ứng dụng cấu hình thấp. Vì CSR sử dụng tài nguyên ở máy để render nên đối với các máy cấu hình thấp thì quả đúng là thảm họa.
- Hiển thị trang đầu tiên nhanh chóng. SPA được tách ra làm các component, vì vậy chúng ta sẽ thấy các khối được load ra từ từ.
Trong cửa sổ command line bạn vừa chạy lệnh ng build –prod thì bây giờ bạn tiếp tục chạy lệnh này để add các file cần thiết cho SSR. Tên project bạn đặt là gì thì sửa lại tương ứng nhé:
ng add @nguniversal/express-engine --clientProject tuananhzippy
CREATE, UPDATE src/main.server.ts, src/app/app.server.module.ts, angular.json: Cái này các bạn tự tìm hiểu thêm nhé!
CREATE src/tsconfig.server.json: cái này báo cho trình biên dịch Angular nơi tìm mô-đun nhập cho ứng dụng Universal.
CREATE webpack.server.config.js: file cấu hình của Webpack, nó sẽ đi bundle hết những thứ ở trong file server.ts
CREATE server.ts: file này mới quan trọng, nó chính là tiền thân để chạy Server Side, các bạn mở thử sẽ thấy toàn code của thằng express thôi à. À mặc định khi server run nó chạy cổng 4000 nhé, bạn có thể sửa lại. Tạm thế đã, tí mình quay lại chỉnh sửa file này sau.
UPDATE package.json: cập nhật lại scripts và dependencies, nó thêm vài package trong đó rất quen thuộc đó là Express. Các bạn code NodeJS chắc ai cũng dùng qua Framework này rồi đúng không 😀 Cá nhân mình thì vẫn thích thằng AdonisJS hơn. Hehe vì nó giống Laravel.
UPDATE src/main.ts: file này đã được thay đổi để trình duyệt của ứng dụng sẽ không bắt đầu cho đến khi các trang được load đầy đủ
UPDATE src/app/app.module.ts: đây là mô-đun gốc chỉ dành cho phiên bản máy chủ. Bạn có thể thấy nó nhập AppModule của chún, cũng như ServerModule từ @angular/platform-server và bootstraps cùng AppComponent as AppModule. AppServerModule là điểm vào của ứng dụng Universal.
Tiếp tục ta chạy lệnh sau để build và chạy server side luôn. Trong command line sử dụng nhiều lệnh trên 1 command ta dùng dấu && nhé.
npm run build:ssr && npm run serve:ssr
Giải thích thêm một chút nhé. Các bạn mở file package.json lên tìm key là scripts:
- npm run build:ssr à thì npm sẽ chạy 2 lệnh này: npm run build:client-and-server-bundles && npm run compile:server. Trong khi đó build:client-and-server-bundles thì nó lại chạy tiếp 2 lệnh này: ng build –prod && ng run tuananhzippy:server:production
- npm run serve:ssr à npm sẽ chạy lệnh node dist/server để start server lên.
Trộm vía build không bị lỗi gì, hêhe. Giờ ta mở trình duyệt và truy cập đường dẫn localhost:4200 thôi:
Viewsources lên xem thử nhé. Ôi cái máng lợn ngày xưa đây rồi…
HTML đây rồi, giờ thì SEO với Crawl thoải mái nhé.
Ơ cơ mà quanh đi quẩn lại thì lại về Server Side Rendering thế này thì ngay từ ban đầu ta chọn một Server Framework đi, chọn Frontend Framework làm gì để rồi lại về như cũ L Bây giờ mình thiết nghĩ SSR mình sẽ phục vụ cho mấy ông BOT đi crawl thôi. Còn client thì CSR cho nhàn, trải nghiệm lại tốt, tốc độ load trang nhanh như tụt quần:
Cùng phân tích nhé. Server sẽ được khởi tạo và chạy bởi file server.ts cổng 4000. Giờ mình sửa lại file này một chút nhé:
Vấn đề ở đây: mọi đường dẫn khi client truy cập sẽ đều trả về file index.html nhưng thông qua hàm render, trong hàm này sẽ load hết dữ liệu từ các component rồi trả về 1 file HTML nặng vãi đái.
Mình sẽ if đoạn này, nếu User-Agent là BOT thì mình mới gọi vào hàm render còn không mình sendFile về luôn, khỏi làm gì cho mất công. Vừa giải quyết được vấn đề Crawl data, vừa giữ được sự tinh túy trong SPA.
Mình định nghĩa ra 1 mảng các UserAgent áp dụng SSR. Sau đó mình check nếu thỏa mãn thì mình render còn không thì mình sendFile.
Vậy là xong, cơ mà vẫn còn một đống vấn đề khi ta chạy trên môi trường production đấy. Cụ thể như sau:
Trả về statusCode là 404 nếu trang không tồn tại, rồi 301 nếu là trang Redirect. Mấy cái này tưởng chừng như đơn giản nhưng lại rất phức tạp vì SPA toàn response statusCode là 200 thôi. Coi như là bài tập về nhà. Các bạn cùng nghĩ thử xem nhé.
Cảm ơn các bạn đã đọc đến cuối bài viết! Xin chào và hẹn gặp lại…
Tham khảo
https://angular.io/guide/universal
https://alligator.io/angular/angular-universal/
(3 lượt thả tim)
Loading...
