SSR이란 무엇입니까? vue에서 SSR 서버 측 렌더링을 구현하는 방법은 무엇입니까?

SSR이란 무엇인가요? 다음 글에서는 vue에서 SSR 서버 측 렌더링을 구현하는 방법을 소개하겠습니다. 도움이 되길 바랍니다!

1. SSR이란? 페이지의 HTML 구조를 접합하여 브라우저에 상태와 이벤트를 바인딩하는 기술입니다. 완전 대화형 페이지. [관련 권장 사항: vuejs 비디오 튜토리얼]

먼저 살펴보세요 웹의 개발 역사를 3단계로 살펴보세요: Server-Side Rendering 我们称其为SSR，意为服务端渲染

指由服务侧完成页面的 HTML 结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程。【相关推荐：vuejs视频教程】

先来看看Web3个阶段的发展史：

• 传统服务端渲染SSR
• 单页面应用SPA
• 服务端渲染SSR

传统web开发

网页内容在服务端渲染完成，⼀次性传输到浏览器

打开页面查看源码，浏览器拿到的是全部的dom结构

单页应用SPA

单页应用优秀的用户体验，使其逐渐成为主流，页面内容由JS渲染出来，这种方式称为客户端渲染

打开页面查看源码，浏览器拿到的仅有宿主元素#app，并没有内容

服务端渲染SSR

SSR解决方案，后端渲染出完整的首屏的dom结构返回，前端拿到的内容包括首屏及完整spa结构，应用激活后依然按照spa方式运行

看完前端发展，我们再看看Vue官方对SSR的解释：

Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序

服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在服务器和客户端上运行

我们从上门解释得到以下结论：

• Vue SSR是一个在SPA上进行改良的服务端渲染
• 通过Vue SSR渲染的页面，需要在客户端激活才能实现交互
• Vue SSR将包含两部分：服务端渲染的首屏，包含交互的SPA

二、解决了什么

SSR主要解决了以下两种问题：

• seo：搜索引擎优先爬取页面HTML结构，使用ssr时，服务端已经生成了和业务想关联的HTML，有利于seo
• 首屏呈现渲染：用户无需等待页面所有js加载完成就可以看到页面视图（压力来到了服务器，所以需要权衡哪些用服务端渲染，哪些交给客户端）

但是使用SSR同样存在以下的缺点：

• 复杂度：整个项目的复杂度

• 库的支持性，代码兼容

• 性能问题

  • 每个请求都是n个实例的创建，不然会污染，消耗会变得很大
  • 缓存 node serve 、 nginx判断当前用户有没有过期，如果没过期的话就缓存，用刚刚的结果。
  • 降级：监控cpu、内存占用过多，就spa，返回单个的壳

• 服务器负载变大，相对于前后端分离务器只需要提供静态资源来说，服务器负载更大，所以要慎重使用

所以在我们选择是否使用SSR前，我们需要慎重问问自己这些问题：

• 需要SEO的页面是否只是少数几个，这些是否可以使用预渲染（Prerender SPA Plugin）实现

• 首屏的请求响应逻辑是否复杂，数据返回是否大量且缓慢

三、如何实现

对于同构开发，我们依然使用webpack

• 전통적인 서버 측 렌더링 SSR
• 단일 페이지 애플리케이션 SPA
• 서버 측 렌더링 SSR

전통적인 웹 개발🎜

🎜웹 페이지 콘텐츠는 서버 측에서 렌더링되어 서버로 전송됩니다. 브라우저를 한 번에🎜🎜🎜🎜페이지를 열어 소스 코드를 보고 찾아보세요. 서버가 얻는 것은 모든 dom 구조입니다🎜

🎜단일 페이지 애플리케이션 SPA🎜 h3>🎜단일 페이지 애플리케이션은 우수한 사용자 경험을 제공하므로 점차 주류가 되고 있으며, 페이지 콘텐츠는 JS로 렌더링됩니다. 이 방법을 클라이언트 측 렌더링이라고 합니다🎜🎜🎜🎜페이지를 열어 소스 코드를 확인하세요. 브라우저 전용 호스트 요소 #app를 가져오고 콘텐츠 없음🎜

🎜서버 측 렌더링 SSR🎜

