带你初步了解服务端SSR

狗儿
357 阅读2分钟

什么是SSR

ssr是指将组件通过服务端直接渲染成为HTML字符串，然后作为服务端响应返回给浏览器，最后浏览器将静态的HTML激活(hydrate)为能够交互的客户端应用。

SSR的优点

  • 更快的首屏加载：就是能够让你的首页更快的加载出来。
  • 统一的心智模型：你可以使用相同的语言和相同的声明式，面向组件的心智模型来开发整个应用，而不需要在后端模版系统和前端框架之间来回切换。
  • SEO的搜索：搜索引擎爬虫可以直接看到完全的渲染页面。

SSR的缺点

  • 开发限制：浏览器端特定代码只能在某些生命周期钩子中使用，一些外部库可能需要特殊处理才能在服务端渲染的应用中运行。
  • 更多的与构建配置和部署的相关要求：服务端渲染需要一个让node.js服务运行的环境，不像完全静态的SPA那样可以部署在任意静态文件服务器上
  • 更高的服务端负载：在Node服务渲染一个完整的应用要比仅仅托管静态文件更加占用CPU资源，如果你预期有高流量，请做好相应服务器的负载准备，并采用合理的缓存策略。

那现在我们先写一个简单的列子：

  1. 首先先用npm init -y 创建一个项目
  2. 在package.json中添加type: "module"
  3. 然后使用npm i vue命令下载vue
  4. 执行 npm install express 下载 express

这样你就能够获取一个初始的项目了，我们可以开始写相关代码了

  • 我们先创建一个通用文件app.js文件
import {createSSRApp} from "vue"
export function createApp() {
  return createSSRApp({
    data: () => ({count: 1}),
    template: `<button @click="count++">{{count}}</button>`
  })
}
  • 创建客户端的文件client.js
import {createApp} from "./app.js"

createApp().mount("#app")
  • 创建一个服务端文件 server.js
import express from 'express'

import {renderToString} from 'vue/server-renderer'
import { createApp } from './app.js'


const server = express()
server.use(express.static("."))
server.get("/", (req, res) => {
  const app = createApp()
 

  renderToString(app).then((html) => {
    res.send(`
      <!DOCTYPE html>
      <html>
        <head>
          <title>Vue SSR Example</title>
          <script type="importmap">
            {
              "imports": {
                "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
              } 
            }
          </script>
          <script type="module" src="/client.js"></script>
        </head>
        <body>
          <div id="app">${html}</div>
        </body>
      </html>  
    `)
  })
})

server.listen(3000, () => {
  console.log('ready')
})

这些做完后，打开终端运行 node server.js 命令，打开 http://localhost:3000 地址，你就能看见一个ssr的页面了。

avatar
文章
阅读
粉丝