Vue3의 SSR 기능에 대한 자세한 설명: 서버 측 렌더링 구현-View.js-php.cn

Vue3의 SSR 기능에 대한 자세한 설명: 서버 측 렌더링 구현

WBOY

풀어 주다： 2023-06-18 09:04:08

원래의

5552명이 탐색했습니다.

프론트 엔드 기술의 지속적인 발전으로 인해 페이지 응답 속도를 높이고 SEO 효과를 향상시키기 위해 서버 측 렌더링(SSR)을 사용하려는 웹 사이트가 점점 더 많아지고 있습니다. 현재 가장 인기 있는 프런트 엔드 프레임워크 중 하나인 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은 SSR 애플리케이션을 만드는 데 특별히 사용되는 Vue3의 함수입니다. createApp과의 차이점은 이 함수가 서버를 기준으로 애플리케이션 인스턴스를 반환한다는 점이며, 이 애플리케이션 인스턴스를 생성할 때 소위 컨텍스트 컨텍스트 개체를 도입해야 합니다. 이 개체에는 페이지 URL, 요청 등 렌더링과 관련된 콘텐츠가 포함되어 있습니다. 헤더 등

createRenderer

createRenderer는 렌더러를 생성하는 데 사용되는 함수이며 RenderOptions 객체인 매개변수를 허용할 수 있습니다. 이 객체는 시작하기 위해 여기에 애플리케이션 인스턴스를 전달하는 방법, 다양한 유형의 vnode를 각각 처리하는 방법 등과 같은 렌더러의 관련 구성을 캡슐화합니다.

renderToString

renderToString은 이 SSR 애플리케이션에 해당하는 렌더링 함수입니다. 이 함수는 하나의 Vue 애플리케이션 인스턴스만 매개변수로 허용합니다. 여러 애플리케이션 인스턴스를 렌더링하려면 순차적으로 호출해야 합니다. 이 함수의 반환 값은 렌더링된 결과 문자열입니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!