🎜SSR을 가져옵니다. 솔루션을 사용하면 백엔드는 완전한 첫 번째 화면 dom 구조를 렌더링하고 프런트 엔드에서 얻은 콘텐츠에는 애플리케이션이 활성화된 후 첫 번째 화면과 완전한 spa 구조가 포함됩니다. , 여전히 spa 모드🎜🎜🎜🎜프런트엔드 개발을 읽은 후 Vue SSR 공식 설명을 살펴보겠습니다. 🎜

🎜Vue.js는 클라이언트 애플리케이션을 구축하기 위한 프레임워크입니다. 기본적으로 Vue 구성 요소는 브라우저에서 출력되어 DOM을 생성하고 DOM을 조작할 수 있습니다. 그러나 서버 측에서 동일한 구성 요소를 HTML 문자열로 렌더링하고 브라우저에 직접 보낸 다음 마지막으로 이러한 정적 태그를 클라이언트에서 완전한 대화형 애플리케이션으로 "활성화"할 수도 있습니다. 🎜🎜서버 렌더링 Vue.js 대부분의 애플리케이션 코드는 서버와 클라이언트 모두에서 실행될 수 있으므로 애플리케이션은 "동형" 또는 "범용"으로 간주될 수도 있습니다. 🎜

🎜집별 설명에서 다음과 같은 결론을 얻었습니다. 🎜

• Vue SSR은 SPA에서 향상된 서버 측 렌더링입니다.
• Vue SSR을 통해 렌더링된 페이지 , 상호 작용을 달성하려면 클라이언트에서 활성화해야 합니다.
• Vue SSR에는 두 부분이 포함됩니다. 서버에서 렌더링하는 첫 번째 화면과 대화형 SPA li>

🎜2. 해결 방법🎜🎜🎜SSR은 주로 다음 두 가지 문제를 해결합니다. 🎜

• seo: 검색 엔진 우선순위 크롤링 페이지 HTML 구조, ssr 사용 시 서버는 이미 비즈니스와 관련된 HTML을 생성했으며 이는 seo
• 첫 번째 화면 렌더링: 사용자는 모든 js가 페이지에 로드될 때까지 기다리지 않고 페이지 보기를 볼 수 있습니다. (서버에 부담이 가므로 필요합니다. 서버 측에서 렌더링해야 할 것과 서버 측에서 렌더링해야 하는 것을 비교) 클라이언트에 넘겨주세요)

🎜그러나 SSR을 사용하면 다음도 있습니다. 단점: 🎜

• 🎜복잡성: 전체 프로젝트의 복잡성🎜
• 🎜라이브러리 지원, 코드 호환성🎜
• 🎜성능 문제🎜
  • 각 요청은 n 인스턴스의 생성입니다. 그렇지 않으면 오염되고 소비가 매우 커지게 됩니다.
  • 캐시 노드 제공 , nginx 현재 사용자가 만료되었는지 확인하고, 그렇지 않은 경우 캐시하고 결과만 사용하세요.
  • 다운그레이드: cpu 및 과도한 메모리 사용량을 모니터링한 다음 spa 및 단일 셸 반환
🎜정적인 리소스만 제공하면 되는 프런트엔드와 백엔드 분리형 서버에 비해 서버 부하가 커지므로 주의해서 사용해야 합니다🎜

🎜그래서 SSR 사용 여부를 선택할 때 다음 질문을 신중하게 자문해 보아야 합니다. 🎜

• 🎜 SEO가 필요한 페이지 몇 가지만 프리렌더(Prerender SPA Plugin)를 이용해 구현할 수 있는지🎜
• 🎜첫 화면의 요청과 응답 로직이 복잡한지, 데이터 반환이 크고 느립니다🎜

🎜3. 구현 방법 🎜🎜🎜동형 개발에는 여전히 webpack을 사용합니다. code> 패키징을 위해 서버측 첫 번째 화면 렌더링과 클라이언트 활성화라는 두 가지 문제를 해결해야 합니다🎜<p>여기서 서버측 첫 번째 화면 렌더링을 위한 서버 <code>번들 파일과 클라이언트 활성화를 위한 클라이언트 번들 파일을 생성해야 합니다bundle文件用于服务端首屏渲染和一个客户端bundle文件用于客户端激活

代码结构 除了两个不同入口之外，其他结构和之前vue应用完全相同

src 
├── router 
├────── index.js # 路由声明 
├── store 
├────── index.js # 全局状态 
├── main.js # ⽤于创建vue实例 
├── entry-client.js # 客户端⼊⼝，⽤于静态内容“激活” 
└── entry-server.js # 服务端⼊⼝，⽤于⾸屏内容渲染

