Nếu bạn đang làm việc hoặc bắt đầu tìm hiểu về javascript thì chắc hẳn bạn cũng không còn quá xa lạ với những từ khóa "Angular, React, Vue, ..." rồi đúng không? Đó là ba framework/library javascript được sử dụng phổ biến nhất hiện nay. Nhưng React/Vue chủ yếu làm Client Side Rendering (CSR), tuy nhiên trong thực tế thì sẽ cần sử dụng đến Server Side Rendering (SSR), vì mục đích đó mà 2 framework Nuxt.js (sử dụng cho Vue) và Nextjs (sử dụng cho React) ra đời.

• Nếu bạn còn chưa biết CSR và SSR là gì thì cũng đừng lo, chúng ta sẽ cùng nhau tìm hiểu nhé.
• Nếu bạn thắc mắc tại sao bài này chỉ nói về Nuxt.js mà không phải Nextjs thì đơn giản là vì mình đang làm 1 dự án với Nuxt.js thì mình viết về nó thôi

Bắt đầu thôi nào!

• Về cơ bản thì cái tên cũng đã nói lên sự khác biệt giữa 2 cơ chế này rồi:

  • Server Side Rendering (SSR) là hầu hết logic từ đơn giản (validate, routing, render) đến phức tạp (phân quyền, xử lí dữ liệu, ...) sẽ được xử lí ở phía server, và server sẽ trả về dữ liệu để cho phía client hiển thị ra.
  • Còn đối với Client Side Rendering (CSR) thì sẽ xử lí phần lớn logic đơn giản (validate, routing, render) ở bên phía client, còn những xử lí logic phức tạp vẫn sẽ do server xử lí. Điều đầu tiên chúng ta thấy là cách này sẽ giúp giảm bớt phần xử lí của server hơn.

• Còn về ưu và nhược điểm của từng cái thì mình xin phép trích lại từ trang https://toidicodedao.com/2018/09/11/su-khac-biet-giua-server-side-rendering-va-client-side-rendering/ như sau:

• Trên đây là một số nội dung cơ bản về ưu nhược điểm của Server Side Rendering (SSR) và Client Side Rendering (CSR). Khi đã nắm được những nội dung này rồi thì chúng ta hãy cùng nhau tìm hiểu "nhân vật chính" của bài viết nhé!

1. Tổng quan về Nuxt.js:

• Khi đánh giá một repository trên github thì điều đầu tiên mình quan tâm chính là số stars, vì nó chính là sự công nhận, đánh giá của cộng đồng, và như các bạn có thể thấy là nuxt đang nhận được > 28.3k stars trên github, một con số rất đáng ngưỡng mộ

• Tiếp theo là số lượng người dùng và contributors cực kì đông đảo, bạn có thể yên tâm về việc có thể sử dụng lâu dài (vẫn liên tục được phát triển và sửa lỗi) và nhận được nhiều sự hỗ trợ với một cộng đồng người dùng lớn như thế này

• Nuxt.js được cài đặt bao gồm một số công cụ sau:

  • Vue 2
  • Vue Router
  • Vuex (được cài đặt khi sử dụng store)
  • Vue Server Renderer (sẽ được loại trừ nếu khi cài đặt bạn lựa chọn mode: 'spa')
  • Vue Meta

  theo như trang chủ của Nuxt.js thông báo thì tổng cộng dung lượng của tất cả những gói trên chỉ là 57kB (nếu có thêm Vuex thì sẽ lên "tận" 60kB), cực kì nhỏ gọn phải không nào!

2. Khởi tạo và cấu trúc thư mục của một project nuxtjs:

• Để khởi tạo một project nuxt, chúng ta sử dụng create-nuxt-app:

  # sử dụng npx (npx được cài đặt kèm với NPM từ phiên bản 5.2.0)
  $ npx create-nuxt-app <project-name> 
  # hoặc sử dụng yarn
  $ yarn create nuxt-app <project-name>
  

• Trong quá trình khởi tạo project, bạn sẽ phải khai báo một số thông tin như là tên, UI framework (Ant Design, Boostrap, Element, ...), ... cho project của bạn.

• Thư mục project sẽ có cấu trúc như sau:

• Sau khi khởi tạo project thành công thì bạn sử dụng câu lệnh npm run dev để chạy project bash npm run dev và bạn có thể truy cập thông qua đường dẫn http://localhost:3000

3. Một số chức năng cơ bản cần chú ý

