Site icon Bệ Phóng Việt

Xây dựng ứng dụng web VueJS hiệu suất tối ưu hóa nhờ Server-side rendering (SSR) với NuxtJS

jphopeblog
VueJS
Advertisements

I. Giới thiệu về Server-side rendering (SSR)

Server-side rendering (SSR) là một kỹ thuật nhằm tối ưu hóa thời gian tải ban đầu và tăng cường khả năng tìm kiếm trên công cụ tìm kiếm (SEO) của các ứng dụng web. SSR được thực hiện bằng cách đưa phần lớn các công việc của javascript từ browser lên server.

SSR trực tiếp khác biệt với client-side rendering (CSR) là cách thường thấy để hoạt động ReactJS và VueJS trên trình duyệt. Với CSR, các file HTML sẽ được gọi tới từ server thông qua server API trước khi được render trên trang web, dẫn đến thời gian tải ban đầu và thời gian đáp ứng chậm hơn.

Tuy nhiên, với SSR, chúng ta render các trang trên server trước khi chuyển đến trình duyệt của người dùng. Vì vậy, người dùng sẽ nhận được một trang đã hoàn chỉnh sẵn sàng để sử dụng và tải trang nhanh hơn so với CSR.

II. Công cụ để xây dựng SSR

VueJS là một framework phổ biến cho đến hiện tại. VueJS cung cấp Vue.js Server Renderer để giúp xây dựng SSR dễ dàng hơn.

Ngoài ra, NuxtJS cũng là một framework được dựa trên VueJS để xây dựng SSR. NuxtJS cung cấp các tùy chọn thiết lập và cấu trúc phù hợp để xây dựng SSR dễ dàng hơn.

Trong ứng dụng của chúng ta, chúng ta sử dụng NuxtJS để xây dựng SSR.

III. Cài đặt

Đầu tiên, bạn cần cài đặt NodeJS và npm để có thể sử dụng NuxtJS. Bạn có thể tải xuống và cài đặt NodeJS và npm tại đây: https://nodejs.org/en/.

Sau khi đã cài đặt NodeJS, bạn cũng có thể cài đặt NuxtJS thông qua NPM:

npm install --global nuxt

IV. Cấu trúc thư mục

Khi sử dụng NuxtJS, ứng dụng của chúng ta sẽ có cấu trúc thư mục như sau:

|- .nuxt
|- assets
|- components
|- layouts
|- middleware
|- pages
|- plugins
|- static
|- store
|- nuxt.config.js
|- package.json
|- package-lock.json

Để biết thêm chi tiết về cấu trúc thư mục, bạn có thể đọc thêm tại đây: https://nuxtjs.org/docs/2.x/directory-structure/nuxt.

V. Xây dựng SSR với NuxtJS

Để xây dựng SSR với NuxtJS, bạn cần bắt đầu bằng cách tạo một trang đơn giản. Bạn có thể tạo một trang mới bằng cách tạo một file trong thư mục `pages`. Ví dụ, để tạo một file `/pages/index.vue`, bạn có thể sử dụng nội dung sau đây:

<template></template>
<div>
  <h1>Hello, World!</h1>
</div>
<script>
export default {
  name: 'index'
}
</script>

Sau khi tạo trang, bạn có thể chạy ứng dụng bằng câu lệnh sau:

nuxt

Sau khi chạy, NuxtJS sẽ tạo ra tất cả các tệp cần thiết và server trên `localhost:3000`. Bạn có thể mở trình duyệt của mình và truy cập đến http://localhost:3000 để xem trang của mình.

Nếu bạn muốn sử dụng SSR trong ứng dụng của mình, bạn có thể thêm cấu hình trong file `nuxt.config.js`. Ví dụ, để bật SSR, bạn có thể thêm cấu hình sau đây:

export default {
  mode: 'universal',
  ...
}

Sau khi đã cấu hình xong, bạn có thể chạy ứng dụng và truy cập đến trang của mình để kiểm tra.

Tuy nhiên, trong quá trình phát triển ứng dụng, bạn sẽ cần tương tác với các API hoặc dịch vụ trên server. Để làm điều này, bạn cần sử dụng các middleware.

Ví dụ, để tạo middleware, bạn có thể tạo một file mới trong thư mục `middleware`. Ví dụ: `/middleware/validate-auth.js`.

export default ({ req, res, error }) => {
  if (!req.isAuthenticated()) {
    error({
      statusCode: 403,
      message: 'Unauthorized'
    })
  }
}

Sau đó, bạn có thể áp dụng middleware này cho một trang bằng cách sử dụng thuộc tính `middleware` như sau:

export default {
  middleware: ['validate-auth']
}

VI. Tối ưu hóa ứng dụng của bạn

Cuối cùng, để tối ưu hóa ứng dụng của bạn, bạn cần thực hiện một số cấu hình trong `nuxt.config.js`.

1. Compression

Bằng cách sử dụng middleware `compression`, bạn có thể nén các phản hồi trước khi trả về cho client. Điều này giúp giảm thời gian tải trang.

export default {
serverMiddleware: ['compression'],
...
}

2. Cache

Bạn có thể sử dụng `lru-cache` để lưu trữ các phản hồi và trả về chúng nhanh hơn trong lần lượt làm việc sau đó. Điều này giúp giảm thời gian phản hồi và tăng tốc độ tải trang.

“`javascript

import LRU from 'lru-cache'

const cache = new LRU({
  max: 100,
  maxAge: 1000 * 60 * 15 // 15 minutes
})

export default {
  render: {
    static: {
      maxAge: 1000 * 60 * 60 * 24 * 7 // 7 days
    }
  },
  hooks: {
    render: {
      before ({ nuxtState }) {
        const host = process.client ? window.location.host : nuxtState.req.headers.host
        const key = `${host}${nuxtState.url}`

        if (cache.has(key)) {
          nuxtState.rendered = cache.get(key)
          return cache.get(key)
        }
      },
      after ({ nuxtState }) {
        if (nuxtState.rendered) {
          const host = process.client ? window.location.host : nuxtState.req.headers.host
          const key = `${host}${nuxtState.url}`
          cache.set(key, nuxtState.rendered)
        }
      }
    }
  }
}

VII. Kết luận

Với Server-side rendering (SSR), chúng ta có thể nâng cao hiệu suất và khả năng tìm kiếm trên công cụ tìm kiếm của ứng dụng của chúng ta. NuxtJS là một trong những công cụ giúp xây dựng SSR hiệu quả và dễ dàng nhất cho ứng dụng của bạn.

Chúng ta đã tìm hiểu cách thêm SSR vào ứng dụng VueJS của mình bằng cách sử dụng NuxtJS và cấu hình cần thiết để tối ưu hóa cho ứng dụng của chúng ta. Hy vọng rằng bài viết này sẽ giúp cho việc phát triển ứng dụng của bạn dễ dàng hơn và có hiệu quả tốt hơn.

Kỹ năng tiếp theo trong Tốp 10: Xây dựng cấu trúc điều hướng phức tạp trong VueJS với Router nâng cao

Xem top 10 kỹ năng VueJS: Vuejs dev phải biết 10 kỹ năng nâng cao này nếu muốn thành senior

Exit mobile version