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里面的内容

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

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

你知道该怎么渲染吗?

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

相关推荐
疯狂踩坑人6 小时前
别再说我不懂Node"流"了
后端·node.js
aricvvang6 小时前
🚀 NestJS 使用 cache-manager-redis-store 缓存无效?真相在这里!
javascript·后端·nestjs
SimonKing6 小时前
【开发者必备】Spring Boot 2.7.x:WebMvcConfigurer配置手册来了(一)!
java·后端·程序员
oak隔壁找我6 小时前
Java Collection 包使用指南
java·后端
oak隔壁找我6 小时前
Spring Boot MongoDB 使用技巧
java·后端
倚栏听风雨6 小时前
RAG检索增强生成(Retrieval Augmented Generation)
后端
倚栏听风雨7 小时前
召回率 精准率 F1 概念解释
后端
间彧7 小时前
消息队列在流量削峰场景下如何设置合理的队列长度和消费速率?
后端
程序员爱钓鱼7 小时前
Python编程实战 · 基础入门篇 | 数据类型简介:数字、字符串、布尔值
后端·python