SSR 与测试

共 34 题
#

1. hydrateRoot 与 Selective Hydration 在长阻塞组件的工程价值

A hydrateRoot 会重建所有 DOM 节点
B Selective Hydration 会跳过水合导致不可交互
C 水合必须整树一次性同步完成
D hydrateRoot 接管服务端 HTML,Selective Hydration 按需、按交互优先级水合,长阻塞组件不阻塞整体交互 ✓ 正确答案
#

2. React 19 的 ref 作为 prop 的传递简化(ref 不再需要 forwardRef)

A React 19 中函数组件仍然必须用 forwardRef 接收 ref
B React 19 中 ref 可作为普通 prop 直接传给函数组件,forwardRef 不再需要 ✓ 正确答案
C ref-as-prop 只支持 Class 组件
D useImperativeHandle 在 React 19 中被移除
#

3. Testing Library 查询优先级(getByRole 优先、慎用 getByTestId)的设计哲学,及其与可访问性测试的内在关系

A 查询优先级体现"用户视角"哲学:role 优先、testId 最后,role 查询与可访问性语义检查同构 ✓ 正确答案
B getByTestId 应该作为首选查询方式
C 查询方式不影响测试的可维护性
D getByText 比 getByRole 更贴近用户
#

4. user-event 与 fireEvent 的差异(完整交互序列 vs 单个 DOM 事件),如何测试键盘与指针异步交互

A user-event 模拟完整交互序列(指针链、键盘序列、Tab 焦点)且 API 异步,更贴近真实用户行为 ✓ 正确答案
B fireEvent.click 会模拟完整的指针事件序列
C user-event 是同步 API
D fireEvent 与 user-event 的测试效果完全相同
#

5. 用 MSW 在组件测试层 mock 网络请求的工程实践(setupServer、handler 复用与重置)

A MSW 只能拦截浏览器请求,Node 测试环境无法使用
B MSW handler 无法模拟延迟响应
C 用 MSW 必须修改组件代码注入 mock
D setupServer 在 Node 拦截 fetch/XHR,handler 共享复用 + afterEach 重置防泄漏,未处理请求可告警 ✓ 正确答案
#

6. React Testing Library 的 act 警告产生原因,及其与并发渲染、状态批量更新的关系

A act 把作用域内的更新同步 flush,警告表示更新发生在 act 外(时序不确定),异步交互应 await 并用 waitFor 断言 ✓ 正确答案
B act 警告只影响性能不影响正确性
C 并发渲染下 act 不再需要
D act 警告可以安全忽略
#

7. 流式 SSR 中 Suspense boundary 在 renderToReadableStream 的暂停-恢复机制

A renderToReadableStream 必须等全部数据就绪才开始输出
B Suspense 边界挂起时先冲刷 shell,数据就绪后以独立 chunk 补发增量,客户端按标识插入 ✓ 正确答案
C 流式 SSR 的 TTFB 与完整渲染时间相同
D 嵌套边界不能独立暂停恢复
#

8. React Server Functions 在 Mutations 与表单 <form action={fn}> 的协作

A Server Function 作为 form action 时无法返回结果
B 服务端校验不是必须的
C Server Function 作 form action 执行服务端 mutation,返回值驱动 useActionState 回显,revalidate 刷新相关数据 ✓ 正确答案
D form action 提交后不会重置表单
#

9. React 19 useOptimistic 在低延迟交互体验的工程价值

A useOptimistic 的乐观值在失败后必须手动回滚
B 乐观更新适合支付等强一致场景
C useOptimistic 在 pending 期间展示乐观值、结束后自动回落真实值,适合可最终一致的交互 ✓ 正确答案
D 乐观值只在非 Transition 更新中生效
#

10. React 19 Suspense + RSC 流式 SSR 在 TTFB/FCP 的工程价值与现代框架支持

A 流式 SSR 必须等全部数据就绪才发送
B 流式 SSR 只改善 TTI 不改善 TTFB
C Suspense 流式让 shell 先行、增量后补,TTFB/FCP 提前,HTML 与 Flight 双流同步渐进呈现 ✓ 正确答案
D 流式响应与 CDN 缓存完全冲突
#

11. Next.js App Router 的 PPR(Partial Prerendering)

A PPR 构建期预渲染静态外壳、运行时流式渲染动态边界,兼顾 CDN 缓存与个性化 ✓ 正确答案
B PPR 是把整个页面静态化的方案
C PPR 不支持动态数据
D PPR 与流式 SSR 互斥
#

