- 综合排序
- 最热优先
- 最新优先
- 来自专栏Czy‘s Blog
基于React的SSG静态站点渲染方案
基于React的SSG静态站点渲染方案 静态站点生成SSG - Static Site Generation是一种在构建时生成静态HTML等文件资源的方法，其可以完全不需要服务端的运行，通过预先生成静态文件 但是在思考通过SSG来作为这个问题的解决方案时，我还是很好奇如何在React的基础上来实现SSG渲染的，毕竟我的博客就可以算是基于Mdx的SSG渲染。 在我们正式开始聊SSG的基本原理前，我们可以先来看一下通过SSG实现静态站点的特点: 访问速度快: 静态网站只是一组预先生成的HTML、CSS、JavaScript、Image等静态文件，没有运行在服务器上的动态语言程序 /webpack-simple-environment/tree/master/packages/react-render-ssg。 // packages/react-render-ssg/src/rspack/app.tsx import ".
80610编辑于 2024-06-05 - 来自专栏前端开发
混合渲染模式：SSG 与其他技术的结合
为了更好地理解 SSG，我们需要探讨其技术背景、核心工作原理，并结合具体案例来剖析其实际应用价值。SSG 的基本概念在传统的 Web 应用开发中，页面通常分为动态生成和静态生成两种方式。 SSG 的核心工作原理SSG 的工作流程可以分为以下几个关键步骤：数据获取：在构建过程中，SSG 工具会通过 API、数据库查询或文件系统等方式获取数据。 这些步骤确保了 SSG 能够以构建时的计算开销换取运行时的高效性能。常见的 SSG 工具与框架在现代前端开发中，有许多广泛使用的 SSG 工具和框架。 真实世界案例：利用 SSG 提升 SEO 和性能为了更直观地说明 SSG 的价值，我们可以参考一个典型的案例：一家在线教育公司在重构其官网时，从传统的动态生成方式迁移到了 SSG。 复杂性提升：与传统静态文件相比，SSG 需要额外的开发工具和流程支持。为了弥补 SSG 的局限性，许多现代框架支持混合渲染模式。
85600编辑于 2024-12-28 - 来自专栏轻量级微服务
Next.js - SSR SSG CSR ISR Dynamic Routing
服务端请求数据 -> 服务端渲染页面 -> 用户用户通过 next/link 或 next/router 跳转：客户端请求数据 -> 服务端执行 getServerSideProps 并返回数据 -> 客户端渲染SSG
1.6K20编辑于 2022-12-01 - 来自专栏陌上风骑驴看IC
STA | ssg 跟ss corner 的区别——谬误更正版
有驴友在驴群里问ssg 跟ss corner 的区别是什么？老胡发了一本书，里面有两椭圆一页文字足以说明了该问题，老驴发扬一贯的鸡贼风格，从网上搜罗一遍相关内容，杂糅到一起，发出来。 要讨论ssg corner, 需从工艺偏差的分类入手，《论STA | SOCV / POCV 之 variation》论述过工艺偏差分为systematic 跟non-systematic, 其中non-systematic 模型会过于悲观，所以采用了新的统计学模型，在K 库时只包含global variation，local variation 用“统计学OCV——SOCV / POCV ” 进行补偿，对应的corner 就是ssg These global corners, called SSG (slow global), TTG (typical global) and FFG (fast global), only include
15.2K84发布于 2020-03-13 - 来自专栏前端食堂
重构于 Vite：我如何做 SSG、静态资源发布以及自动化部署
这一次的目标是比较明确了，就是从基于 PHP 的 WordPress，用前端的技术栈全部重构一遍，做一个纯前端的博客出来，当然还要保留 SEO ，就要求还要上 SSR（Server Side Render） 或者 SSG 加上搞 SSR 的话，服务器成本比较高，我的低配 ECS 可能 Hold 不住，好好玩一玩的话还要投点钱，想了想先算了，那么退而求次就是上 SSG 。 基于 SSG 玩转 SSG 也是有考虑过一些开箱即用的 SSG 框架，比如用的人最多的 Hexo[12]，但我本身一直对 Hexo 不太感兴趣，而且似乎满大街随便找一个独立博客都是基于 Hexo 的，模板也千篇一律 加上有两个开源项目让我非常感兴趣，一个是 vite-ssr[18]，一个是 vite-ssg[19]，我也分别对他们跑了 demo ，很给力，So，最后决定基于这两个开源项目之一，选择自己搭脚手架…… 单纯选择用 Vue 3.0 重新开发 SPA 应用肯定会丢失 SEO，所以才有了前面的 技术栈的选择[24]，本次是通过 SSG 方案来落地服务端渲染。
3.8K50发布于 2021-08-20 - 来自专栏cc log
卷起来，前端建站SSG，SSR，ISR，Hydration, Island...一网打尽
toc 让建站酷起来 SSR SSG ISR 轮询式刷新 按需刷新 Edge Rendering 酷的“代价” Hydration Selective Hydration Islands SSG SSG(static site generation)顾名思义，就是提前生成静态的网站。优点是性能好，HTML推送到CDN，成本体验也是最佳。 应该是NextJS的首创，从一定程度上优化了SSG了的问题。 简单来说就是提供一种机制能够在server中自动的执行SSG，这点优点也很明显，一是能够让内容尽量保持新鲜，而是从访问行为上仍然保持静态访问。 last successfully generated page return res.status(500).send('Error revalidating') } } 当然ISR仍然是SSG
2.3K30编辑于 2022-09-26 - 来自专栏cc log
卷起来，前端建站SSG，SSR，ISR，Hydration, Island...一网打尽
应该是NextJS的首创，从一定程度上优化了SSG了的问题。 简单来说就是提供一种机制能够在server中自动的执行SSG，这点优点也很明显，一是能够让内容尽量保持新鲜，而是从访问行为上仍然保持静态访问。 the last successfully generated page return res.status(500).send('Error revalidating') }}当然ISR仍然是SSG
2.3K50编辑于 2022-08-29 - 来自专栏王小二的Android站
[097]SurfaceSyncGroup的细节
一、跨进程使用SSG，无法支持Child SSG添加Child SSG 如果你看过代码，你应该可以发现，如果你在同一进程中使用SSG，其实是可以如下操作的。 1.1.2 然后用自己的token在WM中创建一个替身ssg 1.1.3 将token传递给子ssg，然后让子的ssg和你的替身建立关系 代码分析1.2 当SSG1调用add(SSG2)的时候，SSG1 添加到Root SSG的时候，一切还算正常 但是当SSG2添加到SSG1的时候，意外就发生了，Root SSG和SSG1就断开了连接。 有parent SSG了， 就将parent ssg（Root SSG）添加到SSG2 2.1.2 保存前一个parent ssg（Root SSG）的callback。 2.1.3 将parent ssg 换成 SSG2 2.1.4 在SSG1完成任务的时候，虽然SSG1和Root SSG没有名义上的关系了，但是残留在Root SSG mPendingSyncs中SSG1
66510编辑于 2024-05-11 - 来自专栏前端技术归纳
梳理NextJS13两种路由下的不同渲染方式：SSG，ISR，SSR，RSC
: data, }, }; } const PokemonName = ({ data }: any) => { return ( //... ); }; SSG SSG 也就是静态站点生成，在构建时生成静态页面，不同用户访问到的都是同一个页面。 app 在pages路由中，我们要实现SSG，需要先创建一个通用的模版文件，来表示所有的静态页面路由 []中的变量，就代表访问页面时传入的变量名称，然后我们需要实现generateStaticParams (request: NextRequest) { // 保险起见，这里可以设置一个安全校验，防止接口被非法调用 //这里的process.env.NEXT_PUBLIC_UPDATE_SSG == process.env.NEXT_PUBLIC_UPDATE_SSG) { return NextResponse.json( { data: error, message
3.1K31编辑于 2023-09-01 - 来自专栏Rust语言学习交流
【Rust日报】2021-09-05 perseus：完全支持 SSR 和 SSG 的 Rust 高端前端开发框架
rust-tui-template: A template for bootstrapping a Rust TUI application with tui-rs & crossterm perseus：完全支持 SSR 和 SSG arctic-hen7/perseus: A high-level frontend development framework for Rust with full support for SSR and SSG
1.5K60发布于 2021-09-09 - 来自专栏黯羽轻扬
鱼和熊掌兼得：Next.js 混合渲染
降级 SSR：未命中预先生成的静态 HTML 时，立即进行 SSR SSR 带静态缓存：SSR 完成之后，将结果缓存起来，下次命中静态缓存直接返回（相当于 SSG） SSG 结合 CSR：编译时生成静态部分 ，其余场景都可以用 SSG，当然，前提是要保障内容能够按需要的频率更新生效。 于是，SSG 与 SSR 一拍即合，SSG 只编译生成小部分热点页面，其余的在运行时通过 SSR 生成。 既然 SSG 擅长渲染静态内容，不妨对页面内容进行动静分离，将页面上静态的部分交由 SSG 编译生成，其余动态部分仍通过 CSR 来填充： First, immediately show the page 不过，美中不足的是加载体验不如纯 SSG，毕竟（用户可能更关心的）动态内容需要在客户端二次渲染才能呈现出来，不像 SSG 能够一次性呈现完整内容。
3.5K20发布于 2020-12-29 - 来自专栏AI进修生
AI氛围编码一时爽，SEO 火葬场？你的Lovable编码网站能被搜到吗？
理论上，可以直接让 Lovable 实现 SSG 就行。但 DeepakNess 自己测试发现，他试了 5-6 次不同的 Prompt，让 Lovable 实现 SSG，结果预览都是空白，没成功。 不死心，再让它试试 SSG (静态网站生成)。 还是失败，根本编译不过去。 那试试最后的救命稻草 Next.js？ 而且即使知道，想让 Lovable 稳定地生成 SSR/SSG 代码，并能在现有工作流里跑起来，也非常困难。 ▼ Bolt 可以结合 Next.js 做 SSG，而 Lovable 只能用 React/Vite (默认 CSR)。 有其他用户试了他的方法，确认虽然能让单页面 SSG，但在 Netlify 部署后，所有页面都变成了首页的内容源，不适用于多页面网站。
37110编辑于 2025-04-30 - 来自专栏python3
python3备份juniper交换机
/ssg.txt' def fc_srx(p2): #文件处理部分的函数 if os.path.getsize(p2)==0: ''' 密码不对时候 telnet的执行是成功的只是read_all I=I.replace('\n','') if I=='': pass else : w.write(I+'\r\n') def fc_ssg (host):#备份ssg函数 user='这里是ssg设备帐号' password='这里是ssg设备密码' print ('Backing up:'+host) tn=telnetlib.Telnet /'+host) with open(p2,'w') as f: f.write(tn.read_all().decode(encoding='gbk')) tn.close() fc_ssg ='': line=line.replace('\n','') host=line.split(' ')[0] try: ssg_bak(host) su.append
77910发布于 2020-01-03 - 来自专栏云瓣
SEO 在 SPA 站点中的实践
spa-github-pages 作者也表示如果需要 SEO 的话, 使用 SSG 方案或者付费方案 Netlify。 ? SSG 方案 SSG 方案全称为 static site generator, 中文可译为路由静态化方案。 社区上 nuxt、Gatsby 等框架赋能 SEO 的技术无一例外可以归类此类 SSG 方案。 预渲染方案 经过上文对 SSG 方案的分析, 此时 SPA 站点的优化关键已经跃然纸上 —— 静态化路由。 至此技术选型定下为使用预渲染方案实现 SSG。
2.4K40发布于 2021-03-11 - 来自专栏Tecvan
啥是 XXR ？认识前端项目渲染模式们
这是我们团队 @许滨楠 同学做的内部分享，科普当下流行的 CSR、SSR、SSG 等渲染模式的原理与优劣势，相当有料。 2.3 SSG for Static Site Generation ❝某种形式上的缝合怪 —— but in a good way.❞ 2.3.1 啥是 SSG？ 又或者从另一个角度来说，不同于把大部分渲染工作留到请求时做的 CSR 和 SSR，SSG 在站点项目构建部署的时候，就把页面内容大致填充好了。 SSG 兼收了传统 CSR 和 SSR 的优点的同时，对这两者的短板也做到较好的互补。 ，用户访问到的页面内 SSG 生成的部分，确保有效性的时间节点是上一次构建，使该模式下的应用失去了部分时效性，这部分缺陷需要通过定时构建、或者部分非 SSG 来弥补，这也是 SSG 的主要问题。
2.2K20编辑于 2021-12-09 - 来自专栏黯羽轻扬
偷师 Next.js：我学到的 6 个设计技巧
collection │ └── [slug].tsx └── index.tsx API 之间的无缝联动 通过前两篇文章，我们知道 Next.js 要解决的问题是预渲染，围绕预渲染探索出了 SSG 两种渲染模式，并在此基础上支持了包括 CSR 在内的不同渲染模式混用： ISR（Incremental Static Regeneration）：增量静态再生成，运行时定期重新生成静态 HTML SSG 降级 SSR：未命中预先生成的静态 HTML 时，立即进行 SSR SSR 带静态缓存：SSR 完成之后，将结果缓存起来，下次命中静态缓存直接返回（相当于 SSG） SSG 结合 CSR：编译时生成静态部分 [ { params: { ... } } // See the "paths" section below ], fallback: false }; } // SSG 变身 SSG降级SSR，fallback选项改为'blocking' export async function getStaticPaths() { return { paths: [
2.7K10发布于 2021-01-12 - 来自专栏黯羽轻扬
从 Next.js 看企业级框架的 SSR 支持
具体的，预渲染分为两种方式： SSG（Static Site Generation）：也叫 Static Generation，在编译时生成静态 HTML SSR（Server-Side Rendering ）：也叫 Server Rendering，用户请求到来时动态生成 HTML 与 SSR 相比，Next.js 更推崇的是 SSG，因为其性能优势更大（静态内容可托管至 CDN，性能提升立竿见影）。 因此建议优先考虑 SSG，只在 SSG 无法满足的情况下（比如一些无法在编译时静态生成的个性化内容）才考虑 SSR、CSR P.S.CSR、SSR 等更多渲染模式，见前端渲染模式的探索 围绕核心的预渲染功能 四.SSG 支持 ? 最简单，同时性能也最优的预渲染方式就是静态生成（SSG），把组件渲染工作完全前移到编译时： （编译时）获取数据 （编译时）渲染组件，生成 HTML 将生成的 HTML 静态资源托管到 Web 服务器或
4.5K11发布于 2020-12-14 - 来自专栏不换的随想乐园
不换的周刊 第29期
2.2023 年的 10 个 web 趋势 相关地址：https://www.robinwieruch.de/web-development-trends/ 渲染模式：从 CSR -> SSR -> SSG 动机：SSG ？ 或许在 SSG 应用中可以尝试。
20410编辑于 2024-04-30 - 来自专栏前端开发
现代前端开发中的 ISR 概念及其实际应用
它结合了传统静态站点生成（Static Site Generation, SSG）的快速加载优势和动态站点的实时更新能力，为开发者提供了一种平衡性能与灵活性的方案。 传统 SSG 和 ISR 的对比在传统的 SSG 中，所有页面的内容都在构建时生成，因此内容的更新需要重新构建和部署整个站点。而在 ISR 中，只需更新需要变更的页面，其余页面仍然使用之前的静态文件。 对于用户来说，ISR 提供的页面既可以像 SSG 那样快速加载，又能像服务器端渲染（SSR）那样灵活更新。使用案例：博客平台假设我们正在构建一个博客平台，用户访问量较大且内容更新频繁。 使用传统 SSG 方式构建的博客需要在每次发布新文章时重新部署整个站点，这会导致较长的构建时间。而通过 ISR，可以实现如下优化：已发布的热门文章在构建时生成静态页面，从而保证用户的快速访问。 通过结合 SSG 和动态更新的优点，ISR 提供了更加灵活和高效的开发模式。未来，随着框架和基础设施的不断演进，ISR 的应用范围将进一步扩大，为开发者和用户带来更优质的体验。
44500编辑于 2024-12-28 TanStack Router SSR/SSG 最佳实践指南 (Cloudflare Pages 版)
TanStackRouterSSR/SSG最佳实践指南(CloudflarePages版)本文档基于生产环境验证的架构，提炼了使用TanStackRouter进行SSR/SSG混合部署的通用最佳实践。 1.核心架构设计：静态优先，动态兜底(HybridArchitecture)1.1设计理念默认静态(SSG)：对所有公开、内容相对固定的页面（营销页、博客、文档）进行构建期预渲染。 1.2URL分层策略路由类型渲染模式适用场景示例强静态SSG(预渲染)首页、关于我们、法律条款/,/about内容流SSG+ISR*博客文章、产品详情/blog/$slug应用态CSR(SPA)用户后台 /assets/:splat200/images/*/images/:splat200#2.规范化规则(移除尾随斜杠等)#注意：不要强制添加尾随斜杠，这会破坏文件请求#3.SPA兜底(对于未被SSR/SSG
10810编辑于 2026-02-10
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号