路由配置

import Vue from "vue"; import Router from "vue-router"; Vue.use(Router);
//导出⼯⼚函数
export function createRouter(){
    return new Router({
    mode: 'history',
    routes: [ 
       // 客户端没有编译器，这⾥要写成渲染函数 
        { path: "/", component: { render: h => h('div', 'index page') } }, 
        { path: "/detail", component: { render: h => h('div', 'detail page') }} 
    ] 
  });
 }

主文件main.js

跟之前不同，主文件是负责创建vue实例的工厂，每次请求均会有独立的vue实例创建

import Vue from "vue";
import App from "./App.vue";
import { createRouter } from "./router"; 
// 导出Vue实例⼯⼚函数，为每次请求创建独⽴实例 
// 上下⽂⽤于给vue实例传递参数
export function createApp(context) {
    const router = createRouter();
    const app = new Vue({ router, context, render: h => h(App) });
    return { app, router };
  }

编写服务端入口src/entry-server.js

它的任务是创建Vue实例并根据传入url指定首屏

import { createApp } from "./main";
// 返回⼀个函数，接收请求上下⽂，返回创建的vue实例
export default context => {
// 这⾥返回⼀个Promise，确保路由或组件准备就绪
    return new Promise((resolve, reject) => {
        const { app, router } = createApp(context);
        // 跳转到⾸屏的地址
        router.push(context.url);
        // 路由就绪，返回结果
        router.onReady(() => {
        resolve(app);
        }, reject);
    }); 
};

编写客户端入口entry-client.js

客户端入口只需创建vue实例并执行挂载，这⼀步称为激活

import { createApp } from "./main"; 
// 创建vue、router实例
const { app, router } = createApp();
// 路由就绪，执⾏挂载
router.onReady(() => { app.$mount("#app"); });

对webpack进行配置

安装依赖

npm install webpack-node-externals lodash.merge -D

对vue.config.js进行配置

// 两个插件分别负责打包客户端和服务端
const VueSSRServerPlugin = require("vue-server-renderer/server-plugin");
const VueSSRClientPlugin = require("vue-server-renderer/client-plugin");
const nodeExternals = require("webpack-node-externals");
const merge = require("lodash.merge");
// 根据传⼊环境变量决定⼊⼝⽂件和相应配置项
const TARGET_NODE = process.env.WEBPACK_TARGET === "node";
const target = TARGET_NODE ? "server" : "client";
module.exports = {
    css: {
        extract: false
    },
    outputDir: './dist/'+target,
    configureWebpack: () => ({
        // 将 entry 指向应⽤程序的 server / client ⽂件
        entry: `./src/entry-${target}.js`,
        // 对 bundle renderer 提供 source map ⽀持
        devtool: 'source-map',
        // target设置为node使webpack以Node适⽤的⽅式处理动态导⼊，
        // 并且还会在编译Vue组件时告知`vue-loader`输出⾯向服务器代码。
        target: TARGET_NODE ? "node" : "web",
        // 是否模拟node全局变量
        node: TARGET_NODE ? undefined : false,
        output: {
            // 此处使⽤Node⻛格导出模块
            libraryTarget: TARGET_NODE ? "commonjs2" : undefined
        },
        // https://webpack.js.org/configuration/externals/#function
        // https://github.com/liady/webpack-node-externals
        // 外置化应⽤程序依赖模块。可以使服务器构建速度更快，并⽣成较⼩的打包⽂件。
        externals: TARGET_NODE
        ? nodeExternals({
            // 不要外置化webpack需要处理的依赖模块。
            // 可以在这⾥添加更多的⽂件类型。例如，未处理 *.vue 原始⽂件，
            // 还应该将修改`global`（例如polyfill）的依赖模块列⼊⽩名单
            whitelist: [/\.css$/]
        })
        : undefined,
        optimization: {
            splitChunks: undefined
        },
        // 这是将服务器的整个输出构建为单个 JSON ⽂件的插件。
        // 服务端默认⽂件名为 `vue-ssr-server-bundle.json`
        // 客户端默认⽂件名为 `vue-ssr-client-manifest.json`。
        plugins: [TARGET_NODE ? new VueSSRServerPlugin() : new
                  VueSSRClientPlugin()]
    }),
    chainWebpack: config => {
        // cli4项⽬添加
        if (TARGET_NODE) {
            config.optimization.delete('splitChunks')
        }

        config.module
            .rule("vue")
            .use("vue-loader")
            .tap(options => {
            merge(options, {
                optimizeSSR: false
            });
        });
    }
};

