第一部分：关于Next.js项目经验 问： 谈谈你使用Next.js的项目经验，为什么选择它？ 答：在我负责的【xx】项目中，我们选择了Next.js作为全栈框架。核心驱动力是解决 核心web指标 和 SEO 这两个关键业务痛点。
- 痛点与选型分析：
- 痛点一：SEO 与首屏性能。项目对搜索引擎可见性和首屏加载速度要求极高。传统的 CSR 应用 FCP 和 LCP 指标不佳，且不利于内容抓取。
- 痛点二：开发体验与架构统一。我们需要一个约定大于配置的框架，来统一路由、API、渲染策略，避免在 Webpack、路由库上重复造轮子。
- 技术方案与实施：
- 我们对关键流量入口页（如首屏、商品详情页、内容页）采用了getServerSideProps实现SSR，确保每次请求返回的都是完全渲染的HTML，完美支持 SEO 和动态内容。
- 对营销活动页、帮助中心等海量静态页面，我们使用getStaticProps/getSaticPaths在构建时生成静态HTML（SSG），并接入Incremental Static Regeneration 实现增量静态再生。这使这些页面的TTFB达到了 < 50ms 的极致水平。
- 同时，我们利用Next.js内置的Image Component 和 Automatic font Optimization，自动化完成了图片的懒加载、优化、格式转换，以及字体的子集嵌入，将 LCP 提升了40%以上。
- 成果与量化： 上线后，通过 Lighthouse 测评，我们的 FCP 提升了60%， LCP 提升了40%。在 Google Search Console 中，核心页面的收录速度和排名均有显著提升。这套框架也让我们后续的国际化和 PWA 改造变得非常顺畅。 关键词： 核心web指标、SSR/SSG、CSR痛点、getServerSideProps/getStaticProps、ISR、Image Component、LCP/FCP、量化结果。
第二部分：关于React 18+ 新特性 问：你对React 18的新特性，比如并发特性，有什么了解和应用经验吗？ 答（分两部分）： A：并发特性（Concurrent Features）: React 18的并发特性不是一个新的API，而是一个底层能力，它允许 React 在渲染过程中实现中断、暂停和恢复，带来了两种革命性的用户体验模式：
- Transition:我们用它来区分紧急更新和非紧急更新。例如，在一个搜索框输入场景中，用户的按键输入是禁忌的，我们使用setState立即响应；而搜索结果列表的渲染是非紧急的，我们用startTransition包裹。这能确保输入框始终保持流畅，即使后台在渲染一个庞大的列表，从用户感知上消除了卡顿。
- Suspense for Data Fetching：这是一个正在积极跟进的特性。它与React.lazy结合，可以让我们在组件树中声明式地定义异步依赖的加载状态。虽然目前稳定版的数据获取库仍需配合，但它代表着未来架构的方向：数据获取与UI渲染的深度解耦，可以让我们更早地展示页面骨架，流式地渲染内容。 B：React Server Components: RSC是 React 团队面向未来的、更具颠覆性的架构演进。我对它的理解是：
- 核心理念：在服务端提前渲染那些不依赖交互和状态的静态/动态组件，并将渲染结果（一种特殊格式）发送到客户端。这能实现‘零捆绑包’组件，从根本上减少客户端Bundle Size。
- 带来的优势：
- 极致的客户端性能：大量依赖和逻辑留在服务端，客户端无需下载、解析和执行。
- 直接的后端数据访问：组件可以直接访问数据库、API，无需创建额外的客户端接口，简化了数据流。
- 自动的代码分割：以组件为粒度的自动分割。
第三部分： 关于性能优化的完整方案 问：请系统地阐述一下，你在React 项目中都从哪些方面做性能优化？ 答（按阶段分层阐述）： 我将性能优化分成四个层面：构建时、加载时、运行时、渲染时，形成闭环。
- 构建时优化（减少产物体积）：
- 基于路由的代码分割：这是基础。Next.js已开箱即用，但我们会对复杂路由进行预加载策略优化。
- 第三方库拆包与按需引入：使用bundle-analyzer分析，将antd、lodash等库进行tree- shaking和按需加载。对于巨型库，考虑用CDN引入其UMD包，或寻找轻量替代品。
- 构建工具升级：从Webpack 迁移至Vite/Turbopack，以获得更快的构建速度和HMR。
- 加载时优化（提升核心指标）：
- 图片优化：强制使用Next.js Image组件，定义priority属性给LCP 图片，自动适配WebP/AVIF格式。
- 字体优化：内联关键字体，使用next/font避免布局偏移。
- 资源提示：合理使用preload、preconnect、dns-prefetch。
- 骨架屏：为动态内容模块设计骨架屏，提升感知性能。
- 运行时优化（内存与计算效率）：
- 虚拟列表：对任何超过100条数据的列表，强制使用 react-window 或 react-virtualized。这是解决长列表性能问题的唯一标准答案。
- Web Worker：将复杂的计算（如数据排序、解析）移出主线程。
- 防抖与节流：对滚动、缩放、输入等高频事件进行严格限制。
- 渲染时优化（React 组件层级）：
- 精准使用useMemo/useCallback：我的原则是‘非必要不使用’。只在两种场景下使用：
- 作为其它 Hook 的依赖项，且该依赖项是引用类型。
- 进行成本极高的计算（如复杂数据转换）。
- 组件记忆化：对纯展示型组件或频繁渲染的中间组件，使用 React.memo 进行包裹，并配合自定义的areEqual 比较函数，避免浅比较失效。
- 状态提升与下放：遵循状态最小化原则，避免将频繁变化的状态放在过高层级的组件中，引起不必要的整数渲染。
- 使用Profiler 定位：这是黄金准则。任何优化前，必须使用 React DevTools Profiler 和 Chrome Performace 面板录制火焰图，定位具体的耗时组件和原因。
