自己构建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. 实操好用~~~~~antd 中 Table表格动态合并~~~

    我写了两种方法 一种是前端处理数据渲染 一种是后端处理数据渲染 数据结构略有不同 下面上代码 <template> <page-view :title="title&quo ...

  2. Navicat可视化软件及多表查询的方法

    Navicat可视化软件及多表查询的方法 一.多表查询的两种方法 1.连表操作 1.内连接 inner join ----->> 只连接两张表中公有的数据部分 select * from ...

  3. 字节输出流的续写和换行-字节输入流_inputS Stream类

    字节输出流的续写和换行 package demo02.OutputStream; import java.io.FileOutputStream; import java.io.IOException ...

  4. 同时打开多个.exe文件怎么解决

    同时打开多个.exe文件怎么解决 小黑最近遇到一个问题,就是Unity封装好用来直接打开.exe的函数不好用了!! 怎么解决? 于是发现了.bat文件!好用至极啊 前提 小黑是征求过客户同意之后才这么 ...

  5. Selenium中对于颜色的处理及拓展

    Selenium中对于颜色的处理及拓展 获取百度一下按钮的背景色 from selenium import webdriver from time import sleep driver = webd ...

  6. springboot集成ElasticApm

    jvm参数方式: -javaagent:D:/codesoft/elastic-apm-agent-1.18.0.jar -Delastic.apm.service_name=my-applicati ...

  7. 现代图片性能优化及体验优化指南 - 图片类型及 Picture 标签的使用

    图片资源,在我们的业务中可谓是占据了非常大头的一环,尤其是其对带宽的消耗是十分巨大的. 对图片的性能优化及体验优化在今天就显得尤为重要.本文,就将从各个方面阐述,在各种新特性满头飞的今天,我们可以如何 ...

  8. 三分钟实战手写Spring Boot Starter

    1 背景 在平时的开发中,开发的同学会把一些通用的方法,写成一个工具类,例如日期转换的,JSON转换的等等,方便业务后续调用,使代码更容易维护. 如果一些更常用的方法,例如鉴权的,加解密的等等,几乎每 ...

  9. TCP/IP协议(4): 地址解析协议(ARP) —— 网络地址转换为物理地址的方式

    TCP/IP协议(4): 地址解析协议(ARP)--网络地址转换为物理地址的方式 关于地址解析协议(Address Resolution Protocol, ARP) 关于 ARP 地址解析协议(Ad ...

  10. 题解 P1627 [CQOI2009] 中位数

    傻逼题但是被自己的傻逼操作爆了好几次零(悲愤 .... 没什么好讲的,一眼题... //SIXIANG #include <iostream> #define int long long ...