12. Suspense 在 SSR 下的 fallback 行为

A SSR 中挂起会阻塞整个页面输出
B SSR 的 fallback 不会出现在初始 HTML 中
C SSR 中 fallback 随 shell 输出、真实内容流式补发替换,与 CSR 的差异在 HTML 可见性与水合时序 ✓ 正确答案
D 流式补发的内容需要开发者手动插入 DOM
#

13. Edge Runtime(Next.js Middleware)

A Edge Runtime 支持所有 Node.js API
B Edge Runtime 没有体积限制
C Middleware 可以直接访问数据库
D Middleware 在 Edge 运行,做鉴权重定向等边缘决策,数据库等重逻辑放 Node 运行时 ✓ 正确答案
#

14. react-dom/static 的 prerender/prerenderToNodeStream 与 renderToPipeableStream 的差异及其在 SSG 的应用

A prerender 一次性渲染完整产物适合 SSG 构建期生成,流式 API 面向请求时动态渲染 ✓ 正确答案
B prerender 与 renderToPipeableStream 完全相同
C prerender 支持暂停恢复流式补发
D SSG 预渲染的页面不支持任何动态内容
#

15. Hydration Mismatch 的常见原因与排查

A 水合不匹配只影响性能不影响正确性
B 水合不匹配源于渲染依赖环境差异(时间、随机、浏览器 API),应延迟客户端渲染或使用稳定值 ✓ 正确答案
C new Date() 在 SSR 两端结果必然一致
D SuppressHydrationWarning 是首选修复手段
#

16. useFormStatus 等 Hook 在 SSR 边界的行为

A useFormStatus 在 SSR 中返回 pending: true
B 服务端渲染可以包含客户端提交状态
C useActionState 的 initialState 不需要序列化
D SSR 下表单 Hook 输出初始状态(pending 恒 false),初始 state 需两端序列化一致 ✓ 正确答案
#

17. React 19 的 useFormStatus 在 Server Action 待处理状态的工程价值

A useFormStatus 可以读取任意表单的 pending
B pending 变化会重渲染整个表单
C useFormStatus 返回提交结果数据
D useFormStatus 让表单内部子组件就近读取 Server Action 的 pending,实现按钮自动禁用与文案切换 ✓ 正确答案
#

18. 流式 SSR 与 CDN/ISR 缓存策略的协作(Cache-Control 设置、revalidate 时机与流式响应的可缓存性)

A 流式 SSR 响应都可以直接缓存到 CDN
B 静态外壳可缓存(public/s-maxage + SWR),动态边界不可缓存,ISR 回源时才执行流式重渲染 ✓ 正确答案
C 个性化页面也应用 public 缓存
D Cache-Control 在流式输出中途可以随意修改
#

19. React 19 hydration mismatch 的 DevTools 诊断(错误叠加层、server/client 差异提示)与常见根因归类

A React 19 用错误叠加层高亮差异节点并对比 server/client 树,根因常是环境敏感值或客户端注入 ✓ 正确答案
B React 19 的水合警告只显示一行文本
C 水合不匹配的根因只有随机数一种
D 所有 mismatch 都应用 suppressHydrationWarning 解决
#

20. React 19 的 Server Actions 在跨域 CSRF 防护的工程实践

A 跨域请求不需要 CSRF 防护
B 缺失 Origin 的请求应直接放行
C SameSite=Strict 可以解决所有 CSRF 问题
D Server Actions 跨域防护以 Origin/Host 白名单校验为基线,叠加 SameSite、token 与 Fetch Metadata 纵深防御 ✓ 正确答案
#

21. React 19 的 RSC Payload 体积优化与缓存策略

A RSC Payload 体积无法优化
B 缓存键与参数序列化无关
C RSC Payload 不需要缓存
D 用 cache() 去重、裁剪边界与字段控制 Payload 体积,缓存分请求内/跨请求/HTTP/客户端多层并配合 tag 失效 ✓ 正确答案
#

22. React 19 的 streaming HTML 在慢网络下的用户体验取舍

A 流式让关键内容先到、次要内容渐进补发,慢网络下需优先级编排并处理断线降级 ✓ 正确答案
B 慢网络下流式 SSR 没有任何缺点
C 流式补发不受带宽影响
D 首屏应全部使用流式边界
#

23. React 19 的 Server Components 的数据获取(无需 useEffect)

