SSR & Server Action 测试

服务端渲染和 Server Action 测试

测试说明

这个页面使用服务端渲染（SSR），数据在 Next.js 服务器端获取：

Next.js 服务器向后端 API 发起请求（服务端不受浏览器同源策略限制）
服务器获取数据后渲染 HTML
完整的 HTML 发送到浏览器显示

如果此测试成功，说明 SSR 可以完全绕过浏览器的跨域限制。

测试目标: https://apis.memenews.cn/health

刷新页面以重新执行服务端渲染测试

服务端渲染结果

SSR

服务端直接访问外部 API

成功获取响应 (HTTP 200)

耗时: 143ms

SSR

服务端 HTTPS 请求

HTTPS 连接成功 (HTTP 200)

耗时: 129ms

SSR

服务端访问公共 API (httpbin.org)

公共 API 访问成功

耗时: 998ms

SSR 渲染说明

✅ 以上测试结果是在服务器端获取的

✅ 你的浏览器没有发起任何跨域请求

✅ 页面在服务器端渲染完成后，HTML 发送到你的浏览器

如果看到这个页面，说明 SSR 渲染成功！

服务端渲染中...

实现建议

如果 SSR 测试成功，你可以考虑：

将关键页面改为 SSR 渲染
使用 Next.js 的 async Server Components 获取数据
结合静态生成（ISR）提高性能

注意：SSR 会增加服务器负载，需要评估性能影响。

Server Action 测试

客户端交互

什么是 Server Action？

Server Action 是 Next.js 13+ 的功能，允许客户端组件直接调用服务器端函数：

函数在服务器端执行，不受浏览器跨域限制
无需手动创建 API 路由
支持表单提交、数据变更等场景

点击下方按钮测试 Server Action 是否在你的内网环境可用。

简单 Server Action

待测试

带参数的 Server Action

待测试

Server Action 调用外部 API

待测试

Server Action 数据库操作（模拟）

待测试

SSR