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

让反应生成的静态(SEO)“公共”前端与CRA“私有”应用并存的最佳方式是什么?

让反应生成的静态(SEO)“公共”前端与CRA“私有”应用并存的最佳方式是使用微前端架构。

微前端是一种将前端应用程序拆分为更小、更独立的部分,并将它们作为独立的微服务进行开发、测试和部署的架构模式。它允许不同团队使用不同的技术栈和开发速度来构建和维护各自的前端应用,并将它们集成到一个统一的用户界面中。

在这种情况下,可以将反应生成的静态(SEO)“公共”前端作为一个微前端应用,而CRA“私有”应用作为另一个微前端应用。它们可以独立开发、测试和部署,但可以在同一个页面中共存。

为了实现这种微前端架构,可以使用以下技术和工具:

  1. 模块化架构:将前端应用程序拆分为独立的模块,每个模块负责特定的功能或页面。可以使用模块化框架如React、Vue或Angular来实现。
  2. 统一的路由管理:使用路由管理工具来确保不同的微前端应用可以在同一个页面中进行导航。可以使用工具如single-spa或qiankun来实现。
  3. 共享组件库:创建一个共享的组件库,其中包含可以在不同的微前端应用中重用的组件。这样可以确保UI的一致性和可维护性。
  4. 状态管理:使用状态管理工具如Redux或MobX来管理不同微前端应用之间的共享状态。
  5. 构建和部署:使用自动化构建和部署工具来分别构建和部署不同的微前端应用。可以使用工具如Webpack、Rollup或Parcel来构建,使用CI/CD工具如Jenkins或GitLab CI来进行自动化部署。

在腾讯云的产品生态系统中,可以使用以下产品来支持微前端架构:

  1. 腾讯云容器服务(Tencent Kubernetes Engine,TKE):用于部署和管理微前端应用的容器化环境。
  2. 腾讯云对象存储(Tencent Cloud Object Storage,COS):用于存储和分发静态资源文件,如反应生成的静态(SEO)“公共”前端的HTML、CSS和JavaScript文件。
  3. 腾讯云负载均衡(Tencent Cloud Load Balancer,CLB):用于将流量分发到不同的微前端应用。
  4. 腾讯云云原生应用管理平台(Tencent Cloud Native Application Management Platform,Tencent CAP):用于管理和监控微前端应用的生命周期。

请注意,以上仅为示例,实际选择的产品和工具应根据具体需求和情况进行评估和选择。

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

相关·内容

创建 React 应用 7 种方式,你用过几种?

老项目迁移会存在一定成本,可以参考我之前文章《将 React 应用迁移至 Vite》 四:Gatsby Gatsby 不仅仅是一个静态网站生成器,它更是一个渐进式 Web 应用生成器。...五:Next.js Next.js 是一个基于 React 服务端渲染框架,它提供了约定式路由、多种渲染方式静态导出等功能。 渲染方式 CSR - 客户端渲染。...ISR – 增量静态再生,可以再次从 API 获取数据,并且生成静态页面,最适合常见资讯类、新闻类网站。...支持静态导出,可以提升 SEO。例如,在 Next.js 中,可以使用 next export 命令,将项目打包为静态文件,并发布到 CDN 上,搜索引擎更容易抓取页面。...cli 来创建前端应用, 这样开发者可以更加专注业务开发, 以上便是创建 react 应用常见 7 种方式,当然还有其他方案,无论使用哪种方式创建 React 项目,都需要了解 Node.js 和底层技术使用

7.1K10

如何在2023年开启React项目

image.png create-react-app(CRA)相同,Vite仍然倾向于创建单页应用程序(SPA),其客户端路由/渲染功能优于SSR。...然而,它也可以用于静态网站生成(SSG)和客户端渲染(CSR)。在此基础上,还有一些更前沿渲染技术,如增量式网站渲染(ISR)和React服务端组件(RSC)。...是什么这一切变得更加令人震惊:你可以在Next.js应用程序中混合和匹配渲染技术。虽然营销页面可以使用SSG,但登录/注册背后实际使用SSR。...Next优点 带有内置库框架 SSR和许多其他渲染技术 性能提升(注意:如果处理正确的话) CSR相比,SEO得到改善 Vercel是拥有大量资金大公司 React核心团队紧密合作 有许多React...但根据Astro基准,它性能仍然较差(不考虑RSC,因为还不稳定),因此我宁愿在现代Monorepo设置中混合使用Next和Astro,以使应用程序和网站并存

