ホームページ > 記事 > ウェブフロントエンド > Vue3のSSR機能の詳細解説：サーバーサイドレンダリングの実装
Vue3のSSR機能の詳細解説：サーバーサイドレンダリングの実装
- WBOYオリジナル
- 2023-06-18 09:04:085501ブラウズ
フロントエンド テクノロジーの継続的な開発に伴い、ページの応答速度を向上させ、SEO 効果を向上させるためにサーバーサイド レンダリング (SSR) を使用しようとする Web サイトが増えています。現在最も人気のあるフロントエンド フレームワークの 1 つである Vue3 の最新バージョンでは SSR が完全にサポートされており、この記事では Vue3 の SSR 機能について詳細な分析と説明を提供します。
1.SSRとは何ですか？
Vue3 に SSR 機能を正式に導入する前に、まずサーバーサイド レンダリング (SSR) とは何かを理解する必要があります。簡単に言うと、SSR はサーバー側で Vue コンポーネントを HTML 文字列にレンダリングし、その HTML 文字列を表示のためにブラウザに送信します。従来のクライアントサイド レンダリング (CSR) 方法と比較して、SSR はファースト スクリーン レンダリングの速度を向上させ、SEO 効果とユーザー エクスペリエンスを向上させることができます。
2. Vue3 の SSR 関数
Vue3 は、createSSRApp、createRenderer、renderToString などの SSR 用の関数セットを提供します。
- createSSRApp
createSSRApp は、Vue3 で SSR アプリケーションを作成するために特に使用される関数です。 createApp との違いは、この関数がサーバーに関連するアプリケーション インスタンスを返すこと、およびこのアプリケーション インスタンスを作成するときに、いわゆるコンテキスト コンテキスト オブジェクトを導入する必要があることです。このオブジェクトには、ページ URL、リクエストなどのレンダリング関連のコンテンツが含まれます。ヘッダーなど
- createRenderer
createRenderer はレンダラーの作成に使用される関数で、RenderOptions オブジェクトであるパラメーターを受け入れることができます。このオブジェクトは、開始時にアプリケーション インスタンスを渡すことや、さまざまな種類の vnode をそれぞれ処理する方法など、レンダラーの関連構成をカプセル化します。
- renderToString
renderToString は、この SSR アプリケーションに対応するレンダリング関数です。この関数はパラメータとして 1 つの Vue アプリケーション インスタンスのみを受け入れます。複数のアプリケーション インスタンスをレンダリングする場合は、それらを順番に呼び出す必要があります。この関数の戻り値は、レンダリングされた結果文字列です。
3. サーバーサイド レンダリングの実装
上記の 3 つの関数は、Vue3 で SSR をサポートするために使用されるコア関数です。次に、簡単な例を使用して、これらを使用して実装する方法を示します。サーバー側のレンダリング。
次のような単純な Vue コンポーネントがあると仮定します:
<template>
<div>
{{ message }}
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vue3 SSR!'
}
}
}
</script>最初にエントリ ファイルを変更し、createSSRApp 関数を使用してアプリケーション インスタンスを作成する必要があります:
import { createSSRApp } from 'vue'
import App from './App.vue'
export function createApp() {
const app = createSSRApp(App)
return { app }
}次に、Vue インスタンスをレンダリングするレンダラーを作成する必要があります。
import { createRenderer } from 'vue'
import { createMemoryHistory, createRouter, RouterView } from 'vue-router'
import { renderToString } from '@vue/server-renderer'
import { createApp } from './main'
const renderer = createRenderer({
history: createMemoryHistory(),
renderOptions: {
head: `
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
`
}
})
const router = createRouter({
history: createMemoryHistory(),
routes: [{ path: '/', component: RouterView }]
})
async function render() {
const { app } = await createApp()
const html = await renderer.renderToString(router)
return `<html><body>${html}</body></html>`
}vue-server-renderer に createRenderer 関数を導入し、ルーター インスタンスを作成しました。次に、サーバー側でレンダリングされる HTML 文字列データがクライアント側でレンダリングされるときと同じであることを確認するために、App.vue ファイルにデータを事前に入力する必要があります。サーバー側でリクエストを行うときに、以前にレンダリングされた結果をページに書き込み、それをレンダリングのためにクライアントに渡すことができます。
import { createSSRApp } from 'vue'
import App from './App.vue'
export function createApp() {
const app = createSSRApp(App)
const initialState = window.__INITIAL_STATE__
if (initialState) {
app.$data = initialState
}
return { app }
}最後に、レンダリングされた HTML 文字列をクライアントに返します。
import express from 'express'
import { render } from './server'
const app = express()
app.get('*', async (req, res) => {
const html = await render(req.url)
res.send(html)
})
const PORT = 3000
app.listen(PORT, () => {
console.log(`Server running at http://localhost:${PORT}`)
})上記は、Vue3 サーバーサイド レンダリングの簡単な実装例です。
4. 概要
この記事では、Vue3 の SSR 関数を紹介し、簡単な例を使用してこれらの関数を使用してサーバーサイド レンダリングを実装する方法を紹介します。この記事の導入により、読者はすでに Vue3 の SSR 関数をより明確に理解し、それを使用して独自のサーバーサイド レンダリング アプリケーションを実装できるようになると思います。
以上がVue3のSSR機能の詳細解説：サーバーサイドレンダリングの実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。