文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

面试官：SSR解决了什么问题？有做过SSR吗？你是怎么做的？

一、是什么 Server-Side Rendering 我们称其为SSR，意为服务端渲染 指由服务侧完成页面的 HTML 结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程...先来看看Web3个阶段的发展史： 传统服务端渲染SSR 单页面应用SPA 服务端渲染SSR 传统web开发 网页内容在服务端渲染完成，⼀次性传输到浏览器 img 打开页面查看源码，浏览器拿到的是全部的...SSR解决方案，后端渲染出完整的首屏的dom结构返回，前端拿到的内容包括首屏及完整spa结构，应用激活后依然按照spa方式运行 img 看完前端发展，我们再看看Vue官方对SSR的解释： Vue.js...是一个在SPA上进行改良的服务端渲染 通过Vue SSR渲染的页面，需要在客户端激活才能实现交互 Vue SSR将包含两部分：服务端渲染的首屏，包含交互的SPA 二、解决了什么 SSR主要解决了以下两种问题...// 服务端默认⽂件名为 `vue-ssr-server-bundle.json` // 客户端默认⽂件名为 `vue-ssr-client-manifest.json`。

5.1K21
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    Angular 中的增量水合：构建“秒开且可交互”的 SSR 应用

    深入：@defer 的加载与水合双触发 在增量水合语境里，一个 @defer 块实际控制两件事： **Loading：**什么时候去拉取对应的 JS chunk。...3.1 双触发示例 @defer (on idle; hydrate on interaction) { } **首屏（SSR）：**服务端会渲染 <app-heavy-chart...5.1 层级规则：自上而下 Angular 水合是有层级的： 父级必须先水合（或同时水合），子级才能可靠水合。 子组件依赖父组件的变更检测与输入绑定；如果父级仍是“脱水”状态，子级很难独立激活。...它减少了 SSR 应用里“内容已出现但还不能交互”的间隙，通过延迟/分批激活交互逻辑降低启动期主线程压力。 它和标准水合有什么区别？...它等同于懒加载吗？ 不等同。懒加载往往会推迟渲染；增量水合强调 SSR 先渲染出内容，再推迟交互激活。 会影响 SEO 吗？ 通常不会。SSR 已输出完整内容，触发控制的是 JS 执行时机。

    18110

    新零售行业前端架构演进与实践经验：从单体巨石到智能动态化

    动态化运营需求与发版节奏的矛盾：业务方期望“分钟级”上线一个活动页面或调整一个按钮样式，而传统发版需经历开发、测试、应用市场审核（尤其iOS）长达数日的周期，无法满足快节奏的营销需求。...缺点：对Webpack版本和构建配置有要求，CSS隔离等需要额外处理。我们的选择：采用ModuleFederation。...根据页面特点，采用动态混合渲染策略：强动态内容（如用户订单）走SSR，静态内容（如活动规则）走SSG（静态生成）并CDN缓存。...SSG：商品详情页的基础信息（标题、主图）、活动页的静态部分。构建时生成HTML，推送CDN。SSR：商品详情页的个性化推荐、实时库存价格。通过Serverless函数在边缘按需渲染。...五、典型场景实战案例：双11大促会场背景：双11主会场，承载全站最大流量入口，页面内容需根据实时赛况（如品牌排名）每秒更新，且要支持运营在最后一分钟调整坑位。

    99420

    新鲜出炉的前端面经

    viewport 和移动端布局方案 实现一个 compose 函数 开发中有遇到过比较难定位的问题吗？Node 内存泄露有遇到过吗？ 二面 react ssr 是在什么场景下做的？...react ssr 双端怎么做构建的？区别在哪里？ 有没有做过同构组件？服务端和客户端怎么同步状态的？ render 和 renderToString 的底层实现上的区别？...对当前新的技术有了解吗？ 对客户端知识有了解吗？ 为什么要离职？ 蚂蚁 一面 React setState 怎么获取到更新后的值？异步函数中为什么 setState 会立即更新？ 做过离线包吗？...实现一个 Promise.all React SSR 是怎么实现的？ 有用过代码规范相关的吗？Eslint 和 Prettier 冲突怎么解决？...讲一下重绘和回流 知道 BFC 吗？使用场景有哪些？ 怎么判断是否为数组？ 页面卡顿怎么去定位？ 数组有10万个数据，取第一个和取第10万个的耗时多久？ 有用过 canvas 相关的吗？

    1.7K31

    🌐 网站嵌入地图方案对比：iframe 免 Key 实战与云部署注意事项

    网站嵌入地图方案对比：iframe 免 Key 实战与云部署注意事项在云服务器上部署官网或内容站时，经常需要在页面中嵌入地图——展示办公地点、活动路线或交通指引。...适合活动指引、通勤指南。3. 公交/地铁线路模式搜索公交线路后右键分享。嵌入地图展示完整线路和所有站点，点击站点可看地址信息。适合交通指南类内容。4....Q：可以在小程序中嵌入这个 iframe 地图吗？A：不可以。小程序不支持 iframe 标签，需要使用对应的小程序地图组件。Q：嵌入地图有 SLA 保证吗？...参考来源高德地图帮助中心 - 地图分享与嵌入：https://amap.com/ssr/doc/embed-map?...from=cloud高德地图：https://amap.com/ssr/search?from=cloudNginx 官方文档 - add_header 指令

    23700

    Dynamic Rendering 的真相：它为什么只是权宜之计，以及更稳妥的替代路线

    于是一个很现实的问题就冒出来了：用户在浏览器里看到的内容，搜索引擎爬虫一定也能看到吗？...1）双版本问题：你实际上维护了两条渲染链路Dynamicrendering看起来只是ifbot→prerender，但长期运行时，你会发现你在维护：一条面向用户的CSR渲染链路一条面向爬虫的SSR/prerender...(web.dev)典型适合：内容型站点（文档、博客、帮助中心）商品详情相对稳定、可用增量生成覆盖的电商落地页体系（营销页、活动页）2）SSR：请求时生成HTML，适合强动态与个性化SSR的关键优势是：服务器返回的就是完整...web.dev也提醒：SSR并非万能，做不好可能拖慢TTFB，甚至出现双端重复工作。...但与此同时，你也会更清楚地看到Dynamicrendering的成本：渲染服务机器开销、缓存一致性、上线灰度时的双链路校验。

    31210

    【长文慎入】一文吃透React SSR服务端同构渲染

    相信看过本文（前提是能对你的胃口，也能较好的消化吸收）你一定会对 react ssr服务端渲染技术有一个深入的理解，可以打造自己的脚手架，更可以用来改造自己的实际项目，当然这不仅限于 react ，其他框架都一样...好了，问题有了，接下来我们就一步一步的来解决这些问题。 同构才是核心 react ssr 的核心就是同构，没有同构的 ssr 是没有意义的。...刚刚我们实现了双端的数据预取同构，但是数据也仅仅是服务端有，浏览器端是没有这个数据，当客户端进行首次组件渲染的时候没有初始化的数据，渲染出的节点肯定和服务端直出的节点不同，导致组件重新渲染。...但是ssr无效了，查看网页源代码无内容。 动态路由 SSR 双端配置 ssr无效了,这是什么原因呢？...其他 SEO 支持 页面的 SEO 效果取决于页面的主体内容和页面的 TDK（标题 title,描述 description,关键词 keyword）以及关键词的分布和密度，现在我们实现了 ssr所以页面的主体内容有了

    4.5K21

    react技术问题十问十答

    最近在开源中国搞了个问答活动，收到了不少网友关于React的提问，本文挑选出一些比较典型的问题总结一下，对问答感兴趣的同学可以移步这里 问答 问：React如何快速的入手，有什么学习方法推荐的吗？...建议阅读一些入门教程，比如阮一峰老师的博客，接下来要实践一下，比如简单实现一个小程序，接下来就是在学习和实践中循环了 另外React的官网是非常不错的资料，主要作用可用来查阅资料，如果入门了以后，想要对React有深入的了解...答：React再有node中间层的时候比较适合做SSR，其实是否SSR应该是业务决定的，比如如果你需要做SEO那你就需要SSR，比如新闻网站，内容类网站；对于不需要SEO的系统，比如后端系统，webapp...，都是不需要SSR的 想了解更多SSR的内容，可以关注我的新书 问：1、React在表单处理上有没有比较好的解决方案？...但是对于列表遍历中传递当前对象： {items.map((item, index) => ( this.handleItemClick(e, item, index)}>{item.title} )} 如果不使用箭头函数，有什么比较好的解决方案吗

    1.6K20

    【长文慎入】一文吃透React SSR服务端同构渲染

    相信看过本文（前提是能对你的胃口，也能较好的消化吸收）你一定会对 react ssr服务端渲染技术有一个深入的理解，可以打造自己的脚手架，更可以用来改造自己的实际项目，当然这不仅限于 react ，其他框架都一样...好了，问题有了，接下来我们就一步一步的来解决这些问题。 同构才是核心 react ssr 的核心就是同构，没有同构的 ssr 是没有意义的。...刚刚我们实现了双端的数据预取同构，但是数据也仅仅是服务端有，浏览器端是没有这个数据，当客户端进行首次组件渲染的时候没有初始化的数据，渲染出的节点肯定和服务端直出的节点不同，导致组件重新渲染。...但是ssr无效了，查看网页源代码无内容。 动态路由 SSR 双端配置 ssr无效了,这是什么原因呢？...其他 SEO 支持 页面的 SEO 效果取决于页面的主体内容和页面的 TDK（标题 title,描述 description,关键词 keyword）以及关键词的分布和密度，现在我们实现了 ssr所以页面的主体内容有了

    4.7K62

    需求分析和架构设计：做什么，如何做

    需求指导设计，设计指导开发 分析需求的三种思维 | 思维 | 说明 | |---|---| | 全局 | 范围全面，不遗漏角色和场景 | | 整体 | 流程从开始到结束完整串起来 | | 闭环 | 有输入有输出...日常项目管理贯穿全程 站会、周会、风险记录跟踪、问题记录跟踪 每个环节都要有产出 环节与产出 以架构师思维分析需求：抽奖页面 简介：用一道面试题说明如何用全局、整体、闭环思维挖出隐藏需求 题目 H5 抽奖页，只有活动说明和一个抽奖按钮...核心是讲清楚“将如何做” 为何难写 没有规范可依 平时不常写 两个技巧 随性一些：就当向领导解释将如何实现，该画图画图，该写伪代码写伪代码 没思路先写点代码捋思路 写代码只是工具，产出仍然是文档 写文档浪费时间吗...| 首屏速度 | 慢，要等 JS 下载执行和数据请求 | 快，直接返回完整 HTML | | SEO | 差，爬虫拿到的是空 HTML | 好，HTML 里有完整内容 | | 服务端压力 | 小，只提供静态资源和...| 简单 | 复杂，要区分服务端和浏览器环境 | | 部署运维 | 静态资源托管即可 | 需要 Node 服务，要考虑性能、缓存、容灾 | 适用场景 适合：toC、首屏性能敏感、需要 SEO H5 活动页

    13310

    SSR 与 higher ranking 的真实关系：从浏览器渲染链路到搜索引擎索引管线的一次讲透

    SSR则更容易做到“发出去就可见，就可抓”。真实世界例子：一家做本地活动聚合的站点，活动列表与详情都靠CSR拉取数据渲染。高峰期每天新增几千个详情页，站内推荐位与分页也靠JS注入。...切到SSR后，活动详情页的首包HTML就含有标题、时间、地点、票价区间、相关活动链接，爬虫在第一波抓取就能发现更多深层页面，收录速度与覆盖率显著变好。...真实案例与小型案例研究：SSR如何把抽象收益变成可观察结果案例A：DoorDash的部分SSR迁移，直接把LCP拉回健康区间DoorDash的文章里有一个细节非常工程化：他们不是“一把梭全站SSR”，而是按页面增量迁移...SSR版本：首包HTML直接包含职位标题、公司名、地点、更新时间、同类职位列表链接，结构化数据以JSON-LD输出。结果通常是：收录覆盖率上升，长尾词开始有曝光。...说SSR会higherranking的人，容易忽略的反例：SSR做错了也会掉排名SSR把复杂度从客户端挪到服务端，这本身是一笔账。

    49410

    vue 随记（5）：性能的飞跃

    尤雨溪的B站直播介绍到更新相比于vue2有1.3~2倍的性能优势。那么vue3比vue2块在哪里？ •Proxy取代defineProperty。这个之前的文章已经提过了。...•虚拟dom（v-dom）重写--->静态标记：主要体现在纯粹静态节点将被标记•diff算法：vue2是双端比较。vue3加入了最长递增子序列（一种算法）。 1.1 vue3的模板是html吗？...for (let k in app) { arr.push(k); } console.log(arr.length, arr); 单个空div居然有多达...SSR 在服务端渲染（ssr）场景下，vue3的性能优势更为明显。 在 https://vue-next-template-explorer.netlify.app/ 沙盒，把选项设置为SSR： ?...vue3 ssr性能是vue2 2倍以上的差距。 vue3的ssr渲染器的逻辑，是尽可能的把虚拟节点转到字符串。

    1.8K30

    2025新鲜出炉--前端面试题（五）

    H5做的多吗, 做过微信的公众号授权吗, 怎么获取微信的openId 回答： 是的，开发过 H5 和微信公众号授权流程。...函数柯里化有什么作用 回答： 柯里化（Currying）将多参数函数转换为单参数函数链，作用包括： 参数复用：固定部分参数，生成更专用的函数。...我看你还用改nuxt开发项目, 除此之外你还了解哪些vue的ssr方案 回答： 除了 Nuxt.js，其他 Vue SSR 方案： Vue 原生 SSR： 基于 vue-server-renderer...Vite + SSR： 使用 vite-ssr 插件，结合 Vite 的快速构建能力。 Quasar Framework： 全功能框架，支持 SSR、PWA、移动端等多平台。 13....14. vue中的mixins用过吗, 你还有其他的替代方案吗 回答： 是的，但 Mixins 有以下问题： 命名冲突：多个 Mixins 可能覆盖同名属性或方法。

    1.8K11

    用 Astro + Supabase 从零构建全网盘聚合搜索引擎：PGroonga 中文检索实战

    混合模式检测层：异步批量检测链接存活状态，缓存结果部署层：Vercel / Netlify 双平台适配，静态资源强缓存技术选型框架：Astro最初考虑过 Next.js，最终选择 Astro，不是因为...混合模式下，页面默认静态生成，只有加了 export const prerender = false 的页面才走 SSR，比纯 SSR 更省资源。...return false; } } 坑 3：PGroonga 在 Supabase 免费版的限制Supabase 免费版数据库会在 7 天无活动后暂停...性能分95+移动端测试页面 JS 体积有几个比较深的体会：Astro 非常适合内容型 + 轻交互的网站。...SSG + 少量 SSR 的混合模式，既保证了性能，又保留了动态能力，比纯 SPA 或纯 SSR 都更合适PGroonga 是中文全文搜索的性价比之选。

    17410

    尤大亲自评测 Vue3 和 Svelte(19个组件后Vue更好!)

    (Svelte 没有运行时，Vue有运行时) 再来看看组件代码，Svelte 的 min + compressed 输出大小是Vue的~1.7倍。...显然在真实世界应用程序中，有许多其他因素：将从框架中导入更多功能，并将使用第三方库。大小曲线将受到项目中纯组件代码的百分比的影响。...Svelte 可以进一步改进其代码生成来降低代码输出吗？Vue可以进一步改善tree-shaking，使基线(运行时框架)变小吗？另外一点框架可以找到更好的平衡点吗？...最近在开发一个基于 Three.js 的移动端网页，有一个初步的估计大约比使用 React 减少 30 - 50% 的体积，具体的数值因为还没迁移完无法给出完整的数据。...还有一点，非运行时的框架，对于首屏的渲染也是有一个极大的帮助，你可以将首屏组件进行拆分，非运行时的首屏组件其实是非常小的，这对移动端来说非常的友好，因为毕竟使用 SSR 对应服务端还是有一定的压力要求的

    2.7K41

    为什么 RSC 才是正确答案？

    水合 HydrationSSR 立即提高内容可见性的方法有其自身的复杂性，特别是在页面的交互性方面。...以下是上述过程的可视化：然而，在 React 18 中，我们有了新的可能性。...这就引出了一个重要的问题：用户真的应该下载这么多数据吗？其次，当前的方法要求所有 React 组件在客户端进行水合作用，而不考虑它们对交互性的实际需求。...这引出了另一个重要问题：这么多工作应该在用户的设备上完成吗？为了应对这些挑战，仅仅采取渐进的步骤是不够的。我们需要迈向更强大的解决方案的重大飞跃。...该架构引入了双组件模型，区分客户端组件和服务器组件。这种区别不是基于组件的功能，而是基于它们执行的位置以及它们设计用于交互的特定环境。

    2.4K10
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券