44850
  • 公共云,私有混合云探索使用案例

    企业如何为自己业务选择合适云计算实施模式-公共云,私有云,还是混合云? 在进行细节讨论之前,让我们先来看看私有是什么公共云和私有云之间本质区别是“共享”。...然而,私有云提供了更加专门针对特定业务定制设置。它主要托管在现场或在提供商数据中心,提供公共云相同规模,敏捷性,以及其他好处。...虽然其可扩展性公共云不同,但私有云允许更多控制和安全性,这使其成为大型企业理想选择,例如银行和金融机构管理个人可识别信息(PII),包括采用一些一定监管标准。...考虑公共这些用例: ·移动应用,无论是服务于内部员工、合作伙伴或客户需求,全球覆盖和速度公共云提供商可以确保最佳用户体验。...·社交媒体内容(例如从博客,论坛或社交媒体网站提取数据)可以轻松地卸载,并存储在云中。 ·灾难恢复计划通常使用公共云。

    2.5K70

    我们如何使用 Next.js 将 React 加载时间缩短 70%

    随着我们客户规模和复杂性增加,性能变得越来越受到关注,我们达到了 CRA 设计支持极限。最重要是,CRA 本身并不支持跨多页应用程序路由分割,所以我们页面加载时间慢得令人沮丧。...它具有 CRA 相同功能,但也包括对 CRA 所缺少关键功能内置支持:页面路由、基于页面内容智能预加载,以及混合静态和服务器端渲染。...样式 Causal 代码库中许多旧 CSS 文件是在团队对 CSS 模块最佳实践进行标准化之前编写。...在这里,CRA 和 Next.js 有根本区别。CRA 构建输出只是静态文件,所以提供它相对简单。Next.js 构建输出确实包括一些静态文件,但它也可能包括运行一个单独服务器代码。...在评估部署我们新 Next.js 前端选项时,我们确定了三种可能性: 不要对 Next.js 使用任何服务器端渲染,使用 next export 构建,并将输出 CRA 静态输出完全相同。

    4.8K10

    前端部署第四篇】使用 Docker 构建缓存及多阶段构建优化单页应用

    终于可以来一个真实项目接近带有复杂度项目,以 CRA 部署为例: 「部署一个 Creact React APP2 单页应用。」...单页应用静态资源 「所有的前端单页应用对于部署,最重要就是两点:」 静态资源如何构建: 大部分项目都是 npm run build。...静态资源目录在哪: 有的项目是 /dist,有的项目是 /build。「CRA 是 /build 目录」。 以下,便是在 cra 中获得静态资源命令。...第一阶段 Node 镜像: 使用 node 镜像对单页应用进行构建,生成静态资源 第二阶段 Nginx 镜像: 使用 nginx 镜像对单页应用静态资源进行服务化 该 Dockerfile 配置位于...小结 本篇文章,通过构建缓存多阶段构建优化了体积和时间,然而还有两个个小问题需要解决: 单页应用路由配置 单页应用缓存策略 ---- 参考资料 [1] 点击查看活动详情:https://juejin.cn

    1.6K20

    一个简洁、强大、可扩展前端项目架构是什么

    Bulletproof React是什么 Bulletproof React与我们常见脚手架(比如CRA)不同,后者作用是「根据模版创建一个新项目」。...文件目录如何组织 项目推荐如下目录形式: src | +-- assets # 静态资源 | +-- components # 公共组件 | +-- config...# 特性相关静态资源 | +-- components # 特性相关组件 | +-- hooks # 特性相关hooks | +-- routes # 特性相关路由...服务端缓存状态 对于从服务端请求而来,缓存在前端数据,虽然可以用上述处理「应用状态」工具解决,但「服务端缓存状态」相比于「应用状态」,还涉及到「缓存失效」、「序列化数据」等问题。...总结 本文节选了部分Bulletproof React中推荐方案,有没有你认可观点呢? 欢迎在评论区交流项目架构中最佳实践。

    1.1K30

    React为什么不将Vite作为默认推荐?

    在React文档中,对于构建新React应用,首推方式CRA(create-react-app)。...而CRA本身进步速度却在放缓,其上一次提交要追溯到去年9月8日: 此外,CRA对一些流行工具支持也不是很好,比如在TailwindCSS文档中就不推荐使用CRA: 近日,油管10w粉丝前端网红...CRA诞生时期(2016年),是SPA(单页应用)最火热时期。...在当时,他很好解决了两个痛点: 0配置初始化项目 这点不用过多介绍,执行如下命令后就能生成一个CSR(客户端渲染)React项目: npx create-react-app 项目名 集成工具链 CRA...庞大装机量使用量,这些集成到CRA特性可以快速部署到开发者项目中,达到快速提高普及率目的。

    1.3K10

    前端部署第七篇】将静态资源上传至 OSSCDN 并优化上传速度

    前端部署」系列正在更新: 7/20 ---- 当公司内将一个静态资源部署云服务前端项目持续跑了 N 年后,部署了上万次后,可能出现几种情况。 时间过长。...从而导致更多云服务费用。 1. 静态资源上传优化 在前端构建过程中存在无处不在缓存 当源文件内容未发生更改时,将不会对 Module 重新使用 Loader 等进行重新编译。...那对比生成资源哈希,如未发生变更,则不向 OSS 进行上传操作。「这一步将会提升静态资源上传时间,进而提升每一次前端部署时间。」...删除 OSS 中冗余资源 在生产环境中,OSS 只需保留最后一次线上环境所依赖资源。(多版本共存情况下除外) 此时可根据 OSS 中所有资源最后一次构建生成资源一一对比文件名,进行删除。...生产环境发布了多个版本前端,如 AB 测试,toB 面向不同大客户差异化开发部署,此时可针对不同版本对应不同 output.path 来解决。

    3.2K40

    优化SPA:使得网站对SEO更友好

    为何SPA对SEO不友好 「传统网页开发模式」,网站内容(html)都是采用服务端渲染(SSR)方式产出。这样做,方便「爬虫」能够定位到网站内容。...当页面中「部分」内容发生了变更,浏览器只需要向服务端发送用于获取该该变更信息相关AJAX。服务端在接收到指定请求后,经过拼装处理,将浏览器想要结果(通常是JSON数据格式)返回。...前置知识:何为Goolebot ❝谷歌机器人是一种特殊软件,通常被称为蜘蛛,被设计用来在公共网站页面上爬行。它遵循从一个页面到下一个页面的一系列链接,然后将找到数据处理成一个集体索引。...如果想应用在百度、Yandex(俄罗斯搜索引擎)、Bing或者Yahoo等搜索引擎中,SEO取到高分的话,「切记:和Google处理JS一样,不要过于轻信它们AJAX爬虫方案」 下图展示了,各个浏览器对各种...但是,由于CSR页面内容存在滞后性。使得网站信息不能及时送达用户。 你可以使用一些JS框架(React/Vue)进行网站开发,并且将应用转换为「静态HTML」,并存入指定服务器。

    2.6K20

    一文带你理解前后端分离本质

    本文旨在你理解清楚什么是前后端分离,前后端分离有何价值,并且通过代码带你认识前后端分离架构。 ? 一. 前后端不分离时代 分析前后端分离,则先看看前后端不分离是什么样子,有对比才能更好理解。...技术革新越来越快,AJAX技术在浏览器开始被实现,前后端混在一起开发焦头烂额程序员开始思考新开发方式,思考如何合理使用这种新请求方式去改善当前开发方式 。...在用户体验层面,单页应用切换异步数据局部加载效果用户可以有更好体验,通过技术来提升用户体验,从而转化为价值。 缺点: 1....---- 实例 使用Nodejskoajs作为后端框架,将前端项目放在frontend文件下,后端完全独立,前端使用webpack开发,将生成静态HTML模板放在其dist下,由于没有nginx配置...里面组装生成HTML静态文件,前端直接解析渲染,而不必浏览器获取数据渲染,应用不是首屏时候,就可以通过AJAX以异步形式请求数据过来在浏览器端进行渲染后呈现给用户,也可以顺利解决SEO问题。

    1.8K20

    一文带你理解前后端分离本质

    本文旨在你理解清楚什么是前后端分离,前后端分离有何价值,并且通过代码带你认识前后端分离架构。 一. 前后端不分离时代 分析前后端分离,则先看看前后端不分离是什么样子,有对比才能更好理解。...技术革新越来越快,AJAX技术在浏览器开始被实现,前后端混在一起开发焦头烂额程序员开始思考新开发方式,思考如何合理使用这种新请求方式去改善当前开发方式 。...在用户体验层面,单页应用切换异步数据局部加载效果用户可以有更好体验,通过技术来提升用户体验,从而转化为价值。 缺点: 1....---- 实例 使用Nodejskoajs作为后端框架,将前端项目放在frontend文件下,后端完全独立,前端使用webpack开发,将生成静态HTML模板放在其dist下,由于没有nginx配置...里面组装生成HTML静态文件,前端直接解析渲染,而不必浏览器获取数据渲染,应用不是首屏时候,就可以通过AJAX以异步形式请求数据过来在浏览器端进行渲染后呈现给用户,也可以顺利解决SEO问题。

    72610

    后端渲染是什么

    客户端渲染相比,服务端渲染优势在于:更快加载时间:由于服务器端生成HTML和CSS文件,因此在浏览器中加载和显示页面的速度更快。更好SEO:搜索引擎可以很容易地抓取和索引服务器端生成内容。...例如,可以使用前后端分离方法开发Web应用程序前端,使用服务端渲染方法将HTML页面渲染出来,以提高Web应用程序性能和SEO。...流行后端渲染框架有哪些现在流行后端渲染框架有很多,下面是一些常用后端渲染框架:Next.js:Next.js 是一个基于 React 轻量级应用框架,它支持服务器端渲染、静态网站生成以及客户端渲染等多种渲染方式...Nuxt.js:Nuxt.js 是一个基于 Vue.js 应用框架,它支持服务器端渲染、静态网站生成以及客户端渲染等多种渲染方式。...Gatsby:Gatsby 是一个基于 React 静态网站生成器,它使用 GraphQL 来查询数据,并在构建时生成静态 HTML 文件。

    4K170

    开源 | 携程 Foxpage 前端低代码框架

    是什么?...Foxpage 是一个轻量级前端低代码框架,借助 Foxpage 可以前端项目用低代码方式进行迭代。...开发者在完成一个前端项目低代码框架接入工作后,可以将自己项目的应用上架商店,通过这种方式开放自己应用前端低代码开发权限,这个时候其他使用低代码开发用户(可以是编辑,运营或开发者,以下简称用户)也可以在你应用上做低代码开发...现状:截至 2021 年中为止,SEO 平台目前由 Foxpage 框架生成页面大概有 百万级页面,页面部分主要模块都是通过算法动态生成。...库支持 2)静态资源服务:结合云服务对象存储服务,提供静态资源服务建设最佳实践 3)托管服务:结合云服务提供 SaaS 产品 深入了解 如果你想更深入了解 Foxpage,可以移步至项目文档,

    1.5K20

    【云顾问-健康看板】腾讯云Status Page(健康看板)服务端渲染实践

    技术选型前思考 用户体验 SEO 开发便捷性 用户体验,首屏速度 以下是A公司健康看板页面在渲染前出现页面空白 单页应用前端领域已经处于高峰时期,但是在首屏渲染上客户端渲染始终会有一段空白期,如果客户端下载文件很多且很大空白期还可能会更长...所以我们想到用服务端渲染来提高首屏渲染速度 以下为腾讯云status page 在到达客户端时已经是完整页面了,没有空白,无需过多等待 SEO 单页应用SEO并不友好,具体体现在搜索引擎检索时不能够更好地认识单页应用内容和页面结构...部署方式改造 :ssr需要node服务 基于以上思考,最终选定Next.js服务端渲染。它满足目前所有的技术需求。...于是考虑到了增量静态再生ISR技术。通过 getStaticProps-revalidate、getStaticPaths-callbak使我们应用在构建时获取数据,并生成静态页面。...)容灾设计混沌演练实践——上篇 腾讯云Status Page(健康看板)容灾设计混沌演练实践——下篇

    2K61

    程序员必知之SEO

    SEO编程最大不同之处在于 编程核心是技术,SEO核心是内容。内容才是SEO最重要组成部分,这也就是腾讯复制不了东西。...,通过来说是因为内容是动态生成,而不是静态: 网站通过WebSocket方法渲染内容 使用诸如Mustache之类JS模板引擎 什么样网页可以被索引 确保页面可以在没有JavaScript下能被渲染...有一指向它URL URL应该遵循最佳实践。...网站速度分析traceroute UX网站速度优化——博客速度优化小记 Nginx ngx_pagespeed nginx前端优化模块编译 保持耐心 这是有道理,如果你在需要谷歌机器人抓取更新页面...在写《我职业是前端工程师:前端程序员要懂 SEO 技巧》,发现了这篇文章满满干货,便重写发出来。

    1.2K90

    2023 年前端十大 Web 发展趋势

    尽管两种模式基本用途并不相同,但凭借长久以来静态站点生成(SSG)竞争,SSR 如今已经拥有近乎完美的性能表现(参考 Next.js 和 Gatsby.js)。...在应用场景下,SSG 一般用于静态内容(例如博客等网站),而 SSR 则用于动态内容(例如 Web 应用程序)。如果需要考虑 SEO(搜索引擎优化),则 SSR 和 SSG 均适用。...这些包可以在各种应用程序中直接导入:使用所有共享包实际应用程序(例如 app.mywebsite.com 客户端渲染)、仅使用共享设计系统包且考虑 SEO 需求主页 / 产品 / 登陆页面(例如由服务器端渲染或静态站点生成...如果您已经使用了前端和后端共享代码 TypeScript Monorepo,tRPC 允许大家将所有类型从后端导出至前端应用程序,过程中无需生成任何类型化 schema。...宏观来讲,AI 创建内容可能、甚至可以说一定会危害整个互联网。以往手动创建 SEO 宣传内容已经是个大难题,未来没人拦得住 ChatGPT 以人类无法比拟效率自动生成更多 SEO 垃圾。

    3K20

    用 Nuxt.js 搭建一个服务端渲染(SSR)应用

    客户端渲染(CSR)含义 客户端渲染模式下,服务端把渲染静态文件给到客户端,客户端拿到服务端发送过来文件自己跑一遍 JS,根据 JS运行结果,生成相应 DOM,然后渲染给用户。...前端渲染方式起源于 JavaScript 兴起,ajax 大热更是前端渲染更加成熟,前端渲染真正意义上实现了前后端分离,前端只专注于 UI 开发,后端只专注于逻辑开发,前后端交互只通过约定好...API来交互,后端提供 json 数据,前端循环 json 生成 DOM 插入到页面中去。...服务端渲染(SSR)优缺点 优点:首屏渲染快、利于SEO、可以生成缓存片段,生成静态化文件、节能(对比客户端渲染耗电) 缺点:服务端压力较大 什么情况下使用服务端渲染 通过服务端渲染概念以及它两个特点...Nuxt.js 是一个基于 Vue.js 轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅代码结构分层和热加载等特性。

    7.6K20

    vue项目性能优化-前端加分项

    ;(2)服务端渲染缺点:更多开发条件限制:例如服务端渲染只支持 beforCreate 和 created 两个钩子函数,这会导致一些外部扩展库需要特殊处理,才能在服务端渲染应用程序中运行;并且可以部署在任何静态文件服务器上完全静态单页面应用程序...如果你项目的 SEO 和 首屏渲染是评价项目的关键指标,那么你项目就需要服务端渲染来帮助你实现最佳初始加载性能和 SEO,具体 Vue SSR 如何实现,可以参考作者另一篇文章《Vue SSR...如果你 Vue 项目只需改善少数营销页面(例如 /, /about, /contact 等) SEO,那么你可能需要预渲染,在构建时 (build time) 简单地生成针对特定路由静态 HTML...优点是设置预渲染更简单,并可以将你前端作为一个完全静态站点,具体你可以使用 prerender-spa-plugin 就可以轻松地添加预渲染 。...为了不让这些辅助函数代码重复出现,可以在依赖它们时通过 require(‘babel-runtime/helpers/createClass’) 方式导入,这样就能做到只它们出现一次。

    66520

    前端部署第五篇】使用 docker 部署单页应用,挂载 nginx 配置文件并对其进行系列优化

    前端部署」系列正在更新: 5/20 ---- 在上篇文章中,我们介绍了在 Docker 中使用构建缓存多阶段构建进行缓存优化。 但是在部署单页应用时,仍然有一个问题,那就是客户端路由。...那为什么带有 hash 资源可设置长期缓存呢: **资源内容发生变更,他将会生成全新 hash 值,即全新资源路径。**而旧有资源将不会进行访问。...小结 其实,从这里开始,前端部署传统前端部署已逐渐显现了天壤之别。 传统前端部署由运维进行主导,「每次上线都要邮件通知运维该项目前端上线步骤」,由运维完成,前端对部署自由度较小。...而前端关于部署自由度延长,体现在以下两个方面: 通过 Docker 对前端进行容器化,再也无需邮件通知运维上线步骤 通过 Docker nginx 配置文件对前端进行 nginx 配置,一些细小琐碎但项目强相关配置无需运维介入...此时,关于如何将前端在 Docker 中进行部署篇章已经结束,而在工作实践中,往往会将静态资源置于 CDN 中。

    2K40
    领券