对脚本进行配置，安装依赖

npm i cross-env -D

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

执行打包：npm run build

最后修改宿主文件/public/index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <!--vue-ssr-outlet-->
    </body>
</html>

是服务端渲染入口位置，注意不能为了好看而在前后加空格

安装vuex

npm install -S vuex

创建vuex工厂函数

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export function createStore () {
    return new Vuex.Store({
        state: {
            count:108
        },
        mutations: {
            add(state){
                state.count += 1;
            }
        }
    })
}

在main.js文件中挂载store

import { createStore } from './store'
export function createApp (context) {
    // 创建实例
    const store = createStore()
    const app = new Vue({
        store, // 挂载
        render: h => h(App)
    })
    return { app, router, store }
}

服务器端渲染的是应用程序的"快照"，如果应用依赖于⼀些异步数据，那么在开始渲染之前，需要先预取和解析好这些数据

在store进行一步数据获取

export function createStore() {
    return new Vuex.Store({
        mutations: {
            // 加⼀个初始化
            init(state, count) {
                state.count = count;
            },
        },
        actions: {
            // 加⼀个异步请求count的action
            getCount({ commit }) {
                return new Promise(resolve => {
                    setTimeout(() => {
                        commit("init", Math.random() * 100);
                        resolve();
                    }, 1000);
                });
            },
        },
    });
}

组件中的数据预取逻辑

export default {
    asyncData({ store, route }) { // 约定预取逻辑编写在预取钩⼦asyncData中
        // 触发 action 后，返回 Promise 以便确定请求结果
        return store.dispatch("getCount");
    }
};

服务端数据预取，entry-server.js

import { createApp } from "./app";
export default context => {
    return new Promise((resolve, reject) => {
        // 拿出store和router实例
        const { app, router, store } = createApp(context);
        router.push(context.url);
        router.onReady(() => {
            // 获取匹配的路由组件数组
            const matchedComponents = router.getMatchedComponents();

            // 若⽆匹配则抛出异常
            if (!matchedComponents.length) {
                return reject({ code: 404 });
            }

            // 对所有匹配的路由组件调⽤可能存在的`asyncData()`
            Promise.all(
                matchedComponents.map(Component => {
                    if (Component.asyncData) {
                        return Component.asyncData({
                            store,
                            route: router.currentRoute,
                        });
                    }
                }),
            )
                .then(() => {
                // 所有预取钩⼦ resolve 后，
                // store 已经填充⼊渲染应⽤所需状态
                // 将状态附加到上下⽂，且 `template` 选项⽤于 renderer 时，
                // 状态将⾃动序列化为 `window.__INITIAL_STATE__`，并注⼊ HTML
                context.state = store.state;

                resolve(app);
            })
                .catch(reject);
        }, reject);
    });
};

客户端在挂载到应用程序之前，store 就应该获取到状态，entry-client.js

// 导出store
const { app, router, store } = createApp();
// 当使⽤ template 时，context.state 将作为 window.__INITIAL_STATE__ 状态⾃动嵌⼊到最终的 HTML 
// 在客户端挂载到应⽤程序之前，store 就应该获取到状态：
if (window.__INITIAL_STATE__) {
    store.replaceState(window.__INITIAL_STATE__);
}

客户端数据预取处理，main.js

Vue.mixin({
    beforeMount() {
        const { asyncData } = this.$options;
        if (asyncData) {
            // 将获取数据操作分配给 promise
            // 以便在组件中，我们可以在数据准备就绪后
            // 通过运⾏ `this.dataPromise.then(...)` 来执⾏其他任务
            this.dataPromise = asyncData({
                store: this.$store,
                route: this.$route,
            });
        }
    },
});

修改服务器启动文件

