首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JAMstack SSG + Angular...can我们有部分页面是静态生成的,而部分页面是动态生成的?

JAMstack (JavaScript, APIs, Markup) 是一种现代的 Web 开发架构模式,它通过将前端的静态网页与后端的数据接口分离,提供了更高效、更安全、更可靠的网站和应用程序开发方式。

SSG (Static Site Generator) 是 JAMstack 的核心技术之一,它用于将静态网页预先生成并缓存,以提供更快的加载速度和更好的性能。SSG 可以将动态数据与静态模板结合,生成包含动态内容的静态页面。这种静态生成的方式适用于不经常变动的内容,比如博客文章、产品列表等。

Angular 是一个流行的前端框架,它采用了响应式编程的思想,可以构建复杂的单页应用程序。Angular 提供了丰富的组件和工具,使开发者能够快速构建交互性强的用户界面。

在 JAMstack SSG + Angular 的架构中,可以使用 Angular 框架开发动态的页面,然后通过 SSG 工具将这些动态页面预先生成为静态页面。这样做的优势是可以提高网站的加载速度和性能,并且可以更好地应对高并发的访问。

具体实现方式为,将需要动态生成的页面和组件使用 Angular 进行开发,通过使用 Angular 提供的服务和数据绑定等功能,从后端获取数据并进行处理。然后,在构建过程中,使用 SSG 工具将这些动态页面生成为静态页面,并缓存起来。当用户访问这些页面时,直接从 CDN 或静态文件服务器获取并展示。

这种架构适用于一些需要动态交互的页面和部分不经常变动的页面共存的场景,比如电商网站中的产品详情页、用户个人中心等。静态生成的页面可以提供更好的用户体验,而动态生成的页面可以满足实时数据更新的需求。

针对这种架构,腾讯云提供了多种产品和服务,可以支持 JAMstack SSG + Angular 的开发和部署。例如:

  1. 静态网站托管服务(云开发静态网站):腾讯云的静态网站托管服务提供了全球多地域的 CDN 加速,可以高效地分发和缓存静态网页,提供快速的访问体验。详情请参考:云开发静态网站
  2. 云函数(Serverless):腾讯云的云函数服务可以用来处理一些动态的业务逻辑,比如从后端获取数据并进行处理、调用第三方接口等。它可以与 Angular 应用程序集成,实现动态生成静态页面的功能。详情请参考:云函数
  3. 对象存储(COS):腾讯云的对象存储服务可以用来存储静态网页和其他相关资源文件,提供高可用性和可靠性。它可以与静态网站托管服务配合使用,实现静态页面的存储和分发。详情请参考:对象存储 COS

通过以上腾讯云的产品和服务,结合 JAMstack SSG + Angular 的架构,可以构建高效、安全、可靠的云计算应用程序,并提供优秀的用户体验。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

新一代Web技术栈演进:SSRSSGISRDPR都在做什么?

例如,在一篇文章页面中,文章主题内容偏向于静态,很少有改动,那么每次用户页面请求,都通过服务端来渲染就变得非常不值得,因为每次服务端渲染出来大部分内容都是一样!...我们完全可以将文章页面渲染为静态页面,至于页面内那些动态内容(用户头像、评论框等),就通过 HTTP API 形式进行浏览器端渲染(CSR): ?...加载页面核心内容,CDN 边缘节点缓存,速度极快; 4、通过 HTTP API + CSR,页面内次要动态内容也可以被很好地渲染; 5、数据有变化时,重新触发一次网站异步渲染,然后推送新内容到...这便是 Gatsby.js、Next.js 这样网站生成器解决问题,他们属于 React/Vue 更上一层框架(Meta Framework),通过 SSR 把动态 Web 应用渲染为多个静态页面...ISR: Incremental Site Rendering 既然全量预渲染整个网站不现实,那么我们可以做一个切分: 1、关键性页面(如网站首页、热点数据等)预渲染为静态页面,缓存至 CDN,保证最佳访问性能

4K51

XXR ?认识前端项目渲染模式们

