启用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