服务端渲染(ssr)初了解
之前接触的比较多的是SPA单页面应用,前端路由渲染,对于node服务端渲染刚开始了解到,服务端渲染的话相对于SPA来说有助于SEO优化,首屏加载更快。
和之前的SPA项目不同,之前公司spa的发布部署有两种方式,一种是前端项目打包之后发给后端,后端集成到项目里一起发布,
另一种是前端项目打包之后单独部署,和后端接口分开部署。
ssr是这样的:包括前端和后端,后端只提供接口,前端需要写client客户端和server服务端代码,client也就是最后打包出来的js css代码,
server端是用模板引擎渲染出页面,引用client的js,css。客户端的静态资源部署到cdn, 服务端用eggjs(基于koa)框架,利用nunjucks进行模板渲染。
相当于服务端的工作就是把已有的页面用模板渲染的方式来渲染出来。
如果是已有的spa项目想要用ssr来渲染的话,可对已有项目进行打包拆分,然后用egg来进行渲染。
node中间层。大致目录结构:

eggjs官网文档 ,可以利用脚手架快速初始化。
需要注意的是public文件夹下通常是放静态资源,实际项目中是没有用到这个,是吧js和css静态资源放到cdn,然后在模板文件中直接去根据地址名称来引用的。
写了个简单的demo。。 egg-demo:https://github.com/leitingting08/egg-demo
服务端渲染(ssr)初了解的更多相关文章
- 服务端渲染 SSR
1.概述 SSR:网站内容由服务端渲染,然后返回客户端(查看网页源代码,所有内容都在源代码里面). 2.SSR优势 (1)SSR利于SEO. (2)SSR减少请求量和客户端渲染时间.
- 使用 Vue 2.0 实现服务端渲染的 HackerNews
Vue 2.0 支持服务端渲染 (SSR),并且是流式的,可以做组件级的缓存,这使得极速渲染成为可能.同时, 和 2.0 也都能够配合 SSR 提供同构路由和客户端 state hydration.v ...
- vue服务端渲染之nuxtjs
前言 本篇主要针对nuxtjs中的一些重要概念整理和代码实现! 在学习vue服务端渲染之前,先搞清楚几个概念: 什么是客户端渲染(CSR) 什么是服务端渲染(SSR) CSR和SSR有什么异同 客户端 ...
- 服务端渲染技术NUXT
什么是服务端渲染 服务端渲染又称SSR (Server Side Render),是在服务端完成页面的内容,而不是在客户端通过AJAX获取数据. 服务器端渲染(SSR)的优势主要在于:更好的 SE ...
- 6.前端基于react,后端基于.net core2.0的开发之路(6) 服务端渲染(SSR)
0.源码地址 https://gitee.com/teambp/ScaffoldClient 这个地址下载对应源码. 1.服务端渲染是啥? 就是在服务器进行页面渲染(废话),当页面展示后,显示的就是 ...
- 使用 PHP 来做 Vue.js 的 SSR 服务端渲染
对于客户端应用来说,服务端渲染是一个热门话题.然而不幸的是,这并不是一件容易的事,尤其是对于不用 Node.js 环境开发的人来说. 我发布了两个库让 PHP 从服务端渲染成为可能.spatie/se ...
- Vue 爬坑之路(十一)—— 基于 Nuxt.js 实现服务端渲染(SSR)
直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十五║初探SSR服务端渲染(个人博客二)
缘起 时间真快,现在已经是这个系列教程的下半部 Vue 第 12 篇了,昨天我也简单思考了下,可能明天再来一篇,Vue 就基本告一段落了,因为什么呢,这里给大家说个题外话,当时写博文的时候,只是想给大 ...
- 实现ssr服务端渲染
前言 前段时间寻思做个个人网站,然后就立马行动了. 个人网站如何实现选择什么技术方案,自己可以自由决定. 刚好之前有大致想过服务端渲染,加载速度快,还有 SEO 挺适合个人网站的. 所以就自己造 ...
随机推荐
- Mapper method 'com.autoyol.mapper.trans.AccountLogMapper.getTotalIncomByMemNoLastest attempted to return null from a method with a primitive return type (int).解决方法
1.打开日志输出,降低日志级别. <AppenderRef ref="console" level="trace"></AppenderRef ...
- 16个非常酷的jQuery插件
摘要: 下面所有的插件有很大的功能,我相信大多数会帮助你即将到来的项目.借助他们可以使你的网站更加绚丽多彩. Lens Flare in JavaScript 这个jQuery插件可以帮助你处理图片, ...
- Git------如何使用Git Bash Here提交代码
转载:码云帮助文档地址 http://git.mydoc.io/?t=154712 1.打开“Git Bash Here” 2.输入: ssh-keygen -t rsa -C "xxxxx ...
- 使用InternetGetConnectedState判断本地网络状态(C#举例)
函数原型:函数InternetGetConnectedState返回本地系统的网络连接状态. 语法: BOOL InternetGetConnectedState( __out LPDWORD lpd ...
- 转载 IMP时数据库的IO性能监控,并提供IOPS的计算方法
IMP时数据库的IO性能监控,并提供IOPS的计算方法 2011-07-15 17:36:10 分类: Linux [root@ntkdb oradata]# iostat -x 1 10 ...
- Unity Shader 自定义纹理坐标变量写法
Properties { _R(,)) = 1.0 _ColorTex("ColorTex (RGB)", 2D) = "red" {} struct Inpu ...
- (原创)Android Binder设计与实现 - 实现篇(1)
本文属于原创作品,转载请注明出处并放于明显位置,原文地址:http://www.cnblogs.com/albert1017/p/3849585.html 前言 在学习Android的Binder机制 ...
- Androd Toolbar 的简单使用(转)
14年Android开发者大会提出了Android5.0 系统以及 材料设置 Material Design.在 材料设计中推出了大量的UI效果,其中某些功能 已添加进 兼容包,所以可以在低版本中来实 ...
- ANDROID – TOOLBAR 上的 NAVIGATION DRAWER(转)
在 Material Design 釋出後,Google 也開始陸續更新了 Google app 的介面,讓大家有個範例可以看.而過去大力推動的 actionbar 自然而然也成了眾開發者觀注的部份: ...
- django进阶-小实例
前言: 这篇博客对上篇博客django进阶作下补充. 一.效果图 前端界面较简单(丑),有两个功能: 从数据库中取出书名 eg: 新书A 在form表单输入书名,选择出版社,选择作者(多选),输入完毕 ...