Go高级之利用Gin框架简单实现服务端渲染

前言

本文是探讨的是"Gin框架简单实现服务端渲染"

此文章是个人学习归纳的心得,掘金首发,未经允许,严禁转载,如有不对, 还望斧正, 感谢!

热身

你知道我们常说的网站秒开是用什么技术实现的吗?

服务端渲染

服务端渲染(Server-side rendering,SSR)是将网页的渲染过程从客户端移至服务器端进行的一种技术。与客户端渲染(Client-side rendering,CSR)相比,服务端渲染具有以下优势:

  • 1.更好的首次加载性能:服务端渲染可以在服务器端直接生成完整的HTML页面,并将其发送给浏览器,使得网站可以在用户首次访问时更快地渲染出来。这可以提高网站的加载速度和用户体验。

  • 2. 更好的SEO(搜索引擎优化):由于搜索引擎爬虫通常只会抓取和渲染HTML内容,而不会执行JavaScript代码,因此服务端渲染可以确保搜索引擎能够正确地抓取和索引网页内容,提高网站在搜索结果中的排名。

  • 3. 更好的可访问性:服务端渲染可以确保网站在没有JavaScript支持或JavaScript执行失败的情况下仍然能够正常显示内容,提高了网站的可访问性。

  • 4. 更好的性能表现:服务端渲染可以减轻客户端设备的负担,因为服务器已经执行了部分渲染工作,客户端只需要处理少量的JavaScript代码,从而提高了网站的性能表现。

go语言中用Gin快速实现服务端渲染

先实现一个简单的web服务器

先用Gin 实现一个简单Web服务器

go 复制代码
package main

func main(){
   router := gin.Default()
   
   router.GET("/",func(c *gin.Context){
     c.String(200,"您好")
   })
   
   router.Run(":9090")
}

完成上面的代码后,我们直接运行,可以看到下面的运行结果

监听的是9090端口,并且只有一条GET的路由

再进行服务端渲染

服务端渲染,其实就是先把html之类的先在服务端进行拼凑,然后直接返回给浏览器渲染,不需要浏览器重新进行代码的拼凑了。

所以我们先建一个index.html 文件,里面的内容随意,前端代码随便整点就行

然后就是重头戏了,服务端渲染,gin框架给我们封装好了两个函数 LoadHTMLGlobLoadHTMLFiles,这两个函数是用来读取前端代码的,然后存到实例中去

先将LoadHTMLFiles,这个函数的签名如下,用了... 也就是可变参数语法糖,可以读取任意数值的参数

go 复制代码
func (engine *Engine) LoadHTMLFiles(files ...string)

所以我们很容易的就知道了,这个函数可以一次读取多个,如下

arduino 复制代码
router.LoadHTMLFiles("HTML/index.html","HTML/index2.html")  

但是不推荐使用,因为另外一个函数LoadHTMLGlob可以爆杀它,用法如下

arduino 复制代码
// 可以用通配符来进行全部匹配
router.LoadHTMLGlob("02_HtmlRendering/HTML/*") //选择HTML文件夹下面的所有文件
router.LoadHTMLGlob("02_HtmlRendering/HTML/Text/*") //选择HTML文件夹下的Text文件夹里面的所有文件
router.LoadHTMLGlob("02_HtmlRendering/HTML/**/*") //选择HTML文件夹下的所有文件夹内的所有文件

特别是router.LoadHTMLGlob("02_HtmlRendering/HTML/**/*") 选择HTML文件夹下的所有文件夹内的所有文件,这个特别酷。

通过这两个函数,我们可以把前端代码和渲染引擎相关联,然后还要使用

go 复制代码
c.HTML(200, "index.html", nil)

来进行返回响应。

请看完整版的,先看目录结构

我们使用LoadHTMLGlob可以很方便读取,可以看下面的代码

go 复制代码
package main

import "github.com/gin-gonic/gin"

func main() {
   router := gin.Default()

   router.LoadHTMLGlob("02_HtmlRendering/HTML/**/*") //选择HTML文件夹下面每个次文件夹内的所有文件,这玩意路径要对

   //router.LoadHTMLFiles("HTML/index.html","HTML/index2.html")   不推荐用这个函数

   router.GET("/", func(c *gin.Context) {

      // 渲染html要这么用,最后一个是可以将数据传到html里面的
      c.HTML(200, "index.html", nil)   // index.html是选择之前定位的路径下面的文件
      
   })

   router.Run(":9090")
}

第8行我们读取了html代码,然后第15行我们把这个代码响应了回去,我们可以在浏览器中进行访问localhost:9090/看到我们自己写的html里面的内容

到这里,一个简单的服务端渲染,就已经完成了。

那如果我们需要给两个路由都进行服务端渲染呢? 也就是下图的结构

你知道该怎么渲染吗?

我将在下一期内容进行学习进度总结,欢迎订阅我的专栏

相关推荐
沛沛老爹36 分钟前
企业架构之旅(3):TOGAF ADM架构愿景的核心价值
微服务·架构·架构愿景
SeaTunnel41 分钟前
从架构原理到落地实践:Apache SeaTunnel×Cloudberry数据集成全解读
架构·apache
接着奏乐接着舞3 小时前
阿里qiankun微服务搭建
微服务·架构·前端框架
小天努力学java4 小时前
【软考-架构】13.5、中间件
中间件·架构
运维@小兵4 小时前
SpringBoot获取用户信息常见问题(密码屏蔽、驼峰命名和下划线命名的自动转换)
java·spring boot·后端
问道飞鱼6 小时前
【springboot知识】配置方式实现SpringCloudGateway相关功能
java·spring boot·后端·gateway
樽酒ﻬق6 小时前
打造美观 API 文档:Spring Boot + Swagger 实战指南
java·spring boot·后端
ErizJ6 小时前
Golang | 位运算
开发语言·后端·golang·位运算
冼紫菜7 小时前
[特殊字符] Docker 从入门到实战:全流程教程 + 项目部署指南(含镜像加速)
运维·分布式·后端·docker·云原生·容器
秋野酱9 小时前
基于Spring Boot+Vue 网上书城管理系统设计与实现(源码+文档+部署讲解)
vue.js·spring boot·后端