vue3.0은 서버 측 렌더링을 지원합니다. Vue는 서버 측에서 구성 요소를 HTML 문자열로 직접 렌더링하고 서버 측 응답으로 브라우저에 반환하며 마지막으로 브라우저 측의 정적 HTML을 대화형 클라이언트 애플리케이션으로 "활성화"(수화)하는 것을 지원합니다. 서버 렌더링 Vue 애플리케이션은 대부분의 애플리케이션 코드가 서버와 클라이언트 모두에서 실행되기 때문에 "동형" 또는 "범용"으로 간주될 수 있습니다. 서버 측 렌더링을 사용하는 Vue의 장점: 더 빠른 첫 번째 화면 로딩, 통합된 정신 모델, 더 나은 SEO.
이 튜토리얼의 운영 환경: Windows7 시스템, vue3 버전, DELL G3 컴퓨터
Vue는 클라이언트 측 애플리케이션 구축을 위한 프레임워크입니다. 기본적으로 Vue 구성 요소의 책임은 브라우저에서 DOM을 생성하고 조작하는 것입니다. 그러나 Vue는 서버 측에서 구성 요소를 HTML 문자열로 직접 렌더링하는 것도 지원하며 최종적으로 정적 HTML이 "수화"됩니다.
서버에서 렌더링된 Vue.js 애플리케이션은 대부분의 애플리케이션 코드가 둘 다에서 실행되기 때문에 "동형"(Isomorphic) 또는 "Universal"(Universal)로 간주될 수도 있습니다.
서버측 렌더링(SSR)을 사용하는 이유
클라이언트를 사용한 단일 측면 렌더링 SPA와 비교할 때 SSR의 주요 장점은 다음과 같습니다.
개발 시 브라우저 측 특정 코드는 특정 수명 주기 후크에서만 사용할 수 있습니다.
-
빌드 구성 및 배포와 관련된 추가 요구 사항은 완전히 정적 SPA와 달리 Node.js 서버를 실행할 수 있는 환경이 필요합니다.
-
더 높은 서버 로드 Node.js에서 전체 애플리케이션을 렌더링하는 것은 단순히 정적 파일을 호스팅하는 것보다 CPU 집약적이므로 높은 트래픽이 예상되는 경우 해당 서버 로드를 준비하고 채택하세요. 사운드 캐싱 전략.
서버 측 렌더링(SSR)과 정적 사이트 생성(SSG)
정적 사이트 생성
(정적 사이트 생성, SSG로 약칭),
사전 렌더링이라고도 함, 빠른 웹사이트를 구축하기 위한 또 다른 인기 있는 기술입니다. 서버 측 페이지를 렌더링하는 데 필요한 데이터가 모든 사용자에게 동일하다면 요청이 들어올 때마다 페이지를 다시 렌더링하는 대신 한 번만 렌더링하고 빌드 프로세스 중에 미리 수행할 수 있습니다. 사전 렌더링된 페이지는 정적 HTML 파일로 서버에서 생성되고 호스팅됩니다. SSG는 SSR 애플리케이션과 동일한 성능을 유지합니다. 뛰어난 첫 화면 로딩 성능을 제공합니다. 동시에 정적 HTML 및 리소스 파일을 출력하므로 SSR 애플리케이션보다 비용이 저렴하고 배포가 더 쉽습니다. 여기서 핵심 단어는 정적입니다. SSG는 정적 데이터를 사용하는 페이지에만 사용할 수 있습니다. 즉, 데이터는 빌드 시간 동안 알려지며 여러 배포에서 변경되지 않습니다. 데이터가 변경될 때마다 재배포해야 합니다.
몇 가지 마케팅 페이지(예: /, /about, /contact 등)의 SEO를 최적화하기 위해 SSR을 조사하는 경우 SSR 대신 SSG가 필요할 수 있습니다. SSG는 문서 사이트나 블로그와 같은 콘텐츠 기반 웹사이트를 구축하는 데에도 적합합니다. 실제로 지금 읽고 있는 웹사이트는 Vue에서 제공하는 정적 사이트 생성기인 VitePress를 사용하여 정적으로 생성되었습니다.
Hello World
서버 측 렌더링을 실제로 경험할 준비를 하세요. 서버 측 렌더링(예: SSR)은 복잡해 보이지만 간단한 Node 스크립트를 사용하면 단 3단계만으로 이 기능을 구현할 수 있습니다.
// 步骤 1:创建一个Vue实例
var Vue = require('vue')
var app = new Vue({
render: function (h) {
return h('p', 'hello world')
}
})
// 步骤 2: 创建一个渲染器
var renderer = require('vue-server-renderer').createRenderer()
// 步骤 3: 将 Vue实例 渲染成 HTML
renderer.renderToString(app, function (error, html) {
if (error) throw error
console.log(html)
// => <p server-rendered="true">hello world</p>
})로그인 후 복사
어렵지 않습니다. 물론 이 예제는 이러한 기능이 어떻게 작동하는지 탐색하기에는 대부분의 애플리케이션보다 간단합니다.
Express 웹 서버를 통한 간단한 서버 측 렌더링
웹 서버가 없으면 서버 측 렌더링이라고 말하기는 어렵습니다. 그것을 보충하십시오. 우리는 ES5만을 사용하고 다른 빌드 단계나 Vue 플러그인을 사용하지 않고 매우 간단한 서버 측 렌더링 애플리케이션을 구축할 것입니다.
사용자가 페이지에서 보낸 시간을 알려주는 앱을 시작하세요.
new Vue({
template: '<div>你已经在这花了 {{ counter }} 秒。</div>',
data: {
counter: 0
},
created: function () {
var vm = this
setInterval(function () {
vm.counter += 1
}, 1000)
}
})로그인 후 복사
서버 측 렌더링에 적응하려면 브라우저와 노드에서 렌더링할 수 있도록 몇 가지 수정이 필요합니다.
브라우저에서 애플리케이션 인스턴스를 전역 컨텍스트(창)에 추가합니다. , 우리는 설치할 수 있습니다.
Node에서 팩토리 함수를 내보내면 각 요청에 대한 애플리케이션 인스턴스를 생성할 수 있습니다.
이를 구현하려면 작은 템플릿이 필요합니다.
// assets/app.js
(function () { 'use strict'
var createApp = function () {
// ---------------------
// 开始常用的应用代码
// ---------------------
// 主要的Vue实例必须返回，并且有一个根节点在id "app"上，这样客户端可以加载它。
return new Vue({
template: '<div id="app">你已经在这花了 {{ counter }} 秒。</div>',
data: {
counter: 0
},
created: function () {
var vm = this
setInterval(function () {
vm.counter += 1
}, 1000)
}
})
// -------------------
// 结束常用的应用代码
// -------------------
}
if (typeof module !== 'undefined' && module.exports) {
module.exports = createApp
} else {
this.app = createApp()
}
}).call(this)로그인 후 복사
이제 애플리케이션 코드가 있으므로 html 파일을 추가해 보겠습니다.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>My Vue App</title>
<script src="/assets/vue.js"></script>
</head>
<body>
<div id="app"></div>
<script src="/assets/app.js"></script>
<script>app.$mount('#app')</script>
</body>
</html>
로그인 후 복사
주로 이전에 자산 폴더에 생성한 app.js 및 vue.js 파일을 참조하여 실행할 수 있는 단일 페이지 애플리케이션이 있습니다.
그런 다음 서버 측 렌더링을 구현하려면 다음을 추가해야 합니다. 서버 측의 단계.
// server.js
'use strict'
var fs = require('fs')
var path = require('path')
// 定义全局的Vue为了服务端的app.js
global.Vue = require('vue')
// 获取HTML布局
var layout = fs.readFileSync('./index.html', 'utf8')
// 创建一个渲染器
var renderer = require('vue-server-renderer').createRenderer()
// 创建一个Express服务器
var express = require('express')
var server = express()
// 部署静态文件夹为 "assets"文件夹
server.use('/assets', express.static(
path.resolve(__dirname, 'assets')
))
// 处理所有的Get请求
server.get('*', function (request, response) {
// 渲染我们的Vue应用为一个字符串
renderer.renderToString(
// 创建一个应用实例
require('./assets/app')(),
// 处理渲染结果
function (error, html) {
// 如果渲染时发生了错误
if (error) {
// 打印错误到控制台
console.error(error)
// 告诉客户端错误
return response
.status(500)
.send('Server Error')
}
// 发送布局和HTML文件
response.send(layout.replace('<div id="app"></div>', html))
}
)
})
// 监听5000端口
server.listen(5000, function (error) {
if (error) throw error
console.log('Server is running at localhost:5000')
})로그인 후 복사
그렇습니다. 전체 예제, 심층적인 실험을 위해 복제하세요. 로컬에서 실행되면 페이지를 마우스 오른쪽 버튼으로 클릭하고 페이지 리소스(또는 이와 유사한 항목)를 선택하여 렌더러에서 선택한 서비스가 실제로 실행되고 있는지 확인할 수 있습니다. 본문에서 볼 수 있습니다:
<div id="app" server-rendered="true">You have been here for 0 seconds.</div>
로그인 후 복사
Streaming response Vue는 스트리밍 렌더링을 지원하며 스트리밍을 지원하는 웹 서버에 기본 설정이 적용됩니다. HTML을 한 번에 모두 작성하는 대신 일반적으로 해당 스트림에 생성하고 작성할 수 있습니다. 그 결과, 아무런 단점 없이 요청이 더 빠르게 처리됩니다!
이전 섹션의 애플리케이션 코드를 스트리밍 렌더링에 적합하게 만들려면 간단히 server.get('*',...)을 다음 코드로 바꾸면 됩니다.
<div id="app"></div>
로그인 후 복사
이것은 이전 코드보다 더 복잡하지 않습니다. 버전이며 귀하에게 효과가 있을 수도 있습니다. 새로운 개념도 아닙니다. 우리는 다음을 수행했습니다.
흐름 구축
구성 요소 캐싱 Vue의 서버 측 렌더링은 기본적으로 매우 빠르지만 렌더링된 구성 요소를 캐싱하면 성능을 더욱 향상시킬 수 있습니다. 이는 고급 기능으로 간주되지만, 잘못된 구성 요소가 캐시된 경우(또는 올바른 구성 요소에 잘못된 콘텐츠가 있는 경우) 앱이 잘못 렌더링될 수 있습니다. 특별 참고 사항:
전역 상태(예: vuex의 상태)에 의존하는 하위 구성 요소가 포함된 구성 요소는 캐시되어서는 안 됩니다. 이렇게 하면 하위 구성 요소(사실 전체 하위 트리)도 캐시됩니다. 따라서 슬롯 조각이나 하위 구성 요소가 있는 상황에 특별한 주의를 기울이십시오.
Settings경고 상황 외에도 다음 방법을 사용하여 구성 요소를 캐시할 수 있습니다.
먼저 렌더러에 캐시 개체를 제공해야 합니다. 다음은 최대 1000개의 독립적인 렌더링을 캐시하는 lru-cache
// 拆分布局成两段HTML
var layoutSections = layout.split('<div id="app"></div>')
var preAppHTML = layoutSections[0]
var postAppHTML = layoutSections[1]
// 处理所有的Get请求
server.get('*', function (request, response) {
// 渲染我们的Vue实例作为流
var stream = renderer.renderToStream(require('./assets/app')())
// 将预先的HTML写入响应
response.write(preAppHTML)
// 每当新的块被渲染
stream.on('data', function (chunk) {
// 将块写入响应
response.write(chunk)
})
// 当所有的块被渲染完成
stream.on('end', function () {
// 将post-app HTML写入响应
response.end(postAppHTML)
})
// 当渲染时发生错误
stream.on('error', function (error) {
// 打印错误到控制台
console.error(error)
// 告诉客服端发生了错误
return response
.status(500)
.send('Server Error')
})
})로그인 후 복사
를 사용하는 간단한 예입니다. 콘텐츠 캐싱에 대한 추가 구성은
lru-cache 설정 을 참조하세요. 그런 다음 캐시하려는 구성 요소에 대해 다음을 제공할 수 있습니다.
고유 이름
var createRenderer = require('vue-server-renderer').createRenderer
var lru = require('lru-cache')
var renderer = createRenderer({
cache: lru(1000)
})로그인 후 복사
모든 순수 구성 요소는 안전하게 캐시될 수 있습니다. 이는 동일한 데이터를 모든 구성 요소에 전달하면 동일한 HTML이 생성되도록 하기 위한 것입니다. 이러한 시나리오의 예는 다음과 같습니다.
정적 구성 요소(예: 항상 동일한 HTML을 시도하여 serverCacheKey 함수가 true로 반환될 수 있음)
설명: 이제 서버 측의 기본 개념을 이해해야 합니다. 표현. 그러나 빌드 프로세스, 라우팅 및 Vuex에는 각각 고유한 고려 사항이 있습니다.
(학습 영상 공유:
vuejs 입문 튜토리얼, 기본 프로그래밍 영상)
위 내용은 vue3.0은 서버 측 렌더링을 지원합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
