Nuxt.js là gì, có gì khác với Vue.js

kienphan -

Có 1 ngày đẹp trời, KH yêu cầu bạn làm 1 single web app, và không có mô tả kỹ thuật gì cụ thể. Và bạn đã tìm đến VueJs như 1 công cụ mới để thử thách, hot trend sánh ngang tầm với React, Angular.

Sắp kết thúc dự án, ngài KH nhận thấy có gì đó thiếu thiếu, như thế này ko SEO được, làm thế nào bây giờ? Đã có 2 phương án được đề ra:

  • Server Side Rendering (SSR): Dữ liệu render từ phía server. Dùng cách này thì khi googlebot crawl đến link nào từ trang web sẽ đọc được content từ trang web đầy đủ.
  • Prerender: giống như tên gọi, với cách này, phía server sẽ giả lập ra trình duyệt để render page trước rồi mới trả về kết quả đến end user

Sau cùng, khi cân nhắc chi phí, KH đã chọn cách 2 với prerender.io. Tuy nhiên, nếu yêu cầu rõ ràng từ ban đầu, thì có lẽ ta nên chọn cách là SSR với framework NuxtJS

NuxtJS là gì vậy?

Theo định nghĩa trên trang chủ:

Nuxt.js is a framework for creating Vue.js applications, you can choose between Universal, Static Generated or Single Page application.

NuxtJS được tạo ra bởi Để tạo ra Universal App, tương tự như NextJS bên React, để code ứng dụng với mã nguồn chạy ở cả server và client.

Như tiêu đề bài viết thì mình sẽ không tìm hiểu kĩ các khái niệm mà sẽ đi tìm xem có gì khác biệt so với VueJS không, từ đấy đưa ra kết luận xem sẽ sử dụng trong hoàn cảnh nào trong tương lai.

Cài đặt

Hướng dẫn cài đặt ở đây

  • Do có liên quan đến server, nên để cài đặt Nuxtjs, ta phải dùng npm, so với Vuejs còn có thể cài bằng import script tag từ CDN hay download script

Thành phần

  • NuxtJS đã bao gồm vue-router, vuex, vue-meta, có thể coi như là 1 framework, nếu sử dụng create-nuxt-app để generate starter template thì đã bao gồm nuxt.config, mở rộng từ webpack config luôn, rất tiện. VueJS như đã nói có thể import script tag, muốn sử dụng thêm các thành phần nào thì sẽ phải cài thêm vào

Routing

  • nuxt-link thay cho router-link
<template>
  <nuxt-link to="/">Home page</nuxt-link>
</template>
  • Nuxtjs đã có sẵn VueRouter và router được sinh ra tự động. Nếu như khi dùng vue-router với Vuejs ta định nghĩa thủ công thì với NuxtJS thì route tự động sinh ra theo convention.

Với các file ở phía dưới folder pages

pages/
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue
--| index.vue

Sẽ sinh ra các route tự động như sau

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'users-id',
      path: '/users/:id?',
      component: 'pages/users/_id.vue'
    },
    {
      name: 'slug',
      path: '/:slug',
      component: 'pages/_slug/index.vue'
    },
    {
      name: 'slug-comments',
      path: '/:slug/comments',
      component: 'pages/_slug/comments.vue'
    }
  ]
}

Chi tiết hơn về Nuxt routing tại đây

Store

Giống như Router, NuxtJs cũng tích hợp sẵn vuex để lưu giữ trạng thái data của ứng dụng, và công việc của mình cũng chỉ là tạo file định nghĩa trong folder store.

Nuxt.js tự động tìm trong folder store và nếu có file định nghĩa store nào, nó sẽ thực hiện các bước sau tự động:

  • Import Vuex
  • Tự thêm option store vào Root Vue instance.

Vue Meta

NuxtJs có sẵn vue-meta để update headers và các thuộc tính html của ứng dụng, như để thay đổi các thuộc tính meta trong thẻ head của từng page mỗi khi chuyển trang để tối ưu SEO

Server Side Rendering

Dĩ nhiên đây là tính năng quan trọng khi nhắc về NuxtJs. Ngoài ra NuxtJs cũng có mode spa để trở thành Single Page App đơn thuần như Vuejs App.
Để hiểu Server Side Rendering 1 cách đơn giản, ta click chuột phải chọn View Page Source, sẽ thấy trả về tất cả nguồn trang đầy đủ. Ngược lại với VueJs App chỉ là 1 cây Html với thẻ body rỗng.

Kết luận

Với sự hay ho nói trên, sử dụng NuxtJs trong tương lai thay cho Vuejs dù cho là develop Single Page App cũng hợp lý, tích hợp nhiều công cụ sẵn như vue-route, vuex đơn giản đi nhiều bước cài đặt.