• Routing: như đã nói ở phần 1, Nuxt.js đã bao gồm vue-router nên nó sẽ tự động sinh ra các router dựa trên cấu trúc thư mục pages trong project. Tức là bạn sẽ không cần phải khai báo router mà chỉ cần đặt tên file, cấu trúc thư mục theo 1 quy tắc nhất định thì sẽ tự động sinh ra router. Ví dụ như sau:

  • Basic route:

        pages/
        --| user/
        -----| index.vue
        -----| one.vue
        --| index.vue
    

    sẽ tự động sinh ra khai báo router như sau:

    router: {
      routes: [
        {
          name: 'index',
          path: '/',
          component: 'pages/index.vue'
        },
        {
          name: 'user',
          path: '/user',
          component: 'pages/user/index.vue'
        },
        {
          name: 'user-one',
          path: '/user/one',
          component: 'pages/user/one.vue'
        }
      ]
    }
    

  • Còn đối với Dynamic Route (tức là có truyền tham số vào router ví dụ như id, hashId) thì bạn chỉ cần đặt tên folder hoặc tên file bắt đầu bằng dấu _, ví dụ như là _id.vue hoặc _hashId.vue

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

    thì sẽ tự động sinh ra khai báo router như sau:

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

    Và do tham số truyền vào dynamic route này có thể là do người dùng truyền vào nên chúng ta sẽ cần validate nó theo đúng kiểu, format mà chúng ta muốn. (Sau 1 thời gian làm coder thì mình luôn nhớ rõ 1 câu ĐỪNG BAO GIỜ TIN TƯỞNG NGƯỜI DÙNG).

    Và Nuxt.js cũng cho phép chúng ta có thể viết hàm validate trong component. Các bạn có thể tham khảo thêm về validate trong Nuxt.js ở đây. Còn đây là ví dụ đơn giản validate id truyền vào phải là số.

    export default {
      validate ({ params }) {
        // Must be a number
        return /^\d+$/.test(params.id)
      }
    }
    

• Views:

  • Layout: layout là một khung bố cục chung cho các trang gần giống nhau (ví dụ như các trang thuộc phần quản trị của admin sẽ dùng chung 1 layout). Để sử dụng layout cho một page, bạn chỉ cần khai báo

    <script>
         export default {
           layout: 'LayoutName'
         }
    </script>
    

    Còn trong trường hợp bạn không khai báo layout thì Nuxt.js sẽ tự sử dụng layout mặc định tại layouts/default.vue.

    Hãy nhớ sử dụng component <nuxt/> trong layout để có thể load được nội dung của page nhé!

    <template>
        <nuxt/>
    </template>
    

  • Pages: được đặt trong thư mục pages, Nuxt.js sẽ đọc tất cả các file .vue và dựa theo cấu trúc thư mục này để sinh ra các route tương ứng với các trang của bạn. Và ở trong page, Nuxt.js cung cấp thêm một số attributes và functions đặc biệt để hỗ trợ cho công việc phát triển. Điển hình như:

    • head: chỉ định các <meta> tags cho page để hỗ trợ cho việc SEO.
    • asyncData: xử lý bất đồng bộ để nhận dữ liệu sử dụng cho page.
    • fetch: tương tự với asyncData, trừ việc nó sẽ không set component data.
    • validate: validate tham số được truyền vào trong dynamic route đã nói ở phần trên.
    • middleware: khai báo middleware để giới hạn xem user/guest có thể xem được trang. Và nó sẽ được gọi trước khi trang được render ra.

  • Error Page: Ngoài các page hiển thị thông thường, Error Page khi có lỗi (404, 500) xảy ra cũng là một phần cần chú ý để tạo ra dấu ấn riêng cho trang web của bạn. Ví dụ như trang 404 đáng yêu này chẳng hạn

• Vuex Store: Cái này chắc phải hẹn các bạn một bài viết riêng chứ không thể nói trong 1, 2 dòng trong bài viết này được.

• Một số câu lệnh thường dùng:

  Command	Description
  nuxt dev	start project kèm theo hot-reloading
  nuxt build	build project với webpack và minify các file JS, CSS
  nuxt export	sinh ra file HTML từ các route (sử dụng cho static hosting cho các phiên bản Nuxt >= 2.13)
  nuxt generate	build project và sinh ra file HTML từ các route (sử dụng cho static hosting phiên bản Nuxt >= 2.13)

• Sau khi đọc xong bài viết này, hi vọng rằng các bạn đã có thể nắm được khái niệm Server Side Rendering (SSR) và Client Side Rendering (CSR) từ đó lựa chọn được cơ chế phù hợp cho project của các bạn. Ngoài ra, trong phạm vi của bài viết, mình chỉ có thể tóm lược một số nội dung cơ bản khi bắt đầu tìm hiểu về nuxt, nếu muốn tìm hiểu sâu hơn thì các bạn có thể tham khảo thêm ở https://nuxtjs.org/ hoặc đón đọc những bài viết tiếp theo của mình về chủ đề này nhé.
• Cảm ơn các bạn đã dành thời gian đọc bài viết, nếu thấy nội dung bài viết hay và hữu ích, hãy upvote và clip bài viết ủng hộ mình nhé, còn nếu có vấn đề gì chưa ổn (kiến thức, cách diễn đạt, ...) thì hãy comment góp ý xuống phía dưới để mình có thể cải thiện và viết được những bài viết chất lượng hơn nhé.

• Homepage: https://nuxtjs.org/
• Github: https://github.com/nuxt/nuxt.js
• https://www.google.com/
• So sánh về CSR và SSR: https://toidicodedao.com/2018/09/11/su-khac-biet-giua-server-side-rendering-va-client-side-rendering/