![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
服务端渲染
文章平均质量分 91
进阶__前端
这个作者很懒,什么都没留下…
展开
-
Gatsby
Gatsby 介绍Gatsby 是一个静态站点生成器.官网:https://www.gatsbyjs.org/静态应用的优势访问速度快更利于 SEO 搜索引擎的内容抓取部署简单Gatsby 总览基于 React 和 GraphQL. 结合了 webpack, babel, react-router 等前端领域中最先进工具. 开发人员开发体验好采用数据层和UI层分离而不失 SEO 的现代前端开发模式. 对SEO非常友好数据预读取, 在浏览器空闲的时候预先读取链接对应的页面内容.原创 2021-02-25 15:46:56 · 550 阅读 · 0 评论 -
Next.js
NEXTJS介绍Next.js 是 React 服务端渲染应用框架. 用于构建 SEO 友好的 SPA 应用.支持两种预渲染方式, 静态生成和服务器端渲染.基于页面的路由系统, 路由零配置自动代码拆分. 优化页面加载速度.支持静态导出, 可将应用导出为静态网站.内置 CSS-in-JS 库 styled-jsx方案成熟, 可用于生产环境, 世界许多公司都在使用应用部署简单, 拥有专属部署环境 Vercel, 也可以部署在其他环境.代码地址:https://github.com/q原创 2021-02-21 17:31:21 · 2713 阅读 · 0 评论 -
React SSR
React SSR源码地址:https://github.com/qifutian/learngit/tree/main/react-ssr/react-ssrReact服务端渲染什么是服务端渲染SSR: Server Side Rendering服务器返回html,DATA和html在服务端进行渲染什么是客户端渲染CSR:Client Side Rendering服务器返回html,DATA和html在客户端进行渲染客户端渲染的问题首屏等待时间藏,体验差页面结构为空,不利于SEO原创 2021-02-20 17:31:00 · 257 阅读 · 0 评论 -
Gridsome案例
目的:做一个博客,使用gridsome基础知识点的巩固gridsome create blog-with-gridsomenpm run develop 启动项目处理首页模板使用一个bootstrap 开源项目作为基础地址: https://https://github.com/StartBootstrap/startbootstrap-clean-blog将项目下载下来,将模板套到本地项目项目安装bootstrap npm i bootstrapyarn add @fort原创 2021-01-19 10:22:53 · 390 阅读 · 0 评论 -
静态站点生成(SSG)
GridsomeGridsome是什么一个免费、开源、基于Vue.js技术栈的静态网站生成器官方网站: https://gridsome.orggithub : https://github.com/gridsome/gridsome什么是静态网站生成器静态网站生成器是使用一系列配置、模板以及数据 ,生成静态HTML文件及相关资源的工具此功能也叫预渲染生成的网站不需要类似php这样的服务器只需要放到支持静态资源的web Server或者CND 上运行即可优点省钱,不需要专业服原创 2021-01-18 18:39:32 · 2252 阅读 · 0 评论 -
自定义vue SSR
搭建自己的SSRmkdir vue-ssrcd vue-ssrnpm init -ynpm i vue vue-server-renderer创建server.js使用node运行服务端会将vue渲染成字符串server.jsconst Vue = require('vue')const renderer = require('vue-server-renderer')const app = new({ template:` <div id="app"原创 2021-01-18 15:28:44 · 314 阅读 · 0 评论 -
nuxt项目发布-部署
如何将nuxt项目进行发布部署打包 Nuxt.js 应用命令描述nuxt启动一个热加载的web服务器(开发模式) localhost://3000nuxt build利用webpack编译应用,压缩js和css(发布用)nuxt start以生产模式启动一个web服务器(需要先执行nuxt build)nuxt generate编译应用,并依据路由配置生成对应的html文件(用于静态文档部署)可以将 命令加入到package.json中执行np原创 2021-01-15 20:10:50 · 1289 阅读 · 0 评论 -
Nuxt.js 综合案例
案例介绍案例名称:RealWorld一个开源的学习项目,目的是帮助开发者开始学习到新技能GitHub仓库:https://github.com/gothinkster/realworld在线示例:https://demo.realworld.io/#/接口文档:https://github.com/gothinkster/realworld/tree/master/api页面模板:https://github.com/gothinkster/realworld-starter-kit/blob原创 2021-01-14 19:38:29 · 595 阅读 · 0 评论 -
Nuxt.js基础
Nuxt.js 基础Nuxt.js是什么Nuxt.js 是一个基于Vue.js的通用应用框架通过对客户端/服务端基础架构的抽象组织,Nuxt主要关注的是应用的UI渲染可以基于它初始化新项目的基础结构,或者在已有的node.js中使用Nuxt.js Nuxt.js预设了利用Vue.js开发服务端渲染所需要的各种配置 提供了一个命令: nuxt generate ,为基于Vue.js应用提供了生成对应静态站点的功能Nuxt.js运作Nuxt.js集成了 VUE + webpack + b原创 2021-01-14 08:55:05 · 189 阅读 · 0 评论 -
服务端渲染
服务端渲染基于客户端渲染的前端框架angularReactVueSPA单页面应用优点用户体验好开发效率高渲染性能好可维护性好等等缺点首屏渲染时间长,不利于用户体验不利于SEO,搜索引擎爬取内容时,spa是没有内容的借鉴了传统的服务端渲染客户端激活为SPA同构应用通过服务端渲染首屏直出,解决SPA应用首屏渲染慢以及不利于SEO内容通过客户端渲染接管界面内容交互得到更好的用户体验这种方式通常被称为现代化的服务端渲染,也叫同构渲染这种方式构建的应用称为服务原创 2021-01-11 19:12:29 · 171 阅读 · 0 评论