之前接触的比较多的是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)初了解的更多相关文章

  1. 服务端渲染 SSR

    1.概述 SSR:网站内容由服务端渲染,然后返回客户端(查看网页源代码,所有内容都在源代码里面). 2.SSR优势 (1)SSR利于SEO. (2)SSR减少请求量和客户端渲染时间.

  2. 使用 Vue 2.0 实现服务端渲染的 HackerNews

    Vue 2.0 支持服务端渲染 (SSR),并且是流式的,可以做组件级的缓存,这使得极速渲染成为可能.同时, 和 2.0 也都能够配合 SSR 提供同构路由和客户端 state hydration.v ...

  3. vue服务端渲染之nuxtjs

    前言 本篇主要针对nuxtjs中的一些重要概念整理和代码实现! 在学习vue服务端渲染之前,先搞清楚几个概念: 什么是客户端渲染(CSR) 什么是服务端渲染(SSR) CSR和SSR有什么异同 客户端 ...

  4. 服务端渲染技术NUXT

    什么是服务端渲染 ​ 服务端渲染又称SSR (Server Side Render),是在服务端完成页面的内容,而不是在客户端通过AJAX获取数据. 服务器端渲染(SSR)的优势主要在于:更好的 SE ...

  5. 6.前端基于react,后端基于.net core2.0的开发之路(6) 服务端渲染(SSR)

    0.源码地址 https://gitee.com/teambp/ScaffoldClient  这个地址下载对应源码. 1.服务端渲染是啥? 就是在服务器进行页面渲染(废话),当页面展示后,显示的就是 ...

  6. 使用 PHP 来做 Vue.js 的 SSR 服务端渲染

    对于客户端应用来说,服务端渲染是一个热门话题.然而不幸的是,这并不是一件容易的事,尤其是对于不用 Node.js 环境开发的人来说. 我发布了两个库让 PHP 从服务端渲染成为可能.spatie/se ...

  7. Vue 爬坑之路(十一)—— 基于 Nuxt.js 实现服务端渲染(SSR)

    直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 ...

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

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

  9. 实现ssr服务端渲染

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

随机推荐

  1. JS貪食蛇網頁代碼

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...

  2. geoserver PostGIS的安装和使用

    PostGIS是一个非常流行并且开源的具有空间分析能力的关系型数据库,它作为PostgreSQL数据库的一个插件.PostgreSQL是一个功能非常强大并且开源的关系型数据库.目前项目使用的版本为Po ...

  3. 【转】微信公众开发URL和token填写详解

    很多人不明白微信公众号开发者中心服务器配置里面的url和token是什么,不会填写.看了教程也不理解是什么,本文详述一下这个问题. 第一步:作为一名微信公众号开发者,别人进入你的微信公众号,肯定会看见 ...

  4. 织梦Dedecms容易被挂马文件以及可疑文件汇总

    1. 被植入木马,然后网站打开后自动弹出博彩,赌博,色情网站,一般这种病毒的特征代码如下 二.织梦CMS被挂马清理方法 1.删除增加的管理员service.spider等用户名. 2.删除根目录的as ...

  5. User Agent 里的各个字段含义

    Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_7) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.69 ...

  6. Java 流(Stream)、文件(File)和IO -- Java ByteArrayOutputStream类

    Java ByteArrayOutputStream类 字节数组输出流在内存中创建一个字节数组缓冲区,所有发送到输出流的数据保存在该字节数组缓冲区中.创建字节数组输出流对象有以下几种方式. 下面的构造 ...

  7. 7 -- Spring的基本用法 -- 8... 抽象Bean与子Bean;Bean继承与Java继承的区别;容器中的工厂Bean;获得Bean本身的id;强制初始化Bean

    7.8 深入理解容器中的Bean 7.8.1 抽象Bean与子Bean 把多个<bean.../>配置中相同的信息提取出来,集中成配置模版------这个配置模版并不是真正的Bean,因此 ...

  8. Python学习笔记18-发送邮件

    SMTP是发送邮件的协议,Python内置对SMTP的支持,可以发送纯文本邮件.HTML邮件以及带附件的邮件. Python对SMTP支持有smtplib和email两个模块,email负责构造邮件, ...

  9. 用c语言如何在数字前自动补0

    一: #include <stdio.h>int main(){ long a=3,b=4,c=15; printf("......."a,b,c);return 0; ...

  10. React Native(九)——实现仿微信朋友圈发表动态功能

    好像很久都没写博客了,罪过罪过~ 许是因为刚接触App有点生疏不得窍门吧,这个月还没有更新过文章.小个把月下来,还是觉得应该边学边总结,这样才能像大神靠近(最近刚接触同业的大牛级人物,还是从中学到了很 ...