Vue 우수 사례 - 0에서 1까지 SSR 렌더링 구현

웹 개발에서 SSR 렌더링(Server Side Rendering)은 매우 중요한 기술입니다. 서버에서 페이지의 초기 렌더링을 완료한 다음 렌더링된 HTML 파일을 클라이언트에 전달하여 표시할 수 있습니다. 기존 클라이언트 측 렌더링(CSR)과 비교하여 SSR 렌더링은 웹 페이지의 첫 번째 화면 로딩 속도, 검색 엔진 최적화 기능 등을 향상시킬 수 있습니다. 이 기사에서는 Vue 프레임워크를 통해 SSR 렌더링을 구현하는 방법을 소개합니다.

1. Create Vue 프로젝트
   먼저 기본 Vue 프로젝트를 생성해야 합니다. 터미널에서 다음 명령을 실행하세요.

vue create my-ssr-app

이 명령을 사용하면 Vue 기본 프로젝트를 빠르게 생성한 후 다음 명령을 통해 프로젝트 디렉터리에 들어갈 수 있습니다.

cd my-ssr-app

2. Add SSR dependency
   다음으로 SSR을 추가해야 합니다. 관련 종속성. 터미널에 다음 명령을 입력하세요.

npm install --save vue vue-server-renderer express

• vue: Vue 프레임워크 자체의 종속성입니다.
• vue-server-renderer: Vue용 SSR 렌더러.
• express: Node.js 기반의 웹 애플리케이션 프레임워크입니다.

위 명령은 프로젝트의 package.json 파일에 종속성을 자동으로 설치합니다. package.json文件中。

3. 修改Vue入口文件
   在src目录下，我们可以找到main.js文件，这是Vue框架的入口文件。我们需要进行修改，以支持SSR渲染。首先，我们需要将Vue的实例转变为一个工厂函数，这样在SSR时，可以为每个请求创建一个新的实例。将原本的：

new Vue({
  render: h => h(App),
}).$mount('#app')

修改为：

export function createApp() {
  return new Vue({
    render: h => h(App)
  })
}

然后，我们需要将createApp函数导出，在后面创建服务器脚本时会用到。

4. 创建服务器脚本
   在项目根目录下，我们需要创建一个服务器脚本。在项目根目录下创建一个名为server.js的文件。在该文件中，我们需要导入相关的依赖，然后创建一个简单的服务器：

const express = require('express')
const server = express()
const { createBundleRenderer } = require('vue-server-renderer')
const renderer = createBundleRenderer(require('./dist/vue-ssr-server-bundle.json'))
const template = require('fs').readFileSync('./index.html', 'utf-8')

server.use('/dist', express.static('./dist'))

server.get('*', (req, res) => {
  const context = { url: req.url }
  renderer.renderToString(context, (err, html) => {
    if (err) {
      console.error(err)
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(template.replace('<div id="app"></div>', `<div id="app">${html}</div>`))
  })
})

server.listen(3000, () => {
  console.log('Server running at http://localhost:3000')
})

这段代码实现了一个简单的Express服务器，它会将./dist目录下的静态文件暴露在/dist路由下，并且对于所有路由请求（*），使用createBundleRenderer方法从vue-ssr-server-bundle.json文件中读取server bundle，并且将渲染后的HTML文本映射到一个基础的HTML模版中，将最终结果返回给客户端。

5. 进行构建并启动服务器
   在终端运行以下命令：

npm run build
npm run serve

其中，npm run build命令会将src目录下的代码构建为server bundle和client bundle，并且将构建后的结果存放在dist目录下。npm run serve命令会启动服务器并监听3000端口。在浏览器中输入http://localhost:3000

Vue 항목 파일 수정

src 디렉터리에서 Vue 항목 파일인 main.js 파일을 찾을 수 있습니다. Vue 프레임워크. SSR 렌더링을 지원하려면 수정이 필요합니다. 먼저, SSR 중 각 요청에 대해 새 인스턴스가 생성될 수 있도록 Vue 인스턴스를 팩토리 함수로 변환해야 합니다. 원본을

🎜rrreee🎜에서 🎜rrreee🎜로 변경한 다음 나중에 서버 스크립트를 생성할 때 사용할 createApp 함수를 내보내야 합니다. 🎜
🎜서버 스크립트 생성🎜프로젝트 루트 디렉터리에 서버 스크립트를 생성해야 합니다. 프로젝트 루트 디렉터리에 server.js라는 파일을 만듭니다. 이 파일에서 관련 종속성을 가져온 다음 간단한 서버를 만들어야 합니다. 🎜🎜rrreee🎜이 코드는 간단한 Express 서버를 구현합니다. 이 서버는 정적 파일이 /dist 경로에 노출되고, 모든 경로 요청(*)에 대해 vue-ssr의 <code>createBundleRenderer 메서드를 사용합니다. server-bundle.json 파일에서 서버 번들을 읽습니다. , 렌더링된 HTML 텍스트를 기본 HTML 템플릿에 매핑하고 최종 결과를 클라이언트에 반환합니다. 🎜
🎜서버 빌드 및 시작🎜터미널에서 다음 명령을 실행하세요. 🎜🎜rrreee🎜그 중 npm run build 명령은 src를 대체합니다. 디렉터리 아래 코드는 서버 번들과 클라이언트 번들에 내장되어 있으며, 빌드된 결과는 dist 디렉터리에 저장됩니다. npm run Serve 명령은 서버를 시작하고 포트 3000을 수신합니다. SSR 렌더링 페이지에 액세스하려면 브라우저에 http://localhost:3000를 입력하세요. 🎜🎜이 시점에서 간단한 Vue SSR 렌더링 실습을 완료했습니다. 물론, 심층적인 이해와 연습이 필요한 SSR 렌더링의 구체적인 작업과 세부 사항이 많이 있습니다. 이 문서에서는 기본적인 소개 예제만 제공합니다. 이 기사가 모든 사람이 Vue SSR 렌더링을 마스터하는 데 도움이 되기를 바랍니다. 🎜

위 내용은 Vue 우수 사례 - 0에서 1까지 SSR 렌더링 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!