启用HTTP/2可显著提升React首屏加载速度，需Nginx≥1.9.5、OpenSSL≥1.0.2、有效HTTPS证书、server块中listen 443 ssl http2，并配置HSTS、静态资源缓存及history fallback。
用 Nginx 部署 React 项目时，启用 HTTP/2 能显著提升首屏加载速度，尤其对包含大量 JS/CSS/图片等静态资源的多组件应用效果明显——前提是正确配置 SSL 和 Nginx 版本支持。
确认 Nginx 版本与 OpenSSL 支持
Nginx 1.9.5+ 才支持 HTTP/2，且必须使用 OpenSSL 1.0.2+ 编译。可通过以下命令验证：
- nginx -v 查看版本（需 ≥1.9.5）
- nginx -V 2>&1 | grep -i openssl 确认 OpenSSL 版本（需 ≥1.0.2）
- 若不满足，建议升级系统或使用官方预编译包（如 Ubuntu 20.04+/CentOS 8+ 自带兼容版本）
生成并配置 HTTPS 证书
HTTP/2 在主流浏览器中仅对 HTTPS 生效，需部署有效 TLS 证书：
Ainative React Sdk
下载
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
- 推荐使用 Let’s Encrypt + certbot 免费签发（自动续期、兼容性好）
- 手动配置时，确保 ssl_certificate 和 ssl_certificate_key 指向 PEM 格式证书与私钥
- 禁用老旧协议和弱加密套件：ssl_protocols TLSv1.2 TLSv1.3;，ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:...;
Nginx Server 块启用 HTTP/2 并优化静态资源
在 server 配置中启用 HTTP/2，并针对 React 的构建产物做缓存与 MIME 类型优化：
- 将 listen 443 ssl 改为 listen 443 ssl http2
- 添加 add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always; 强制 HSTS
- 对 .js, .css, .json, .woff2 等资源设置长缓存：location ~* \.(js|css|json|svg|woff2)$ { expires 1y; add_header Cache-Control "public, immutable"; }
- 确保 root 指向 build/ 目录，并配置 history fallback（React Router）：location / { try_files $uri $uri/ /index.html; }
验证 HTTP/2 是否生效
部署后需实际验证协议是否启用成功：
- 浏览器开发者工具 → Network 标签页 → 刷新页面 → 查看 Protocol 列是否显示 h2
- 使用 curl -I --http2 https://your-domain.com，返回头中应含 HTTP/2 200
- 注意：若使用 CDN（如 Cloudflare），需确认其回源也支持 HTTP/2，否则边缘到源站仍为 HTTP/1.1
