微服务项目:尚融宝(25)(后端搭建:服务端渲染技术)

本文涉及的产品
服务治理 MSE Sentinel/OpenSergo,Agent数量 不受限
云原生网关 MSE Higress,422元/月
注册配置 MSE Nacos/ZooKeeper,118元/月
简介: seo是网站为了提高自已的网站排名,获得更多的流量,对网站的结构及内容进行调整和优化,以便搜索引擎 (百度,google等)更好抓取到优质网站的内容。

认清现实,放弃幻想,准备斗争


一、搜索引擎优化



1、什么是SEO


03a38eafc7e942d48028bf38a3b130cd.png



总结:seo是网站为了提高自已的网站排名,获得更多的流量,对网站的结构及内容进行调整和优化,以便搜索引擎 (百度,google等)更好抓取到优质网站的内容。


2、搜索引擎工作流程


常见的SEO方法比如:


  • 对url链接的规范化,多用restful风格的url,多用静态资源url;
  • 注意keywords、description、title的设置;
  • h1-h6、a标签的使用
  • 等等


注意:spider对javascript支持不好,ajax获取的JSON数据无法被spider爬取

采用什么技术有利于SEO?要解答这个问题需要理解服务端渲染和客户端渲染。


二、服务端渲染和客户端渲染



1、什么是服务端渲染


服务端渲染又称SSR (Server Side Render)是在服务端完成页面的内容渲染,而不是在客户端完成页面内容的渲染。


SSR并不是前端特有的技术,我们学习过的JSP技术和Thymeleaf技术就是典型的SSR



a4bdb94383d44fd5bba7ba2de7913915.png



服务端渲染的特点:


  • 在服务端生成html网页的dom元素
  • 客户端(浏览器)只负责显示dom元素内容


2、什么是客户端渲染


客户端(浏览器) 使用AJAX向服务端发起http请 求,获取到了想要的数据,开始渲染html网页,生成dom元素,并最终将网页内容展示给用户。


e0703e7d5e5842d188def02d9f545279.png



客户端渲染的特点:


  • 在服务端只是给客户端响应的了数据,而不是html网页
  • 客户端(浏览器)负责获取服务端的数据生成dom元素


3、两种方式各有什么优缺点?


客户端渲染:


1) 缺点:不利于网站进行SEO,因为网站大量使用javascript技术,不利于搜索引擎抓取网页。

2) 优点:客户端负责渲染,用户体验性好,服务端只提供数据不用关心用户界面的内容,有利于提高服务端的开发效率。


3)适用场景:对SEO没有要求的系统,比如后台管理类的系统,如电商后台管理,用户管理等。


服务端渲染:


1) 优点:有利于SEO,网站通过href的url将搜索引擎直接引到服务端,服务端提供优质的网页内容给搜索引擎。


2) 缺点:服务端完成一部分客户端的工作,通常完成一个需求需要修改客户端和服务端的代码,开发效率低,不利于系统的稳定性。

3)适用场景:对SEO有要求的系统,比如:门户首页、商品详情页面等。

 

三、Nuxt.js



1、Nuxt.js介绍


移动互联网的兴起促进了web前后端分离开发模式的发展,服务端只专注业务,前端只专注用户体验,比如流行的vue.js实现了功能强大的前端渲染。 但是,对于有SEO需求的网页如果使用前端渲染技术去开发就不利于SEO了,有没有一种即使用vue.js 的前端技术也实现服务端渲染的技术呢?


Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可以用来创建服务端渲染 (SSR) 应用,
也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。


官方网站

https://zh.nuxtjs.org/


总结:
服务器端渲染
静态站点引擎


2、Nuxt.js服务器端渲染


下图展示了从客户端请求到Nuxt.js进行服务端渲染的整体的工作流程:


0499474e22f243dcb9212a2308656e41.png


1)用户打开浏览器,输入网址请求到Node.js中的前端View组件

2)部署在Node.js的应用Nuxt.js接收浏览器请求,并请求服务端获取数据

3)Nuxt.js获取到数据后进行服务端渲染

4)Nuxt.js将html网页响应给浏览器

