您当前的位置: 首页 > 

彭世瑜

暂无认证

  • 5浏览

    0关注

    2791博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

使用Vue3.js + Rendertron创建SSR服务端渲染应用

彭世瑜 发布时间:2022-10-08 14:54:33 ,浏览量:5

文档

  • https://github.com/GoogleChrome/rendertron
使用Vue3.js创建CSR客户端渲染应用

在这里插入图片描述

index.html

DOCTYPE html>

  
    
    
    
    Document
  
  
    

    {{ message }}

    
      const { createApp } = Vue;

      createApp({
        data() {
          return {
            message: "Hello Vue!",
          };
        },
      }).mount("#app");
    
  


启动静态服务器

npx http-server -c-1

访问:http://127.0.0.1:8082/

浏览器获取的内容


DOCTYPE html>

  
    
    
    
    Document
  
  
    

    {{ message }}

    
      const { createApp } = Vue;

      createApp({
        data() {
          return {
            message: "Hello Vue!",
          };
        },
      }).mount("#app");
    
  


使用Vue3.js + Rendertron创建SSR服务端渲染应用

在这里插入图片描述

安装启动

# 安装
pnpm install rendertron

# 启动
npx rendertron

渲染刚刚创建的Vue.js应用

http://localhost:3000/render/

eg:

http://localhost:3000/render/http://127.0.0.1:8082/

返回客户端的html


DOCTYPE html>
    
    
    
    Document
  
  
    

    Hello Vue!

    
  


服务端可根据请求头 User Agent,判断如果是Baiduspider,返回渲染后的页面 在这里插入图片描述

参考 快速在你的vue/react应用中实现ssr(服务端渲染)

关注
打赏
1665367115
查看更多评论
立即登录/注册

微信扫码登录

0.0954s