vuecli 프로젝트 구축 SSR 서버 렌 더 링 실현

서버 렌 더 링(SSR)
Vue 구성 요 소 를 서버 에 HTML 문자열 로 렌 더 링 하여 브 라 우 저 에 보 냅 니 다.마지막 으로 이 정적 표 시 를 대화 식 프로그램 으로 활성화 하 는 과정 을 서버 렌 더 링(SSR)이 라 고 합 니 다.
서버 가 렌 더 링 한 Vue.js 응용 프로그램 도'동 구성'또는'통용'으로 여 겨 질 수 있 습 니 다.응용 프로그램의 대부분 코드 가 서버 와 클 라 이언 트 에서 실 행 될 수 있 기 때 문 입 니 다.
서버 렌 더 링 사용 이유(SSR)

더 좋 은 SEO:전통 적 인 spa 페이지 데 이 터 는 모두 비동기 로 불 러 옵 니 다.검색엔진 파충 류 는 잡 을 수 없습니다.서버 렌 더 링(SSR)은 검색엔진 파충 류 를 잡 는 도구 로 완전히 렌 더 링 된 페이지 를 직접 볼 수 있 고 vue 프로젝트 의 seo 문 제 를 해결 할 수 있 습 니 다

더 빠 른 콘 텐 츠 도착 시간(첫 화면 로 딩 이 더 빠 름):요청 페이지 에서 서버 에서 렌 더 링 된 페이지 를 브 라 우 저 에 직접 보 내 렌 더 링 합 니 다.브 라 우 저 는 렌 더 링 HTML 만 분석 하고 모든 자바 스 크 립 트 가 다운로드 되 고 실 행 될 때 까지 기다 리 지 않 아 도 서버 렌 더 링 표 시 를 표시 합 니 다

서버 렌 더 링(SSR)단점

개발 조건 에 제한 되 어 있 습 니 다.브 라 우 저의 특정한 코드 는 특정한 생명 주기 갈고리 함수 에서 만 사용 할 수 있 습 니 다.일부 외부 확장 라 이브 러 리 는 서버 렌 더 링 프로그램 에서 실행 할 수 있 도록 특수 처리 가 필요 할 수 있 습 니 다

구축 설정 과 배치 에 대한 더 많은 요구 사항:모든 정적 파일 서버 에 배치 할 수 있 는 완전 정적 단일 페이지 응용 프로그램(SPA)과 달리 서버 렌 더 링 응용 프로그램 은 Node.js server 실행 환경

에 있어 야 합 니 다.

더 많은 서버 엔 드 부하:Node.js 에서 완전한 프로그램 을 렌 더 링 하면 정적 파일 만 제공 하 는 server 보다 CPU 자원 을 많이 사용 할 수 있 습 니 다.따라서 높 은 트 래 픽 환경 에서 사용 할 것 이 라 고 예상 되면 해당 하 는 서버 부 하 를 준비 하고 캐 시 정책 을 사용 해 야 합 니 다.

서버 렌 더 링(SSR)vs 프 리 렌 더 링(Prerendering)
소수의 마 케 팅 페이지(예 를 들 어/,/about,/contact 등)의 SEO 를 개선 하려 면 미리 렌 더 링 이 필요 할 수 있 습 니 다.웹 서버 를 사용 하여 실시 간 으로 HTML 을 동적 으로 컴 파일 하지 않 고 미리 렌 더 링 방식 을 사용 하여 구축 할 때 특정한 경로 에 대한 정적 HTML 파일 을 간단하게 생 성 할 수 있 습 니 다.미리 렌 더 링 을 설정 하 는 것 이 더 간단 하 다 는 장점 이 있 습 니 다.그리고 전단 을 완전히 정적 인 사이트 로 사용 할 수 있 습 니 다.
웹 팩 을 사용 하면prerender-spa-pluginnpm 주소플러그 인 을 사용 하여 미리 렌 더 링 을 쉽게 추가 할 수 있 습 니 다.
서버 렌 더 링(SSR)원리
구축 절차:모든 파일 은 하나의 공공 입구app.js를 가지 고 서버 입구entry-server.js와 클 라 이언 트 입구entry-client.js에 들 어 갑 니 다.프로젝트 가 완료 되면 웹 팩 포장 을 통 해 서버server bundle(서버 SSR 에 사용 되 는 json 파일)와 클 라 이언 트client bundle(브 라 우 저 에 사용)를 생 성 합 니 다.요청 페이지 에서서버 에서 vue 구성 요 소 를 HTML 문자열 로 조립 하여 브 라 우 저 에 보 내 고 클 라 이언 트 가 방문 한 HTML 템 플 릿 에 섞 어 페이지 렌 더 링 을 완성 합 니 다.

