SSR性能优化深度解析
SSR 三大性能瓶颈(TTFB 长、CPU 高、水合慢)的解法:多级缓存、流式渲染、部分水合。
SSR 三大性能瓶颈(TTFB 长、CPU 高、水合慢)的解法:多级缓存、流式渲染、部分水合。
同构应用的核心三件事:数据脱水注水、客户端激活、渲染一致性,以及面试最爱问的 Hydration Mismatch。
Nuxt.js 是基于 Vue 的全栈元框架,核心理念是约定优于配置,用文件系统路由、自动导入、Nitro Server 省掉样板代码。 它之于 Vue 正如 Next.js 之于 React,面试常考自动导入原理、渲染模式选择与服务端引擎 Nitro 的能力。
Next.js 是基于 React 的全栈框架,用文件系统路由、多种渲染模式(SSG、SSR、ISR)与 React Server Components 把繁琐工程全部约定化。 它代表全栈 React 方向,面试常考 App Router 与 Pages Router 区别、ISR 的增量更新机制与 RSC 的服务端渲染心智。
SSR 在服务端把组件渲染成完整 HTML 再发给浏览器,解决 CSR 的 SEO 抓不到内容与弱网首屏白屏两大硬伤。 代价是服务端压力与水合(Hydration)复杂度,面试常考 SSR 与 CSR 的本质区别、水合 mismatch 的原因与解决。
微前端通信是跨子应用交换数据的设计模式集合,从最松耦合的 URL 参数、到中等耦合的事件总线、再到紧耦合的全局共享状态。 成熟架构通常并存 3-4 种方式,面试常考如何按数据生命周期、传递方向与耦合度做权衡选型。
Module Federation 是 Webpack5 核心特性,让多个独立构建的应用在运行时共享彼此模块,不用发包、不用对齐版本、不管对方技术栈。 核心配置是 name、exposes、remotes,把代码共享从构建时静态打包升级为运行时动态加载,是微前端的又一种实现路径。
single-spa 是微前端的路由调度引擎,不负责沙箱与样式隔离,只监听 URL 变化决定哪个子应用挂载卸载。 用应用注册、路由劫持、生命周期契约三件套以极小体积奠定路由驱动微前端的哲学,是 qiankun 等框架的共同底座。
qiankun 基于 single-spa 封装,补上了 HTML Entry(子应用零改造接入)与沙箱隔离(Proxy 拦截 window、样式作用域隔离)两块拼图。 理解 qiankun 本质是理解浏览器里如何实现应用级隔离,面试常考沙箱机制与 JS、CSS 隔离方案。
微前端把大型前端应用拆成多个独立开发、构建、部署的小应用,由基座负责加载卸载与协调,解决的是组织问题而非技术问题。 北极星指标是独立部署,面试常考它解决多团队发布阻塞的本质价值、与 iframe 或 SPA 的区别。