8.4.1 搭建自己的SSR

最新推荐文章于 2023-08-25 17:15:02 发布

w1fl1w

最新推荐文章于 2023-08-25 17:15:02 发布

阅读量7.1k

点赞数

分类专栏：前端 vue.js SSR

本文链接：https://blog.csdn.net/w1fl1w/article/details/109851327

版权

本文为拉勾网大前端高薪训练营第一期笔记

心得体会

SSR是未来前端页面必不可少的一个组成成分，掌握了Vue SSR基本上其他框架都非常类似。

3-4-1 搭建自己的SSR

Vue SSR 介绍

是什么

官方文档:https://ssr.vuejs.org/
Vue SSR(Vue.js Server-Side Rendering) 是 Vue.js 官方提供的一个服务端渲染(同构应用)解决方案
使用它可以构建同构应用
还是基于原有的 Vue.js 技术栈

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

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

使用场景

在对你的应用程序使用服务器端渲染 (SSR) 之前，你应该问的第一个问题是，是否真的需要它。
技术层面:

更快的首屏渲染速度
更好的 SEO

业务层面:

不适合管理系统
适合门户资讯类网站，例如企业官网、知乎、简书等
适合移动网站

如何实现 Vue SSR

(1)基于 Vue SSR 官方文档提供的解决方案

官方方案具有更直接的控制应用程序的结构，更深入底层，更加灵活，同时在使用官方方案的过程中，也会对Vue SSR有更加深入的了解。

该方式需要你熟悉 Vue.js 本身，并且具有 Node.js 和 webpack 的相当不错的应用经验。
(2)Nuxt.js 开发框架

NUXT提供了平滑的开箱即用的体验，它建立在同等的Vue技术栈之上，但抽象出很多模板，并提供了一些额外的功能，例如静态站点生成。通过 Nuxt.js 可以快速的使用 Vue SSR 构建同构应用。

Vue SSR 基本使用

接下来我们以 Vue SSR 的官方文档为参考，来学习一下它的基本用法。

渲染一个 Vue 实例

目标:
了解如何使用 VueSSR 将一个 Vue 实例渲染为 HTML 字符串

首先我们来学习一下服务端渲染中最基础的工作:模板渲染。
说白了就是如何在服务端使用 Vue 的方式解析替换字符串。
在它的官方文档中其实已经给出了示例代码，下面我们来把这个案例的实现过程以及其中含义演示一下。

mkdir demo01
cd demo01
npm install vue vue-server-renderer

demo01/index.js :

// 第 1 步:创建一个 Vue 实例 
const Vue = require("vue")
const app = new Vue({
  template: `<div>{
  { message }}</div>`, data: {
    message: "Hello World",
  },
})
// 第 2 步:创建一个 renderer
const renderer = require("vue-server-renderer").createRenderer()
// 第 3 步:将 Vue 实例渲染为 HTML 
renderer.renderToString(app, (err, html) => {
  if (err) throw err
  console.log(html)
  // => <div data-server-rendered="true">Hello World</div>
})
// 在 2.5.0+，如果没有传入回调函数，则会返回 Promise: 
renderer
  .renderToString(app).then((html) => {
    console.log(html)
  })
  .catch((err) => {
    console.error(err)
  })

与服务器集成

在 Node.js 服务器中使用时相当简单直接，例如 Express。首先安装 Express 到项目中:
然后使用 Express 创建一个基本的 Web 服务:

npm i express
const express = require("express")
const app = express()
app.get("/", (req, res) => {
  res.send("Hello World!")
})
app.listen(3000, () => console.log("app listening at http://localhost:port"))
//启动 Web 服务:
//在 Web 服务中渲染 Vue 实例:
nodemon index.js
const Vue = require("vue")
const server = require("express")()
const renderer = require("vue-server-renderer").createRenderer()
server.get("*", (req, res) => {
  const app = new Vue({
    data: {
      url: req.url,
    },
    template: <div>访问的 URL 是: {
  { url }}</div>, });

  renderer.renderToString(app, (err, html) => {
      if (err) {
        res.status(500).end("Internal Server Error")
        return
      }
      //or res.setHeader('Content-Type', 'text/html; charset=utf8')
      res.end(<!DOCTYPE html > <html lang="en" > <head><title>Hello < /title> <meta charset="UTF-8"> </head > <body>${ html } < /body> </html >)
    });
});
server.listen(8080)

使用一个页面模板

const renderer = require('vue-server-renderer').createRenderer({
	template: fs.readFileSync('./index.template.html', 'utf-8')
})

renderer.renderToString(app, (err, html)=>{
	if(err){return res.status(500).end('Internal Server Error.')}
	res.setHeader('Content-Type', 'text/html; charset=utf8')
	res.end(html)
})

index.template.html内容

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  {
  {
  { meta.inject().title.text() }}}
  {
  {
  { meta.inject().meta.text() }}}
</head>

<body>
  <!--vue-ssr-outlet-->
</body>

</html>

在模板中使用外部数据

index.template.html

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  {
  { title }}
	<!-- 想要原文输出，而不是字符串的形式，用三个大括号 -->
	{
  {
  {meta}}}
</head>

renderer.renderToString(app, {
	title: '拉勾教育',
	meta: `<meta name="description" content="拉勾教育"`
}, (err, html)=>{
	if(err){return res.status(500).end('Internal Server Error.')}
	res.setHeader('Content-Type', 'text/html; charset=utf8')
	res.end(html)
})

需要重新启动node server.js生效

构建流程

在这里插入图片描述

图1

之前的做法只有服务端bundle，没有客户端bundle

项目结构

src
├── components
│ ├── Foo.vue
│ ├── Bar.vue
│ └── Baz.vue
├── App.vue
├── app.js # 通用 entry(universal entry)
├── entry-client.js # 仅运行于浏览器
└── entry-server.js # 仅运行于服务器

安装依赖

npm i vue vue-server-renderer express cross-env

vue: Vue.js 核心库

vue-server-renderer: Vue 服务端渲染工具

express: 基于 Node 的 Web 服务框架

cross-env: 通过 npm scripts 设置跨平台环境变量

开发依赖

最低0.47元/天解锁文章

w1fl1w

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
8.4.1 搭建自己的SSR

本文为拉勾网大前端高薪训练营第一期笔记心得体会SSR是未来前端页面必不可少的一个组成成分，掌握了Vue SSR基本上其他框架都非常类似。3-4-1 搭建自己的SSRVue SSR 介绍是什么官方文档:https://ssr.vuejs.org/Vue SSR(Vue.js Server-Side Rendering) 是 Vue.js 官方提供的一个服务端渲染(同构应用)解决方案使用它可以构建同构应用还是基于原有的 Vue.js 技术栈官方文档的解释:Vue.js 是构建客户端应
复制链接

扫一扫