vuecli 를 통 해 vue 프로젝트 만 들 기

vue create vue-ssr-demo

vue-server-renderer vue-server-renderer는 SSR 렌 더 링 의 핵심 으로createRenderer방법 을 제공 합 니 다.이 방법renderToString은 app 을 문자열 로 렌 더 링 할 수 있 습 니 다.createBundleRenderer방법 은 패키지 프로그램 코드 를 통 해 bundleRenderer 인 스 턴 스 를 만 들 고 bundle 과 HTML 템 플 릿 을 렌 더 링 할 수 있 습 니 다.
vue-server-render 설치

npm install vue-server-renderer --save

주의:

vue-server-render 와 vue 는 버 전과 일치 해 야 합 니 다

vue-server-render 는 Node.js 원생 모듈 에 의존 하기 때문에 Node.js 에서 만 사용 할 수 있 습 니 다

 상태
Node.js 서버 는 장기 적 으로 실행 되 는 프로 세 스 입 니 다.코드 가 이 프로 세 스에 들 어 갈 때 한 번 의 값 을 추출 하여 메모리 에 저장 합 니 다.이 는 단일 대상 을 만 들 면 들 어 오 는 요청 마다 공유 되 는 것 을 의미 합 니 다.따라서 반복 적 으로 실행 할 수 있 는 공장 함 수 를 노출 하여 모든 요청 에 새로운 루트 Vue 인 스 턴 스 를 만들어 야 합 니 다.여러 요청 사이 에 공 유 된 인 스 턴 스 를 사용 하면 교차 요청 상태 가 오염 되 기 쉽 습 니 다(같은 규칙 은 router,store,event bus 인 스 턴 스 에 도 적 용 됩 니 다)
라 우 터 생 성
vue-router 설치

npm install vue-router --save

src디 렉 터 리 에 폴 더 와router만 들 기
components 디 렉 터 리 에 Home.vue 와 About.vue 페이지 만 들 기(프로젝트 수요 에 따라 사용자 정의 생 성)
router/index.js：

import Vue from "vue"
import Router from "vue-router"

import Home from "@/components/Home"
import About from "@/components/About"

Vue.use(Router)

//               router  
//  createRouter    
export default function createRouter() {
  //  router  
  return new Router({
    mode: "history",
    routes: [
      {
        path: "/", 
        name: 'home',
        component: Home
      },
      {
        path: "/about", 
        name: 'about',
        component: About
      }
    ]
  })
}

App.vue 수정
App.vue 페이지 를 수정 하여 페이지 레이아웃 을 진행 합 니 다(프로젝트 수요 에 따라 레이아웃 을 사용자 정의 합 니 다)
App.vue：

<template>
 <div id="app">
  <nav>
   <router-link to="/">  </router-link>
   <router-link to="/about">  </router-link>
  </nav>
  <router-view></router-view>
 </div>
</template>

공용 입구 app.js 만 들 기index.js디 렉 터 리 에 공공 입 구 를 만 듭 니 다src.vue 인 스 턴 스 를 만 드 는 데 사 용 됩 니 다.
app.js：

import Vue from "vue"
import App from "./App.vue"
import createRouter from "./router"

//  createApp    
export default function createApp() {
  const router = createRouter()
  //  vue  
  const app = new Vue({
    router,
    render: h => h(App),
  })
  return { app, router }
}

서버 입구 entry-server.js 만 들 기app.js디 렉 터 리 에 서버 입구 만 들 기src,첫 화면 렌 더 링 에 사용
entry-server.js：

import createApp from "./app"

export default context => {
  return new Promise((resolve, reject) => {
    const { app, router } = createApp()
    //    
    router.push(context.url)
    router.onReady(() => {
      resolve(app)
    }, reject)
  })
}

클 라 이언 트 입구 entry-client.js 만 들 기entry-server.js디 렉 터 리 에 클 라 이언 트 입구 만 들 기src,활성화 app 마 운 트 에 사용
entry-client.js：

import createApp from "./app"

const { app, router } = createApp()
router.onReady(() => {
  //    app
  app.$mount("#app")
})

페이지 템 플 릿 index.temp.html 만 들 기entry-client.js디 렉 터 리 에 생 성public,렌 더 링 Vue 프로그램 으로 사용 할 때 render 는 HTML 페이지 패키지 용 기 를 생 성하 여 생 성 된 HTML 표 시 를 패키지 합 니 다.index.temp.html주석 은 응용 프로그램 HTML 태그 가 주 입 된 곳 입 니 다.
index.temp.html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue ssr</title>
</head>
<body>
  <!--vue-ssr-outlet-->