这是我们团队 @许滨楠 同学做部分享,科普当下流行 CSR、SSR、SSG 等渲染模式原理与优劣势,相当有料。...在非常动态、交互性很强轻实际内容情景下,SEO 友好程度或许并不重要——即使重要,也有部分解决方法,如结合 meta / template 插入一些重要信息,还有后面将会提到 SSG; 「*较低安全性...最终 SSG 模式有点真正“返璞归真”意思,原本日益动态化、交互性增强页面,变成了大部分已经填充好,托管在页面服务 / CDN 上静态页面。 2.3.2 平衡得够好吗?...,用户访问到页面SSG 生成部分,确保有效性时间节点上一次构建,使该模式下应用失去了部分时效性,这部分缺陷需要通过定时构建、或者部分SSG 来弥补,这也是 SSG 主要问题。...Build 阶段就会完成 generate site 操作,这一步并不会完成所有构建,生成关键部分资源,部署到页面托管服务或者 CDN 之上;而对于其他内容,一个按需处理过程—— CDN 会在收到首个访问请求时候实时要求构建

1.6K20
  • Netlify提供静态网站渲染和缓存技术

    ## 静态站点生成 (SSG)静态站点生成SSG预先生成HTML页面的过程,以便在不需要服务器端渲染(SSR)或客户端渲染(CSR)情况下立即向用户提供服务。...在Jamstack.org上查看大量静态站点生成器列表。SSG最适合不经常更改内容站点和页面的呈现方法。博客、作品集、文档站点和信息内容都是SSG绝佳用例。...## 增量静态再生(ISR)增量静态再生(ISR)Next.js对缓存模式称为“过时但可重用”(SWR)专有实现。这允许重新生成已修改单个静态呈现页面不是从头开始重新构建整个站点。...您可以选择仅静态生成最受欢迎和/或关键页面,并使用 DPR 增强您渲染策略,不是预先构建整个站点。DPR 允许您在第一次请求时按需静态生成和缓存页面。...当您尽可能使用 SSG 预构建并在需要时使用 Edge Functions 修改页面时,您保留了静态渲染速度,并具备在需要时对页面进行动态更新功能。

    38130

    Web 框架 Astro 2.0 发布,在静态动态渲染之外提供了混合渲染能力

    Astro Web 框架旨在普及一种叫作“组件岛”前端架构,这也是 Astro 推出混合渲染动机: 在将近一年时间里,Astro 都只允许用户在静态SSG)和服务器(SSR)渲染之间二选一。...静态网站提供了令人难以置信性能,但缺少为不同请求按需生成 HTML 能力。 Astro 2.0 混合渲染把这两种渲染能力结合在了一起。 将静态动态内容混合在一起可以带来新可能性: 1....了混合渲染,开发人员可以在构建时预渲染特定页面或服务器端点,无需放弃已部署服务器。 大型网站通常有适合使用预渲染技术生成内容部分,也有需要在请求时生成内容部分。...例如,电子商务网站会预先渲染主页和各种以营销为重点内容,产品、价格或折扣页面则使用服务器端渲染,以呈现最新可用数据。这种混合方法可能会降低渲染网页所需计算资源量和相关成本。...对于使用 Jamstack 大型站点,比较有价值增量静态生成,这是由应用程序框架 Next.js 推广一种渲染方式。

    1.4K10

    技术前线:一文带你了解Jamstack

    ,如果你要建立一个博客网站,那做成动态网页当然可选方案,但动态博客非常不利于搜索,稍微想下,我们完成可以把博客这种动态内容静态化。...如果用一句话表述Jamstack,就是:Jamstack一种将动态内容静态理念 如果基于Jamstack理念,那意味着,你博客在存放在内容管理中,这个动态,但是构建工具,会根据内容生成静态网页...当然,这不是说Jamstack万能Jamstack局限性 * 其一它仅仅适合一部分以展现为主动态内容。...* 其二更新比较频繁,每次动态内容变更都需要重新生成网页 我与Jamstack 事实上,我在很久之前就与Jamstack交集,但直至今年,我在计划做微言码道官网时,去了解及调研一些技术时,才看到并理解这个概念...事实上,Jamstack范围并不是这么小,我在前面说过,Jamstack构建这个过程大多是基于前端技术来做,所以Jamstack并不只是生成静态网页,本身前端技术就可以编写静态动态页面,所以这样一结合起来

    1.3K10

    进击JAMStack

    本篇文章主要包含以下内容: 什么JAMStack JAMStack什么优势 JAMStack适合什么应用 我个人思考 什么JAMStack 概念 JAMStackJAM其实是三个词缩写,...除了Markdown文件之外,JAMStack静态数据源还可以是其它东西,例如我们后面说到Gatsby(JAMStack一种实现)就允许通过插件方式使用SQL直接读取数据库内容来生成静态页面...例如现在pages底下有两个路由,404路由对应着没找到资源页面index路由则是博客页面。...高性能 为什么JAMStack高性能呢?这是因为JAMStack应用将网站静态部分动态部分区分开来了,那些不会频繁发生变化内容会被提前生成,从而无需使用额外计算资源来进行服务端渲染。...答案是否定,由于JAMStack需要我们将网站静态部分动态部分区分开来,静态部分内容会在构建时候就生成动态内容会在浏览器进行渲染,这个特点就注定了它不适合于构建以下类型应用: 掘金,知乎这种主要由第三方用户创建内容应用

    2.9K30

    鱼和熊掌兼得:Next.js 混合渲染

    立即进行 SSR SSR 带静态缓存:SSR 完成之后,将结果缓存起来,下次命中静态缓存直接返回(相当于 SSGSSG 结合 CSR:编译时生成静态部分页面外框),CSR 填充动态部分页面内容)...关键在于如何理解“静态”,静态动态实际上描述内容变化频率,几乎(永远)不会变,或者变化频率很低内容,我们称之为静态内容。...除非,编译时不生成全量页面…… 面向用户请求 SSR 恰好能够提供合适更新时机,同时作为编译下游,SSR 有机会拦住漏网之鱼。...于是,SSG 与 SSR 一拍即合,SSG 只编译生成部分热点页面,其余在运行时通过 SSR 生成。...既然 SSG 擅长渲染静态内容,不妨对页面内容进行动静分离,将页面静态部分交由 SSG 编译生成,其余动态部分仍通过 CSR 来填充: First, immediately show the page

    3.1K20

    Gatsby还是Next.js,微言码道官网折腾事记

    其中Gatsby基于React静态网站生成框架, Cockpit cms则是存储网站内容headless cms。 在最初技术选型时,考虑过hexo以及Wordpress两个选项。...但考虑到WordPress一个基于PHP及MySQL产品,其产品形态过重,微言码道东西,虽然内容动态更新,但以静态页面来展现会更轻,更快,更好。...但在使用getStaticProps生成静态页面的开发过程中,每次都会重新请求与处理,这个非常影响体验,导致开发下速度非常慢。难以接受。...Gatsby优点在于它有非常多插件。几乎你想要什么,都要现成插件来帮你处理。而且有相当一部分官方插件。...附录 微言码道官网基于Jamstack理念网站,如果你想了解更多背后技术相关细节,这几篇文章会对你有所帮助。 1.一文带你了解Jamstack2.headless cms,无头CMS?

    2.2K30

    从零开始使用 Astro 实用指南

    简而言之,Astro一个强大框架,它同时支持静态网站生成SSG)和服务端渲染(SSR),帮助我们建立快速、基于内容网站,同时考虑到开发人员体验。...到目前为止,我们已经制作了页面,并向其添加了组件,几乎不需要写任何HTML以外东西。 添加脚本 代码栅栏Astro组件脚本部分。...posts变量中数据,我可以用它来生成动态HTML,在我主页上显示案例研究卡片。...最后,这是我们最终效果[10]。 构建和发布 Astro网站开箱即用型静态网站。这意味着所有的页面在最后都是静态HTML。...了Astro,我们就能得到两者好处。我们仍然可以使用JSX和JavaScript编写动态内容,但Astro将其全部渲染成静态HTML,所以我们只加载我们真正需要JavaScript。

    82440

    一起来学 next.js - getStaticProps、getStaticPaths 篇

    getStaticPaths 则用于配合 getServerSideProps 实现动态路由构建,next.js 会在构建时根据 getStaticPaths 返回值来生成对应静态页面。...以下 next.js 将其转换为静态页面的步骤中 getStaticPaths 和 getStaticProps 相关部分。... fallback 为 true 时会有一些不同,当访问不存在页面时不会返回 404,而是会返回动态路由页面,并且使用页面参数去请求 getStaticProps 数据,然后生成静态页面和 JSON...二次访问该页面时由于已经静态页面,就和其他已存在页面行为一致了。可以理解为一种 lazy build。...总结 最后来聊一聊什么场景下我们应该使用 getStaticProps,其实官方使用文档里列出推荐使用场景,我这边说下自己想法:如果页面数据通过发布行为来进行更新,那么就可以使用 getStaticProps

    1.2K30

    梳理NextJS13两种路由下不同渲染方式:SSG,ISR,SSR,RSC

    SSG 也就是静态站点生成,在构建时生成静态页面,不同用户访问到都是同一个页面。...app 在pages路由中,我们要实现SSG,需要先创建一个通用模版文件,来表示所有的静态页面路由 []中变量,就代表访问页面时传入变量名称,然后我们需要实现generateStaticParams...优点就是快,部署不需要服务器,任何静态服务空间都可以部署,缺点也是因为静态,不能动态渲染,每添加一篇博客,就需要重新构建。...所以了ISR,增量静态生成,可以在一定时间后重新生成静态页面,不需要手动处理。...兜底策略 我们静态页面生成期间,如果用户访问对应路由会报错,这时需要有一个兜底策略来防止这种情况发生。

    1.7K31

    尤雨溪宣布 VitePress 1.0 正式发布:基于 Vite 静态网站生成器迎来第一个主版本

    VitePress 一个基于 Vite 静态网站生成器,专注于构建快速、简洁文档网站。...它利用 Vite 构建性能优势,提供了优化开发体验和高效静态页面生成,适用于技术文档、博客等内容展示。...VitePress 介绍及其特点 VitePress 一个专为构建快速、以内容为中心网站设计静态站点生成器(SSG)。...其强大 Vite 插件生态系统和灵活 API 使得它能够处理本地或远程数据,并动态生成路由。比如,Vue.js 官方博客就是一个简单博客页面,它利用本地内容生成了索引页面。...高效交互:虽然 Markdown 页面被处理为 Vue 组件并编译成 JavaScript,但 Vue 编译器能够智能地将静态动态部分分开,从而最小化激活成本和有效负载大小。

    11410

    基于ReactSSG静态站点渲染方案

    基于ReactSSG静态站点渲染方案 静态站点生成SSG - Static Site Generation一种在构建时生成静态HTML等文件资源方法,其可以完全不需要服务端运行,通过预先生成静态文件...在我们正式开始聊SSG基本原理前,我们可以先来看一下通过SSG实现静态站点特点: 访问速度快: 静态网站只是一组预先生成HTML、CSS、JavaScript、Image等静态文件,没有运行在服务器上动态语言程序...那么同样,通过SSG生成静态资源站点也有一些局限性: 实时性不强: 由于静态站点需要提前生成,因此就无法像动态网站一样根据实时请求生成对应内容,例如当我们发布了新文档之后,就必须要重新进行增量编译甚至全站全量编译...那么在前边我们已经聊了比较多SSG内容,那么可以明确对于渲染主要内容而言我们需要将其离线化,因此在这里就需要先解决第一个问题,如何将数据离线化,不是在浏览器渲染页面之后再动态获取。...那么对于我们来说,我们需要将同样React组件在客户端一并定义,然后将其输出到页面的Js中,也就是说这部分内容需要在客户端中执行

    12810

    React 必学SSR框架——next.js

    SSR 钩子以及SSG部分应用内容,都不是纯静态我们需要数据查询才能渲染那个页面,而这些就需要同构钩子函数来满足,了这些钩子函数,我们才可以在不同需求下作出极佳体验web应用。...)构建时请求数据 所谓SSG也就是静态站点生成,类似像hexo或者gatsbyjs都是在build阶段将页面构建成静态html文件,这样线上直接访问HTML文件,性能极高。...但是正如上文说,一般应用页面都会需要动态内容,因此自动静态优化局限性很大。...如果页面内容真动态(例如,来源数据库,且经常变化), 使用getServerSideProps方法SSR。 如果静态页面或者伪动态(例如,来源数据库,但是不变化),可以酌情使用SSG。...上面就是Next.js中主要部分了,下面一些可能用到自定义配置。 自定义App 用.

    7.6K20

    从 Next.js 看企业级框架 SSR 支持

    ):也叫 Server Rendering,用户请求到来时动态生成 HTML 与 SSR 相比,Next.js 更推崇 SSG,因为其性能优势更大(静态内容可托管至 CDN,性能提升立竿见影)。...,普通组件不允许,所以要求将整页依赖所有数据都组织到一处 至于渲染生成 HTML 部分,借助React 提供 SSR API即可完成 至此,只要是依赖数据有办法提前获取到页面,理论上都可以编译生成静态...HTML,但 2 个问题也随之而来: 数据可能会发生变化,已经生成静态页面需要更新 数据量可能会多到“永远”编译不完 以电商页面为例,要把海量商品数据全都编译成静态页面,几乎不可能(或许要编译一个世纪那么长...(在客户端填上props),渲染出完整页面 fallback: 'blocking':不降级,并且要求用户请求一直等到新页面静态生成结束(实际上就是 SSR,渲染过程阻塞,只是完成之后会保留结果 HTML...典型,如果组件依赖数据动态,显然无法在编译时预先取得数据,静态生成就无从谈起了 五.SSR 支持 对于编译时无法生成静态页面的场景,就不得不考虑 SSR 了: ?

    3.8K11

    Vue学习笔记1-什么Vue

    根据你需求场景,Vue 可以按不同方式使用: 增强静态 HTML 而无需构建步骤 在任何页面中作为 Web Components 嵌入 单页应用 (SPA) 全栈 / 服务端渲染 (SSR) Jamstack.../ 静态站点生成 (SSG) 目标为桌面端、移动端、WebGL,甚至命令行终端 什么渐进式?...以前,我们用 JS 发送请求,若响应比较慢,可能会出现白屏效果,页面应用,没有重新发起请求,所以就没有这个问题,能很快速地切换。...2.2.利弊 好处:首屏渲染快、利于SEO、可以生成缓存片段,生成静态化文件、节能(对比客户端渲染耗电) 坏处:用户体验较差、不容易维护,通常前端改了部分html或者css,后端也需要修改。...优化 对于单页应用,搜索引擎并不能收录到 ajax 爬取数据之后然后再动态 js 渲染出来页面

    65730

    Vue学习笔记1-什么Vue

    根据你需求场景,Vue 可以按不同方式使用: 增强静态 HTML 而无需构建步骤 在任何页面中作为 Web Components 嵌入 单页应用 (SPA) 全栈 / 服务端渲染 (SSR) Jamstack.../ 静态站点生成 (SSG) 目标为桌面端、移动端、WebGL,甚至命令行终端 什么渐进式?...以前,我们用 JS 发送请求,若响应比较慢,可能会出现白屏效果,页面应用,没有重新发起请求,所以就没有这个问题,能很快速地切换。...2.2.利弊 好处:首屏渲染快、利于SEO、可以生成缓存片段,生成静态化文件、节能(对比客户端渲染耗电) 坏处:用户体验较差、不容易维护,通常前端改了部分html或者css,后端也需要修改。...优化 对于单页应用,搜索引擎并不能收录到 ajax 爬取数据之后然后再动态 js 渲染出来页面

    46210

    Remix 究竟比 Next.js 强在哪儿?

    首先,用 Next.js 搭建首页页面利用静态网站生成SSG)中 getStaticProps 方法。...动态页面加载 Remix 与 Next.js 什么不同? 这是作者常会收到另一个问题。 这二者光是在功能集上就相差很多,而其中最重要架构差异在于 Remix 并不依赖 SSG 来提速。...其原因在于,用户可以提交无数次查询请求,鉴于宇宙当下对空间和时间限制,静态生成无限制页面并不可能,因此 SSG 不在考虑范围内。...如果你只用单一一种动态方式生成页面,那么通过调整缓存策略,我们可以在无需修改程序代码情况下,SSG 即可快速加载常用浏览页面。...SSGJamstack 都是低速后端服务很好解决方案。

    3.5K60

    Next.js 简明教程

    SSR 钩子以及SSG部分应用内容,都不是纯静态我们需要数据查询才能渲染那个页面,而这些就需要同构钩子函数来满足,了这些钩子函数,我们才可以在不同需求下作出极佳体验web应用。...)构建时请求数据 所谓SSG也就是静态站点生成,类似像hexo或者gatsbyjs都是在build阶段将页面构建成静态html文件,这样线上直接访问HTML文件,性能极高。...但是正如上文说,一般应用页面都会需要动态内容,因此自动静态优化局限性很大。...如果页面内容真动态(例如,来源数据库,且经常变化), 使用getServerSideProps方法SSR。 如果静态页面或者伪动态(例如,来源数据库,但是不变化),可以酌情使用SSG。...上面就是Next.js中主要部分了,下面一些可能用到自定义配置。 自定义App 用.

    3K20

    VitePress 强大静态网站生成

    什么VitePress?VitePress 一个静态站点生成器 (SSG),专为构建快速、以内容为中心网站而设计。...简而言之,VitePress 获取用 Markdown 编写源内容,为其应用主题,并生成可以轻松部署在任何地方静态 HTML 页面。...性能与许多传统SSG不同,VitePress生成网站实际上一个单页应用程序 (SPA)。...无损交互性 为了能够对静态Markdown中嵌入动态Vue部分进行水合(hydration),每个Markdown页面都会被处理为一个Vue组件并编译为JavaScript。...这听起来可能效率低下,但是Vue编译器足够智能,能够将静态部分动态部分分离,从而将水合成本和负载大小都最小化。对于初始页面加载,静态部分会自动从JavaScript负载中删除,并在水合过程中跳过。

    87120
    领券