Chào mừng độc giả của Cafedev! Trong bài viết này, chúng ta sẽ khám phá về Server Side Rendering (SSR) trong Vuejs Pinia. SSR là một phần quan trọng của việc xây dựng ứng dụng web hiệu quả, và Pinia là một công cụ mạnh mẽ để làm việc với SSR trong Vuejs. Hãy cùng tìm hiểu về cách sử dụng SSR và những lợi ích mà nó mang lại cho ứng dụng của bạn. Hãy bắt đầu khám phá ngay!
Lưu ý: Nếu bạn đang sử dụng Nuxt.js, bạn cần đọc các hướng dẫn này thay vì phần dưới đây.
Tạo các store với Pinia sẽ hoạt động trên Server Side Rendering (SSR) ngay từ đầu miễn là bạn gọi các hàm useStore() ở đầu các hàm setup, getters và actions
<script setup>
// this works because pinia knows what application is running inside of
// `setup`
const main = useMainStore()
</script>Nội dung chính
1. Sử dụng store bên ngoài setup()
Nếu bạn cần sử dụng store ở một nơi khác, bạn cần truyền đối tượng pinia đã được truyền vào ứng dụng vào cuộc gọi hàm useStore():
const pinia = createPinia()
const app = createApp(App)
app.use(router)
app.use(pinia)
router.beforeEach((to) => {
// ✅ This will work make sure the correct store is used for the
// current running app
const main = useMainStore(pinia)
if (to.meta.requiresAuth && !main.isLoggedIn) return '/login'
})Pinia tự động thêm $pinia vào ứng dụng của bạn để bạn có thể sử dụng trong các hàm như serverPrefetch():
export default {
serverPrefetch() {
const store = useStore(this.$pinia)
},
}Lưu ý rằng bạn không cần làm gì đặc biệt khi sử dụng onServerPrefetch():
<script setup>
const store = useStore()
onServerPrefetch(async () => {
// ✅ this will work
await store.fetchData()
})
</script>2. Hydrat hóa state
Để hydrate state ban đầu, bạn cần đảm bảo rằng rootState được bao gồm ở đâu đó trong HTML để Pinia có thể nhận ra nó sau này. Tùy thuộc vào bạn đang sử dụng gì cho SSR, bạn nên thoát state vì lý do bảo mật. Chúng tôi khuyên bạn nên sử dụng @nuxt/devalue là một cách sử dụng bởi Nuxt.js:
import devalue from '@nuxt/devalue'
import { createPinia } from 'pinia'
// retrieve the rootState server side
const pinia = createPinia()
const app = createApp(App)
app.use(router)
app.use(pinia)
// after rendering the page, the root state is built and can be read directly
// on `pinia.state.value`.
// serialize, escape (VERY important if the content of the state can be changed
// by the user, which is almost always the case), and place it somewhere on
// the page, for example, as a global variable.
devalue(pinia.state.value)Tùy thuộc vào bạn đang sử dụng gì cho SSR, bạn sẽ thiết lập một biến initial state sẽ được serialize trong HTML. Bạn cũng nên tự bảo vệ chống lại các cuộc tấn công XSS. Bạn có thể sử dụng các phương pháp thay thế cho @nuxt/devalue tùy thuộc vào nhu cầu của bạn, ví dụ, nếu bạn có thể serialize và parse state của bạn bằng JSON.stringify()/JSON.parse(), bạn có thể cải thiện hiệu suất của mình rất nhiều.
Nếu bạn không sử dụng Nuxt, bạn sẽ cần tự xử lý việc serialize và hydrate state. Dưới đây là một số ví dụ:
Thích ứng chiến lược này với môi trường của bạn. Hãy đảm bảo hydrate trạng thái của Pinia trước khi gọi bất kỳ hàm useStore() nào trên phía client. Ví dụ, nếu chúng ta tuần tự hóa trạng thái thành một thẻ <script> để làm cho nó có thể truy cập toàn cầu trên phía client thông qua window.__pinia, chúng ta có thể viết như sau:
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
// `isClient` depends on the environment, e.g. on Nuxt it's `import.meta.client`
if (isClient) {
pinia.state.value = JSON.parse(window.__pinia)
}Trên đây là một cái nhìn tổng quan về Server Side Rendering (SSR) trong Vuejs Pinia. Như bạn đã thấy, việc sử dụng SSR có thể mang lại nhiều lợi ích cho ứng dụng Vue của bạn, đặc biệt là khi kết hợp với Pinia. Bằng cách này, Cafedev có thể tận dụng sức mạnh của SSR để tạo ra các ứng dụng web mạnh mẽ, linh hoạt và hiệu quả. Hãy bắt đầu áp dụng SSR vào dự án của bạn ngay hôm nay để tận hưởng những lợi ích mà nó mang lại!
Tham khảo thêm: MIỄN PHÍ 100% | Series tự học Vuejs từ cơ bản tới nâng cao
Các nguồn kiến thức MIỄN PHÍ VÔ GIÁ từ cafedev tại đây
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của CafeDev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
- Vitesse template
- vite-plugin-ssr
const pinia = createPinia() const app = createApp(App) app.use(pinia) // `isClient` depends on the environment, e.g. on Nuxt it's `import.meta.client` if (isClient) { pinia.state.value = JSON.parse(window.__pinia) }