</body>
</html>

Node.js 서버 만 들 기
서버 렌 더 링(SSR)은 Node.js 서버 를 사용 해 야 합 니 다.여 기 는<!--vue-ssr-outlet-->프레임 워 크 를 사용 하여 구축 합 니 다.
express 설치

npm install express --save

루트 디 렉 터 리 아래express파일 을 만 들 고 Node.js 서버 를 구축 하 는 데 사용 합 니 다.
server.js：

//nodejs   
const express = require("express")
const Vue = require("vue")
const fs = require("fs")

//  express  
const app = express()
//     
const { createBundleRenderer } = require("vue-server-renderer")
const serverBundle = require("./dist/server/vue-ssr-server-bundle.json")
const clientManifest = require("./dist/client/vue-ssr-client-manifest.json")
const renderer = createBundleRenderer(serverBundle, {
  runInNewContext: false,
  template: fs.readFileSync("./public/index.temp.html", "utf-8"), //    
  clientManifest
})

//           
app.use(express.static("./dist/client", {index: false}))

//        vue
app.get("*", async (req, res) => {
  try {
    const context = {
      url: req.url,
      title: ""
    }
    const html = await renderer.renderToString(context)
    res.send(html)
  }catch {
    res.status(500).send("       ！")
  }
})

app.listen(9999, () => {
  console.log("       ！")
})

웹 팩 패키지 설정
루트 디 렉 터 리 에서 vue 프로필server.js을 만 들 고 웹 팩 설정 을 합 니 다.이 설정 은 vue-cli 에서 웹 팩 의 기본 설정 을 덮어 씁 니 다.
vue.config.js：

const VueSSRServerPlugin = require("vue-server-renderer/server-plugin")
const VueSSRClientPlugin = require("vue-server-renderer/client-plugin")

//    ，             
const TARGRT_NODE = process.env.WEBPACK_TARGET === "node"
const target = TARGRT_NODE ? "server" : "client"

module.exports = {
  css: {
    extract: false
  },
  outputDir: "./dist/" + target,
  configureWebpack: () => ({
    //  entry         server entry   
    entry: `./src/entry-${target}.js`,
    //  bundle renderer    source map   
    devtool: "source-map",
    //    webpack   Node     (Node-appropriate fashion)      (dynamic import)
    //        Vue    ，   `vue-loader`          (server-oriented code)
    target: TARGRT_NODE ? "node" : "web",
    node: TARGRT_NODE ? undefined : false,
    output: {
      //     server bundle    Node       (Node-style exports)
      libraryTarget: TARGRT_NODE ? "commonjs2" : undefined
    },
    optimization: { splitChunks: TARGRT_NODE ? false : undefined },
    //               JOSN      
    //          vue-ssr-server-bundle.json
    plugins: [TARGRT_NODE ? new VueSSRServerPlugin() : new VueSSRClientPlugin()]
  })
}

패키지 스 크 립 트 설정vue.config.js플러그 인:크로스 플랫폼 설정 과 환경 변 수 를 사용 하 는 스 크 립 트 를 실행 합 니 다.
cross-env 플러그 인 설치

npm install cross-env --save

cross-env파일 에서 프로젝트 실행 패키지 스 크 립 트 를 정의 합 니 다.
package.json：

{
	......
	"scripts": {
		"server": "node server",
	  "build:client": "vue-cli-service build",
	  "build:server": "cross-env WEBPACK_TARGET=node vue-cli-service build --mode server",
	  "build": "npm run build:server && npm run build:client"
	},
	......
}

터미널 실행 명령 패키지 항목:

npm run build

패키지 가 완료 되면 터미널 에서 명령 을 실행 하여 Node.js 서버 를 시작 합 니 다.

npm run server

서버 시작 후 브 라 우 저 는 localhost:9999 를 열 면 SSR 프로젝트 에 접근 할 수 있 습 니 다.
웹 페이지 소스 코드 를 보 니 루트 요소 에 특수 한 속성 이 추가 되 었 습 니 다.package.json이 속성 은 클 라 이언 트 Vue 에 게 이 부분의 HTML 이 Vue 가 서버 에서 렌 더 링 되 었 음 을 알 리 고 활성화 모드 로 마 운 트 해 야 합 니 다.

<div id="app" data-server-rendered="true">......</div>

프로젝트 디 렉 터 리:

포장 후 dist 디 렉 터 리:

vuecli 프로젝트 구축 SSR 서버 렌 더 링 의 실현 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vuecli 구축 SSR 서버 렌 더 링 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 지원 바 랍 니 다!