开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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 的开发和部署。例如：

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

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

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

混合渲染模式：SSG 与其他技术的结合

为了更好地理解 SSG，我们需要探讨其技术背景、核心工作原理，并结合具体案例来剖析其实际应用价值。SSG 的基本概念在传统的 Web 应用开发中，页面通常分为动态生成和静态生成两种方式。...常见的 SSG 工具与框架在现代前端开发中，有许多广泛使用的 SSG 工具和框架。以下是几个代表性例子：Next.js：作为 React 的生态核心之一，Next.js 提供了强大的 SSG 支持。...通过 getStaticProps 方法，开发者可以在构建时获取数据并生成静态页面。Gatsby：这是一个基于 React 的 SSG 框架，以其丰富的插件系统和 GraphQL 数据查询功能而闻名。...真实世界案例：利用 SSG 提升 SEO 和性能为了更直观地说明 SSG 的价值，我们可以参考一个典型的案例：一家在线教育公司在重构其官网时，从传统的动态生成方式迁移到了 SSG。...这种方式兼具静态页面的性能优势与动态内容的灵活性。总结与展望SSG 是现代前端开发的重要组成部分，其通过构建时生成静态页面，为高性能、高稳定性的网站开发提供了可靠方案。

1000 0

新一代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，保证最佳的访问性能

4.1K5 1

Netlify提供的静态网站渲染和缓存技术

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

4233 0

啥是 XXR ？认识前端项目渲染模式们

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

1.8K2 0

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

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

1.4K1 0

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

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

1.3K1 0

进击的JAMStack

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

2.9K3 0

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

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

3.1K2 0

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

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

2.3K3 0

从零开始使用 Astro 的实用指南

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

1K4 0

现代前端开发中的 ISR 概念及其实际应用

它结合了传统静态站点生成（Static Site Generation, SSG）的快速加载优势和动态站点的实时更新能力，为开发者提供了一种平衡性能与灵活性的方案。...ISR 的核心理念ISR 的核心思想是在构建网站时，通过静态生成的方式预渲染部分页面，同时允许在运行时动态更新这些页面的内容。...这种方法具有以下显著特征：预渲染：页面的初始内容在构建时以静态文件的形式生成。这使得页面的加载速度非常快，尤其是对于首屏内容的展示。动态更新：页面的内容可以在后台动态更新，而无需完全重新部署整个站点。...使用传统 SSG 方式构建的博客需要在每次发布新文章时重新部署整个站点，这会导致较长的构建时间。而通过 ISR，可以实现如下优化：已发布的热门文章在构建时生成静态页面，从而保证用户的快速访问。...技术架构与性能分析背后的工作原理ISR 的核心架构基于边缘计算和静态文件的动态生成。以下是 ISR 的工作流程：初次构建：在构建阶段，预定义的一组页面被生成为静态文件，并存储在 CDN 或服务器上。

810 0

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

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

1.5K3 0

梳理NextJS13两种路由下的不同渲染方式：SSG，ISR，SSR，RSC

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

1.9K3 1

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

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

1861 0

基于React的SSG静态站点渲染方案

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

1951 0

React 必学SSR框架——next.js

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

7.7K2 0

从 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.9K1 1

Next.js 简明教程

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

3K2 0

VitePress 强大的静态网站生成器

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

1K2 0

Vue学习笔记1-什么是Vue

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

4681 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