애플리케이션의 SEO 효과를 향상시키기 위한 Vue 3의 SSR 기술 적용 실습

어플리케이션의 SEO 효과를 높이기 위한 Vue 3의 SSR 기술 적용 실습

프론트엔드 개발의 급속한 발전과 함께 SPA(Single Page Application)가 주류가 되었습니다. SPA의 장점은 자명하고 원활한 사용자 경험을 제공할 수 있지만 SEO(검색엔진 최적화) 측면에서는 몇 가지 과제가 있습니다. SPA는 프런트 엔드 렌더링 단계에서 HTML 템플릿만 반환하기 때문에 대부분의 콘텐츠가 JavaScript를 통해 동적으로 로드되므로 검색 엔진이 크롤링, 색인 생성 및 순위 지정에 어려움을 겪게 됩니다. 이런 문제를 해결하기 위해 서버사이드 렌더링(SSR) 기술이 등장했다.

현재 가장 인기 있는 JavaScript 프레임워크 중 하나인 Vue 3은 개발자에게 SSR 지원을 제공합니다. Vue 3용 SSR은 Vite 및 VitePress 도구를 활용하여 JavaScript의 동형 렌더링을 구현하므로 응답이 서버 측에서 사전 렌더링되고 클라이언트 측에서 상호 작용할 수 있습니다. 이 기사에서는 Vue 3의 SSR 기술 적용 사례를 소개하고 SSR을 사용하여 애플리케이션의 SEO 효과를 향상시키는 방법을 보여줍니다.

먼저 Vue 3의 SSR 기능을 지원하려면 Vue CLI 4를 설치해야 합니다. 명령줄에서 다음 명령을 실행합니다.

npm install -g @vue/cli@4

다음으로 Vue CLI를 사용하여 프로젝트를 만듭니다.

vue create vue-ssr-demo

"수동으로 기능 선택"을 선택한 다음 "Babel" 및 "Vue 버전 선택"을 선택한 다음 "2.x를 선택합니다. " , 프로젝트 생성을 계속하세요.

생성이 완료되면 프로젝트 디렉토리에 들어가서 관련 종속성을 설치합니다.

cd vue-ssr-demo
npm install vuex vue-router express

그런 다음 루트 디렉토리에 server.js 파일을 생성하여 SSR 서버를 시작하고 페이지 렌더링: server.js文件，用于启动SSR服务器并进行页面渲染：

const express = require('express')
const { createBundleRenderer } = require('vue-server-renderer')
const server = express()

// 读取生成的bundle文件
const bundle = require('./dist/vue-ssr-server-bundle.json')
const renderer = createBundleRenderer(bundle, {
  runInNewContext: false,
  template: require('fs').readFileSync('./public/index.html', 'utf-8'),
  clientManifest: require('./dist/vue-ssr-client-manifest.json')
})

// 静态资源的路径
server.use(express.static('./dist'))

// 所有路由都交给Vue处理
server.get('*', (req, res) => {
  const context = { url: req.url }

  renderer.renderToString(context, (err, html) => {
    if (err) {
      console.error(err)
      if (err.code === 404) {
        res.status(404).end('Page not found')
      } else {
        res.status(500).end('Internal Server Error')
      }
    }

    res.end(html)
  })
})

// 启动服务器
server.listen(8080)
console.log('Server is running on http://localhost:8080')

我们还需要修改package.json文件，将build命令改为build:ssr，以区分SSR的构建方式：

"scripts": {
  "build:ssr": "vue-cli-service build --target node --ssr"
}

现在，我们可以执行以下命令来构建和启动SSR服务器：

npm run build:ssr
node server.js

以上步骤完成后，我们成功地启动了一个SSR的Vue 3应用。

在SSR应用中，有一点需要注意的是，由于在服务器渲染期间不会执行任何浏览器相关的代码，因此不能使用一些只在浏览器可用的API，如window和document。为了解决这个问题，Vue 3为我们提供了一些特殊的钩子函数。
首先，我们需要在入口文件中定义createApp函数，如下所示：

import { createSSRApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

export function createApp() {
  const app = createSSRApp(App)
  app.use(router)
  app.use(store)

  return { app, router, store }
}

然后，在服务器端渲染期间，我们使用renderToString方法来渲染Vue应用，如下所示：

import { createApp } from './main'

export default context => {
  return new Promise((resolve, reject) => {
    const { app, router, store } = createApp()

    router.push(context.url)

    router.isReady().then(() => {
      context.rendered = () => {
        context.state = store.state
      }
      resolve(app)
    }, reject)
  })
}

createSSRApp函数用于在服务器上创建应用实例，renderToStringrrreee

또한 package.json 파일을 수정하고 build 명령을 build:ssr로 변경하여 방법을 구별해야 합니다. SSR이 빌드되었습니다.

rrreee

이제 다음 명령을 실행하여 SSR 서버를 빌드하고 시작할 수 있습니다.

rrreee
위 단계가 완료되면 SSR Vue 3 애플리케이션이 성공적으로 시작되었습니다.

🎜SSR 애플리케이션에서 한 가지 주의할 점은 서버 렌더링 중에는 브라우저 관련 코드가 실행되지 않기 때문에 window, 문서. 이 문제를 해결하기 위해 Vue 3에서는 몇 가지 특별한 후크 기능을 제공합니다. 🎜먼저 아래와 같이 항목 파일에 createApp 함수를 정의해야 합니다. 🎜rrreee🎜그런 다음 서버 측 렌더링 중에 renderToString 메서드를 사용하여 아래와 같이 Vue 애플리케이션을 렌더링합니다. 🎜rrreee🎜 createSSRApp 함수는 서버에 애플리케이션 인스턴스를 생성하는 데 사용되고 renderToString 메서드는 애플리케이션을 렌더링하는 데 사용됩니다. 인스턴스를 문자열로 변환합니다. 🎜🎜위의 구성과 코드 예제를 통해 Vue 3에 SSR 기술을 성공적으로 적용했습니다. SSR은 애플리케이션의 SEO 효과를 향상시킬 수 있을 뿐만 아니라 애플리케이션이 사용자에게 더 빠르게 나타나도록 할 수 있습니다. 🎜🎜요약: 🎜이 글에서는 Vue 3의 SSR 기술 적용 사례를 소개하고 관련 코드 예제를 제공합니다. SSR을 사용하면 SPA 애플리케이션의 SEO 문제를 해결하고 검색 엔진의 크롤링 및 순위 지정 효과를 향상시킬 수 있습니다. Vue 3의 SSR 기능은 프런트 엔드 개발자에게 더 나은 도구와 지원을 제공하여 더 안정적이고 최적화되며 더 나은 SEO 효과를 갖는 애플리케이션을 구축하는 데 도움이 됩니다. SPA 애플리케이션의 급속한 발전으로 SSR은 사용자 경험과 검색 엔진 최적화 측면에서 탐구하고 시도해 볼 가치가 있는 기술입니다. 🎜

위 내용은 애플리케이션의 SEO 효과를 향상시키기 위한 Vue 3의 SSR 기술 적용 실습의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!