// 获取⽂件路径
const resolve = dir => require('path').resolve(__dirname, dir)
// 第 1 步：开放dist/client⽬录，关闭默认下载index⻚的选项，不然到不了后⾯路由
app.use(express.static(resolve('../dist/client'), {index: false}))
// 第 2 步：获得⼀个createBundleRenderer
const { createBundleRenderer } = require("vue-server-renderer");
// 第 3 步：服务端打包⽂件地址
const bundle = resolve("../dist/server/vue-ssr-server-bundle.json");
// 第 4 步：创建渲染器
const renderer = createBundleRenderer(bundle, {
    runInNewContext: false, // https://ssr.vuejs.org/zh/api/#runinnewcontext
    template: require('fs').readFileSync(resolve("../public/index.html"), "utf8"), // 宿主⽂件
    clientManifest: require(resolve("../dist/client/vue-ssr-clientmanifest.json")) // 客户端清单
});
app.get('*', async (req,res)=>{
    // 设置url和title两个重要参数
    const context = {
        title:'ssr test',
        url:req.url
    }
    const html = await renderer.renderToString(context);
    res.send(html)
})

小结

• 使用ssr不存在单例模式，每次用户请求都会创建一个新的vue实例

• 实现ssr需要实现服务端首屏渲染和客户端激活

• 服务端异步获取数据asyncData可以分为首屏异步获取和切换组件获取

  • 首屏异步获取数据，在服务端预渲染的时候就应该已经完成
  • 切换组件通过mixin混入，在beforeMount
  
두 개의 서로 다른 입구를 제외하고 코드 구조는 다음과 같습니다. 이전 vue 애플리케이션과 완전히 동일합니다

rrreee

Routing 구성rrreee메인 파일 main.js이전과 다릅니다. 메인 파일은 vue를 생성하는 팩토리입니다. 인스턴스. 각 요청은 독립적인 vue 인스턴스를 생성합니다

rrreee🎜서버 항목 src/entry-server.js를 작성하세요🎜🎜이 작업은 Vue 인스턴스하고 들어오는 url에 따라 첫 번째 화면을 지정합니다.🎜rrreee🎜클라이언트 입구 entry-client.js를 작성합니다🎜🎜클라이언트 입구만 vue 인스턴스를 생성하고 마운트를 수행해야 합니다. 이 단계를 활성화🎜rrreee🎜webpack 구성🎜🎜종속성 설치🎜🎜npm install webpack-node-externals lodash라고 합니다. .merge -D🎜🎜vue.config.js 구성🎜rrreee🎜스크립트 구성 및 종속성 설치🎜🎜npm i cross-env -D🎜 rrreee 🎜패키징 실행: npm run build🎜🎜마지막으로 호스트 파일 /public/index.html을 수정합니다.🎜rrreee

🎜는 서버 측 렌더링 항목 위치입니다. 보기에는 좋지만 앞뒤에 공백을 추가하세요. 🎜

🎜vuex🎜🎜npm install -S vuex🎜🎜Create vuex code> 팩토리 함수🎜rrreee 🎜<code>main.js 파일에 store 마운트🎜rrreee🎜서버 측 렌더링은 애플리케이션이 의존하는 경우 애플리케이션의 "스냅샷"입니다. 일부 비동기 데이터의 경우 렌더링을 시작하기 전에 이러한 데이터를 미리 가져오고 구문 분석해야 합니다. 🎜🎜store에서 1단계 데이터 수집 수행🎜rrreee🎜구성 요소의 데이터 미리 가져오기 논리🎜rrreee🎜Server- 사이드 데이터 프리페치, entry-server.js🎜rrreee🎜클라이언트가 애플리케이션에 마운트되기 전에 store는 entry-client.js🎜rrreee 🎜클라이언트측 데이터 프리패치 처리, <code>main.js🎜rrreee🎜서버 시작 파일 수정🎜rrreee

요약

• 🎜 싱글톤 모드에서는 ssr 사용이 존재하지 않습니다. 각 사용자 요청은 새로운 vue 인스턴스를 생성합니다🎜🎜
• 🎜구현ssr은 서버 측 첫 화면 렌더링과 클라이언트 측 활성화를 구현해야 합니다🎜🎜
• 🎜서버 측 비동기 데이터 획득 asyncData는 분할될 수 있습니다 첫 번째 화면 비동기 획득 및 스위칭 구성 요소 획득🎜
  • 첫 번째 화면은 비동기적으로 데이터를 가져오며, 이는 서버 측 사전 렌더링 중에 완료되어야 합니다.🎜
  • 전환 구성 요소는 mixin을 통해 혼합됩니다. , beforeMount 후크 🎜🎜🎜🎜🎜에서 데이터 수집이 완료됩니다(학습 동영상 공유: 🎜vuejs tutorial🎜, 🎜web front-end🎜)🎜

위 내용은 SSR이란 무엇입니까? vue에서 SSR 서버 측 렌더링을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!