Menu
Giới thiệu
Hiện nay, ba framework javascript được sử dụng phổ biến nhất được biết đến là Angular, React và Vue. Các framework kể trên được coi là vũ khí hạng nặng của Front-end Developer. Trong đó, React và Vue chủ yếu làm Client Side Rendering ( CSR ), tuy nhiên trong các dự án thực tế cần sử dụng đến cả Server Side Render ( SSR ) để phục vụ những nhu cầu riêng.
Dựa vào sự phổ biến của Vue, Nuxt.js ra đời để tạo các ứng dụng Universal Vue.js. Nuxt.js có rất nhiều tính năng giúp phát triển giữa phía client và server như dữ liệu bất đồng bộ (Asynchronous Data), Middleware, Layouts, …
Tại sao nên sử dụng NuxtJS ?
Làm thế nào để kết hợp và cấu hình các thư viện JavaScript với Vue.js để hoạt động một cách hiệu quả?
Cấu trúc và đặt tên các thư mục trong dự án Vue như thế nào cho hợp lý?
Làm cách nào để đảm bảo website được index chính xác bởi các công cụ tìm kiếm (Google, Bing, …)?
Làm cách nào để tối ưu hóa tốc độ tải trang?
NuxtJS giải quyết được hết những vấn đề trên, vậy thì nên sử dụng nó chứ ?
Cơ chế hoạt động
Khi có request đến server hoặc khi user bấm vào link thông qua <nuxt-link> thì nuxt.js sẽ hoạt động theo sơ đồ sau:
Cấu trúc thư mục
Đối với thư mục Vue khi ban đầu khởi tạo, framework chỉ cung cấp cho ta 2 folder chính là asset và components. Để xây dựng lên một dự án hoàn chỉnh có các thư mục như layouts, router, plugin, middleware đều phải tự config thủ công.
Đối với Nuxtjs, các folder và file cấu hình đã được định nghĩa và mang chức năng riêng biệt.
Assets : chứa những tài nguyên chưa được biên dịch như là LESS, SASS, …
Components: chứa các component có thể tái sử dụng
Layouts: chứa các layout template, để các page extend
Middleware: chứa các middleware của ứng dụng, cho phép định nghĩa các function được chạy trước khi render 1 page hoặc 1 group page
Pages: chứa các view của ứng dụng cũng như định nghĩa routes cho ứng dụng luôn ( đây là một trong những phần đặc biệt của routing, chúng ta sẽ tìm hiểu kỹ hơn ở bên dưới )
Plugins: chứa các javascript plugins
Static: chứa các file tĩnh của hệ thống như các file ảnh, icon, … và được map tự động, ví dụ file /static/logo.png sẽ là yoursite/logo.png
Store: chứa các file của Vuex Store
nuxt.config.js: file cấu hình, chứa các cấu hình được thiết đặt chung cho cả ứng dụng, tất cả các config của trang web đều được đặt ở đây
package.json: chứa các dependencies và scripts ( file này thì quá quen thuộc rồi )
Đôi điều về routing
NuxtJS sẽ tự động sinh ra route theo định nghĩa cấu trúc file mà ta tạo ra trong thư mục pages
Ví dụ, nếu cấu trúc thư mục trong pages như này:
Thì nuxt sẽ tự động tạo ra file config route như thế này:
Thay vì mình phải tạo ra file config cho route đối với project Vue, thì ở nuxt chúng ta chỉ cần tạo cây thư mục trong thư mục pages.
Để định nghĩa 1 router với tham số. Thì cần đặt tên thư mục hoặc tên file .vue với tiền tố gạch dưới “_”
Ví dụ, cấu trúc cây thư mục trong Pages như sau:
Thì nó sẽ tự động generate route như sau:
7 vấn đề được cải thiện so với VueJS
1. Mất nhiều thời gian để xây dựng từ đầu một ứng dụng Vue hoàn chỉnh
Với một ứng dụng Vue hoàn chỉnh thì sẽ cần phải cài đặt các thư viện Vue đi kèm như Vuex, Vue Router, Vue Meta, … . Khá là lằng nhằng và mất thời gian, trong khi ta lại muốn bắt tay vào làm các components và các chức năng cho ứng dụng luôn. Tuy nhiên, khi dùng Nuxt thì mặc định các thư viện cần thiết để xây dựng một ứng dụng Vue hoàn chỉnh sẽ được thêm vào. Ngoài ra, Nuxt không chỉ được cấu hình sẵn với Vuex, Vue Router và Vue Meta, mà nó còn thiết lập dự án của ta với các tuỳ chọn mặc định thông minh dựa trên các thực tiễn tốt nhất được nghiên cứu kỹ lưỡng mà Vue giành cho.
2. Không có cấu trúc thư mục rõ ràng và hợp lý
Khi ứng dụng Vue phát triển thì cấu trúc mã nguồn lại càng được chú trọng hơn. Điều đó là hiển nhiên, vì sẽ có hàng tá các file code lớn nhỏ được sinh ra mà ta lại không có một cấu trúc thư mục rõ ràng thì dự án sẽ trở nên rối rắm và khó bảo trì hơn. Và Nuxt đã giải quyết vấn đề này rất tốt, nó có một cấu trúc rất rõ ràng và dễ hiểu ngay cả với những người vừa mới sử dụng Nuxt.
Khi cài đặt Vue với công cụ Vue CLI thì Vue sẽ cung cấp 2 thư mục là assets và components, tuy nhiên với Nuxt thì nó còn cung cấp nhiều hơn thế nữa, chẳng hạn như:
- Thư mục Pages: nơi chứa các Application Views và Routes. Mỗi file .vue sẽ tương ứng với một router.
- Thư mục Layouts: nơi lưu trữ các Layout Templates. Nuxt sẽ sử dụng default.vue làm template mặc định.
- Thư mục Middleware: nơi chứa các Application Middleware. Middleware cho phép định nghĩa các functions sẽ chạy trước khi render ra page.
3. Việc cấu hình Routes sẽ khó khăn hơn khi ứng dụng Vue trở nên lớn dần
Khi ứng dụng Vue trở nên lớn dần thì phần code cấu hình Routes sẽ ngày càng dài hơn, đến một lúc nào đó sẽ thấy nó khó kiểm soát. Với Nuxt, đơn giản chỉ cần tạo các Vue Components trong thư mục pages, Nuxt sẽ tự động biên dịch thành các Routes mà không cần phải viết các đoạn cấu hình Route dài dòng.
Bạn có thể đọc lại phần “Đôi điều về routing” bên trên, mình đã ví dụ rõ.
4. Không có một tiêu chuẩn chung để cấu hình mọi thứ cùng nhau
May mắn thay, Nuxt đã cung cấp cho chúng ta một file nuxt.config.js và ta có thể viết các đoạn code cấu hình vào trong file này:
5. Không thân thiện với SEO
Có thể ta sẽ muốn ứng dụng Vue được lập chỉ mục chính xác bởi các công cụ tìm kiếm để chúng có thể dễ dàng tìm ra. Nhưng đối với một Single-Page Application (SPA) thì làm thế nào để được các công cụ tìm kiếm lập chỉ mục trong khi dữ liệu trang web trống trơn và chỉ có các đường dẫn tới file JavaScript?
Trong trường hợp này giải pháp tốt nhất là sử dụng cơ chế Server-Side Rendering (SSR), cơ chế này sẽ cho phép các Vue pages trong ứng dụng được render trước trên server. Lúc này ứng dụng không còn được gọi là SPA nữa mà thay vào đó nó sẽ được gọi với cái tên là Universal Application (hay Isomorphic Application).
Tuy nhiên để tích hợp được cơ chế SSR vào một SPA thì sẽ tốn kha khá thời gian để đọc tài liệu và cài đặt. Nhưng với Nuxt thì mọi thứ trở nên rất đơn giản khi mà cơ chế SSR đã được tích hợp sẵn, đồng thời nó còn được kết hợp với một thư viện có tên là Vue Meta, nó sẽ tự động render ra các thẻ meta cần thiết để giúp website của ta trở nên tốt với SEO. Ngoài ra, còn có thể “bật/tắt” tính năng này dễ dàng chỉ với thao tác thay đổi thuộc tính mode trong file nuxt.config.js,
ví dụ:
module.exports = { mode: ‘universal’ }
Còn khi không muốn thì cũng rất đơn giản, thay universal thành spa là xong:
6. Tốc độ tải ban đầu của ứng dụng có thể bị chậm
Nếu ứng dụng Vue là một SPA thì khi tải lúc ban đầu, nó sẽ mất một khoảng thời gian để tải các file JavaScript rồi sau đấy mới render ra giao diện. Nhưng với Nuxt.js nếu chọn hiển thị ứng dụng như một Universal Application, thì ngay tại request đầu tiên các file HTML sẽ được khởi tạo trước trên server, sau khi tải xuống nó sẽ bắt đầu chạy như một SPA bình thường. Tính năng này sẽ khiến ứng dụng tải nhanh hơn trên trình duyệt. Ngoài ra, với tính năng code-splitting, nó chỉ tải các đoạn JavaScript cần thiết để thực hiện các chức năng định tuyến. Điều này làm cho trải nghiệm người dùng được tối ưu.
7. Khó thay đổi các hành vi nằm trong lõi của Vue
Khi ta đang phát triển các ứng dụng Vue ở cấp production, đến một lúc nào đó, ta sẽ cần phải thay đổi các hành vi nằm trong chính mã nguồn của Vue. Để thực hiện điều này, đòi hỏi ta cần có một kiến thức chuyên sâu về Vue.js cũng như cách thức hoạt động của một JavaScript Framework. Tuy nhiên, Nuxt đã cung cấp cho chúng ta một hệ thống modules cấp cao hơn giúp ta có thể dễ dàng tùy chỉnh mọi khía cạnh của Nuxt.
Kết thúc
Bài viết này mình chỉ giới thiệu cơ bản về NuxtJS, mong có thể chia sẻ tới anh em, nhất là các anh em đã và đang code Vue để có cơ hội thì anh em sẽ thử dùng xem sao.
Thanks!