A Server Components 直接 await 数据并配合 Suspense,消除客户端加载态编排,缓存与失效需显式设计 ✓ 正确答案
B Server Components 不能获取数据
C 交互后的数据更新也可以靠 RSC 自动完成
D async 组件可以随意传给客户端组件
#

24. Vitest Browser Mode 与 Playwright component testing 在真实浏览器组件测试上的取舍

A Browser Mode 是单测环境升级(RTL 生态直用),Playwright component 是 E2E 视角组件测试,选型看现有测试栈 ✓ 正确答案
B 两种方案完全相同
C Browser Mode 不能跑 RTL 测试
D Playwright component testing 不支持真实浏览器
#

25. 自定义 Hook 的测试(renderHook)与状态更新断言的边界

A renderHook 可以直接断言 Hook 内部的 DOM
B 异步 Hook 无法测试
C renderHook 配合 act 断言同步更新、waitFor/fake timers 断言异步更新,测的是返回值与副作用 ✓ 正确答案
D Transition 更新在 act 内立即完成
#

26. 快照测试在现代 React 团队中的适用边界与失效成本

A 快照脆弱且易假阳性,适合"稳定结构契约"场景,行为正确性靠断言式测试 ✓ 正确答案
B 快照测试能验证组件行为的正确性
C 快照失败一定代表功能 bug
D 整树快照是现代 React 测试的首选
#

27. React Server Components 与 Server Actions 在测试中的 mock 与隔离策略

A Server Actions 无法在测试中 mock
B 集成测试不需要验证 CSRF 防护
C 测试 RSC 必须用 jsdom
D RSC 用 Node 环境直测并 mock 数据层,客户端测试 mock action,E2E 验证真实 Flight 协议 ✓ 正确答案
#

28. waitFor/findBy 与 fake timers(vi.useFakeTimers)协作测试异步 UI 的注意事项

A fake timers 与 waitFor 可以无脑混用
B fake timers 影响 promise 微任务
C fake timers 假化定时器后需 advanceTimersByTime + act 推进,waitFor 轮询会被假化需用 shouldAdvanceTime 或白名单处理 ✓ 正确答案
D 使用 fake timers 后不需要清理
#

29. React 19 的 useActionState(合并 useFormState)在表单提交的 pending/错误状态管理上与 useFormStatus 的分工,以及 SSR 下初始状态的序列化?

A useFormStatus 负责管理提交结果错误
B useActionState 与 useFormStatus 功能重复
C useActionState 管提交结果与错误状态、useFormStatus 管表单内 pending 展示,初始状态需可序列化且两端一致 ✓ 正确答案
D SSR 下 initialState 可以包含任意对象
#

30. 流式 SSR 的请求取消与超时,AbortController 在 renderToPipeableStream 的 abort 行为、客户端中断与慢连接下的降级处理?

A abort 会丢弃客户端已接收的内容
B 客户端中断不会浪费服务端资源
C 流式渲染不需要超时控制
D abort 终止未完成渲染、保留已输出内容,客户端断开应监听并止损,慢连接用缓存优先与超时兜底降级 ✓ 正确答案
#

31. React 19 的 cache 函数在请求作用域缓存的工程应用

A cache() 的缓存跨请求共享
B 请求结束后缓存仍长期保留
C cache() 适合缓存随机值
D cache() 在请求作用域内按参数去重数据获取,跨请求缓存需 use cache/HTTP 层 ✓ 正确答案
#

32. React 19 的 Progressive Hydration 在低性能设备的工程取舍

A Progressive Hydration 会减少水合的总工作量
B 低性能设备不需要水合优化
C 渐进水合导致所有交互延迟
D 渐进水合把水合拆散并按交互优先级进行,低端设备首屏可交互,非交互内容应静态化免水合 ✓ 正确答案
#

33. jest-dom 的无障碍断言(toHaveAccessibleName/toBeInvalid/toHaveFocus)的工程价值

A jest-dom 无障碍断言把可访问性要求(名称、无效态、焦点)变为可执行测试,与 RTL 查询协同形成无障碍契约 ✓ 正确答案
B toHaveAccessibleName 断言的是 CSS 样式
C toBeInvalid 只检查视觉红色提示
D 无障碍测试只能靠人工审计
#

34. Storybook interaction testing(play 函数 + test-runner)与 RTL 组件测试的分工

A Storybook play 函数与 RTL 测试完全重复
B RTL 管组件行为契约(mock 强、速度快),Storybook play + test-runner 管场景级交互与文档,两者互补 ✓ 正确答案
C play 函数只能在开发环境运行
D 有 Storybook 就不需要 RTL 测试