24/06/01

React/基于React的SSG渲染方案.md

@@ -1,9 +1,17 @@
 # 基于React的SSG渲染方案
-静态站点生成`SSG - Static Site Generation`是一种在构建时生成静态`HTML`文件资源的方法，其可以完全不需要服务端的运行，通过预先生成静态文件，实现快速的内容加载和高度的安全性。由于其生成的是纯静态资源，便可以利用`CDN`等方案以更低的成本和更高的效率来构建和发布网站，在知识库、博客、`API`文档等场景有着广泛应用。
+静态站点生成`SSG - Static Site Generation`是一种在构建时生成静态`HTML`文件资源的方法，其可以完全不需要服务端的运行，通过预先生成静态文件，实现快速的内容加载和高度的安全性。由于其生成的是纯静态资源，便可以利用`CDN`等方案以更低的成本和更高的效率来构建和发布网站，在博客、知识库、`API`文档等场景有着广泛应用。
 
 
 ## 描述
-在前段时间
+在前段时间遇到了一个比较麻烦的问题，我们是主要做文档业务的团队，而由于对外的产品文档涉及到全球很多地域的用户，因此在`CN`以外地域的网站访问速度就成了比较大的问题。虽然我们有多区域部署的机房，但是每个地域机房的数据都是相互隔离的，而实际上很多产品并不会做很多特异化的定制，因此文档实际上是可以通用的，特别是提供了多语言文档支持的情况下，各地域共用一份文档也变得合理了起来。而即使对于`CN`和海外地区有着特异化的定制，但在海外本身的访问也会有比较大的局限，例如假设机房部署在`US`，那么在`SG`的访问速度同样也会成为一件棘手的事情。
+
+那么问题来了，如果我们需要做到各地域访问的高效性，那么就必须要在各个地域的主要机房部署服务，而各个地域又存在数据隔离的要求，那么在这种情况下我们可能需要手动将文档复制到各个机房部署的服务上去，这必然就是一件很低效的事情，即使某个产品的文档不会经常更新，但是这种人工处理的方式依然是会耗费大量精力的，显然是不可取的。而且由于我们的业务是管理各个产品的文档，在加上在海外业务不断扩展的情况下，这类的反馈需求必然也会越来越多，那么解决这个问题就变成了比较重要的事情。
+
+那么在这种情况下，我就忽然想到了我的博客站点的构建方式，为了方便我会将博客部署在`GitHub Pages`上，而`GitHub Pages`本身是不支持服务端部署的，也就是说我的博客站全部都是静态资源。那么我们的文档站实际上也可以用类似的方式来实现，也就是通过`SSG`来生成静态资源，那么在全部的内容都是静态资源的情况下，我们就可以很轻松地基于`CDN`来实现跨地域访问的高效性。
+
+当然，因为要考虑到各种问题以及现有部署方式的兼容，在我们的业务中通过`SSG`来单独部署实现跨地域的高效访问并不太现实，最终大概率还是要走合规的各地域数据同步方案来保证数据的一致性与高效访问。但是在思考通过`SSG`来作为这个问题的解决方案时，我还是很好奇如何在`React`的基础上来实现`SSG`渲染的，毕竟我的博客就可以算是基于`Mdx`的`SSG`渲染。最开始我把这个问题想的特别复杂，但是在实现的时候发现只是实现基本原理的话还是很粗暴的解决方案，在渲染的时候并没有想象中要处理得那么精细，当然实际上要做完整的方案特别是要实现一个框架也不是那么容易的事情，对于数据的处理与渲染要做很多方面的考量。
+
+在正式开始
 
 速度快: 静态网站只是一组预先生成的HTML、CSS和JavaScript文件，没有运行在服务器上的网页生成程序。用户进行请求时，这些文件将被快速加载。
 安全性高: 静态网站没有数据库，没有后端代码执行，因此对于黑客来说，没有可以利用的漏洞。
@@ -33,7 +41,7 @@ MarkDown MDX
 
 ## 双端渲染
 
-
+MiniCssExtractPlugin
 
 ## 每日一题