相关文章
|
2天前
|
Java API 数据库
Java后端架构设计:从单体到微服务的演进
Java后端架构设计:从单体到微服务的演进
|
3天前
|
Kubernetes Cloud Native Docker
云原生技术演进之路:从微服务到容器化
在数字化浪潮的推动下,云原生技术不断演进,为现代软件开发带来革命性变化。本文将深入探讨云原生技术的核心要素—微服务和容器化,揭示它们如何促进软件的快速迭代、可扩展性和可靠性提升。通过分析相关数据和案例研究,我们旨在阐明云原生技术在加速企业数字化转型中的关键作用。
|
4天前
|
设计模式 监控 测试技术
后端开发中的微服务架构:优势、挑战与实践策略
在现代软件开发领域,微服务架构已成为一种重要的设计范式,特别是在后端系统中。本文旨在深入探讨微服务架构的核心优势、面临的主要挑战以及实施该架构的策略。通过引用最新的研究成果和行业案例,文章将提供对微服务架构实际应用的深刻见解,并指导开发者如何有效地采用和优化微服务架构以提升系统性能和可维护性。
|
6天前
|
搜索推荐 前端开发 JavaScript
深入理解后端开发中的服务端渲染(SSR)技术
在现代Web开发领域,服务端渲染(Server-Side Rendering, SSR)技术因其独特的性能优化和SEO优势而受到重视。本文将探讨SSR的工作原理、实现方法及其与客户端渲染(CSR)的比较,同时分析SSR在现代Web应用中面临的挑战和解决方案。通过实例分析,我们将深入了解SSR如何提升用户体验和提高搜索引擎排名,以及开发者如何在项目中有效实施SSR。
|
6天前
|
Kubernetes 测试技术 持续交付
深入理解微服务架构及其在现代后端系统中的应用
本文将深入探讨微服务架构的核心概念、设计原则以及如何在现代后端系统中实现和优化它。我们将从微服务的定义开始,逐步展开讨论其优势、面临的挑战,以及如何克服这些挑战。同时,文章还会涉及微服务与容器化技术、持续集成/持续部署(CI/CD)的协同作用,以及微服务架构的未来发展趋势。读者将获得对微服务架构全面而深刻的理解,并能够识别在实施过程中可能遇到的陷阱和解决方案。
26 1
|
6天前
|
消息中间件 负载均衡 持续交付
探索后端开发:微服务架构的演进与实践
【6月更文挑战第25天】本文深入探讨了微服务架构的概念、发展以及在现代后端开发中的应用。我们将通过一个虚构案例,展示如何将传统的单体应用重构为基于微服务的架构,并讨论在此过程中遇到的挑战和解决方案。文章旨在为读者提供从理论到实践的全面指导,帮助理解微服务架构的优势及其在企业级系统中的应用。
|
8天前
|
监控 API 数据安全/隐私保护
构建高效后端服务:微服务架构的实践与挑战
【6月更文挑战第23天】在现代软件开发中,微服务架构已成为设计高性能、可扩展后端系统的首选模式。本文将深入探讨微服务的设计原则、实践方法及其面临的技术挑战,旨在为开发者提供一个全面的微服务实施指南。
22 3
|
8天前
|
设计模式 运维 监控
深入理解后端开发中的微服务架构
【6月更文挑战第23天】本文旨在探索微服务架构在后端开发中的应用及其带来的变革。通过分析微服务的核心原则、设计模式以及与传统单体架构的对比,揭示微服务如何优化开发流程、提升系统的可扩展性与可维护性。文章还将讨论实施微服务时可能遇到的挑战和解决策略,为后端开发者提供实践指南。
|
9天前
|
运维 Cloud Native 开发者
云原生技术演进:从微服务到无服务器计算
【6月更文挑战第22天】 云原生技术如同一场持续的演化之旅,它不断重塑着应用的开发与部署方式。本文将探讨云原生技术如何从微服务架构演变至无服务器计算,以及这一转变对开发者和运维人员带来的深远影响。通过分析容器化、持续集成/持续部署(CI/CD)、微服务治理等关键概念,我们将揭示云原生技术如何在提高应用的可伸缩性、灵活性和可靠性的同时,也提出了新的挑战和机遇。
|
11天前
|
监控 持续交付 开发者
探索后端开发中的微服务架构实践
在软件工程的广阔天地中,微服务架构以其独特的魅力和优势逐渐成为后端开发的新宠。本文将深入探讨微服务的核心概念、设计原则以及在实际项目中的实施策略和面临的挑战,旨在为后端开发者提供一套清晰的微服务实践指南。

热门文章

最新文章