自己构建ssr

前提：了解  koa, koa-router, koa-static, webpack

文件结构

ssr  中的router store 都是  一个工厂函数

在服务器端渲染(SSR)期间，我们本质上是在渲染我们应用程序的"快照"，所以如果应用程序依赖于一些异步数据，那么在开始渲染过程之前，需要先预取和解析好这些数据。

  1. 在渲染前，要预先获取所有需要的异步数据，然后存到Vuex的store中。
  2. 在后端渲染时，通过Vuex将获取到的数据注入到相应组件中。
  3. 把store中的数据设置到window.__INITIAL_STATE__属性中。
  4. 在浏览器环境中，通过Vuex将window.__INITIAL_STATE__里面的数据注入到相应组件中。

构建bundle json代码

参考链接：https://segmentfault.com/a/1190000016637877#articleHeader4

ssr 学习总结的更多相关文章

  1. JavaWeb学习总结(三)——Tomcat服务器学习和使用(二) 包含https 非对称秘钥 NB

    JavaWeb学习总结(三)--Tomcat服务器学习和使用(二) 一.打包JavaWeb应用 在Java中,使用"jar"命令来对将JavaWeb应用打包成一个War包,jar命 ...

  2. 各种音视频编解码学习详解 h264 ，mpeg4 ，aac 等所有音视频格式

    编解码学习笔记(一):基本概念 媒体业务是网络的主要业务之间.尤其移动互联网业务的兴起,在运营商和应用开发商中,媒体业务份量极重,其中媒体的编解码服务涉及需求分析.应用开发.释放 license收费等 ...

  3. PhotoSwipe.js 相册展示插件学习

    PhotoSwipe.js官网:http://photoswipe.com/,在这个网站上可以下载到PhotoSwipe的文件以及相关的例子. 这个组件主要是用来展示图片.相册用的,还是很实用的. 一 ...

  4. 基于 Asp.Net Core MVC 的 Angular4 SSR 英雄指南

    为啥有这篇文章 在之前,类似 Angular.React.Vue 之类的前端框架的一个痛点就是无法在服务端提前把网页内容写入到网页中再发回浏览器,这给网站的 SEO 增加了不少困难,因为爬虫爬到的页面 ...

  5. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十五║初探SSR服务端渲染（个人博客二）

    缘起 时间真快,现在已经是这个系列教程的下半部 Vue 第 12 篇了,昨天我也简单思考了下,可能明天再来一篇,Vue 就基本告一段落了,因为什么呢,这里给大家说个题外话,当时写博文的时候,只是想给大 ...

  6. 实现ssr服务端渲染

    前言 前段时间寻思做个个人网站,然后就立马行动了.  个人网站如何实现选择什么技术方案,自己可以自由决定.  刚好之前有大致想过服务端渲染,加载速度快,还有 SEO 挺适合个人网站的.  所以就自己造 ...

  7. vue 源码学习（一） 目录结构和构建过程简介

    Flow vue框架使用了Flow作为类型检查,来保证项目的可读性和维护性.vue.js的主目录下有Flow的配置.flowconfig文件,还有flow目录,指定了各种自定义类型. 在学习源码前可以 ...

  8. ss-R：// 链接的含义

    1.问题 ss-R:// Mi41LmZ1Y2twcHBwcC50b2RheToyNDI4ODphdXRoX2FlczEyOF9tZDU6YWVzLTI1Ni1jdHI6dGxzMS4yX3RpY2t ...

  9. 前端SEO与爬虫与SSR(Server Side Render)

    讲真,之前没考虑过这个问题.因为项目原因,自己用python的一些工具,爬取了淘宝.京东.百度等的一些图片和图片名称之类的信息.以为爬虫只是解析html文本,然后提取关键字,保存自己想要的信息即可,或 ...

  10. Vue学习目录

    前面的话 近年来,前端框架发展火热,新的框架和名词不停地出现在开发者眼前,而且开发模式也产生了一定的变化.目前来看,前端MVVM框架的出现给开发者带来了不小的便利,其中的代表就有Angular.js. ...

随机推荐

  1. Flutter新版本2.X系列--01创建项目

    1.新建项目,打开Android studio,点击红圈部分 2.选择第一个 3.设置你的项目名称,flutter sdk位置,以及项目存储路径 4.设置包名,这个要唯一 5.好啦 ~ 作为一名前端开 ...

  2. 数据同步gossip协议原理与应用场景介绍

    作者:京东物流 冯鸿儒 1 简介 Gossip是一种p2p的分布式协议.它的核心是在去中心化结构下,通过将信息部分传递,达到全集群的状态信息传播,传播的时间收敛在O(Log(N))以内,其中N是节点的 ...

  3. v-html渲染页面的时候 css样式无效

    感谢: https://www.cnblogs.com/niuxiaoxian/p/9443873.html 当我们用v-html渲染页面的时候会发现样式并没有添加上,如下 复制代码 <temp ...

  4. fiddler的简单使用

    一.fiddler接口测试介绍 二.fiddler过滤器的使用 fiddler可以指定只抓哪些包,通过filters实现 如果需要抓取多个网站,各个需要抓取的网站之间用分号隔开 三.fiddler抓取 ...

  5. P27_wxss - 全局样式和局部样式

    全局样式 定义在 app.wxss 中的样式为全局样式,作用于每一个页面. 局部样式 在页面的 .wxss 文件中定义的样式为局部样式,只作用于当前页面. 注意: 当局部样式和全局样式冲突时,根据就近 ...

  6. tomcat7 与 tomcat8 加载 jar包的顺序

    本文为博主原创,转载请注明出处: 最近在进行服务的环境升级,将 服务的tomcat7升级到 tomcat8:当把 tomcat 升级到 tomcat8 的时候,进行服务启动异常,报 jar 包冲突的 ...

  7. RabbitMQ 延迟消息实战

    RabbitMQ 延迟消息实战 现实生活中有一些场景需要延迟或在特定时间发送消息,例如智能热水器需要 30 分钟后打开,未支付的订单或发送短信.电子邮件和推送通知下午 2:00 开始的促销活动. Ra ...

  8. DomDom

    DomDom 目录 DomDom 1 信息收集 1.1 端口扫描 1.2 后台目录扫描 1.2.1 目录分析 2 GetShell 2.1 尝试命令执行 2.2 nc反弹shell失败 2.3 PHP ...

  9. 解析关于Tomcat Servlet-request的获取请求参数及几种常用方法

    摘要:本文主要讲解Tomcat之Servlet-request请求参数.Servlet转发机制.常用方法 本文分享自华为云社区<浅谈Tomcat之Servlet-request获取请求参数及常用 ...

  10. 02#Web 实战：实现树形控件

    前言 这是一篇个人练习 Web 前端各种常见的控件.组件的实战系列文章.本篇文章将介绍个人通过 JQuery + 无序列表 + CSS 动画完成一个简易的树形控件. 最终实现的效果是: 这样结构比较复 ...