使用SolidJS和Vercel实现CURL流式文本输出

完全可以实现你的需求——通过Vercel Functions区分请求客户端，给CURL返回流式文本，给浏览器返回正常HTML页面，也可以单独做成API接口。以下是具体实现方案：

核心思路 #

1. 识别请求客户端：通过请求头的User-Agent判断是否为CURL请求（CURL的UA通常包含curl/关键字）；
2. 流式响应实现：利用Vercel Edge/Serverless Functions支持的ReadableStream，分批次返回文本片段，模拟打字机式的流式输出；
3. 分支返回内容：根据客户端类型，返回流式文本或HTML页面。

方案一：首页区分请求类型（Next.js App Router） #

如果要让首页同时支持两种访问模式，可以用Next.js App Router的Edge Route Handler实现：

// app/route.js
export const runtime = 'edge'; // 使用Edge Functions，更适合流式响应

export async function GET(request) {
  const userAgent = request.headers.get('user-agent') || '';
  const isCurl = userAgent.includes('curl/');

  if (isCurl) {
    // 流式返回文本，模拟打字机效果
    const encoder = new TextEncoder();
    const stream = new ReadableStream({
      async start(controller) {
        // 自定义要流式输出的文本片段
        const textLines = [
          '你现在用CURL访问我的网站\n',
          '这是第一段流式内容\n',
          '这是第二段\n',
          '所有内容已输出完毕！'
        ];

        for (const line of textLines) {
          controller.enqueue(encoder.encode(line));
          await new Promise(resolve => setTimeout(resolve, 600)); // 模拟延迟
        }

        controller.close();
      }
    });

    return new Response(stream, {
      headers: {
        'Content-Type': 'text/plain; charset=utf-8',
        'Transfer-Encoding': 'chunked'
      }
    });
  } else {
    // 返回浏览器正常渲染的HTML页面
    return new Response(`
      <!DOCTYPE html>
      <html lang="zh-CN">
        <head>
          <meta charset="UTF-8">
          <title>我的网站</title>
          <style>
            body { max-width: 800px; margin: 2rem auto; font-family: sans-serif; }
            h1 { color: #2d3748; }
          </style>
        </head>
        <body>
          <h1>欢迎访问我的网站</h1>
          <p>这是浏览器正常渲染的页面内容</p>
        </body>
      </html>
    `, {
      headers: { 'Content-Type': 'text/html; charset=utf-8' }
    });
  }
}

部署后，用CURL访问首页会看到文本逐行输出，浏览器打开则显示正常HTML页面。

方案二：单独实现流式API接口 #

如果不需要修改首页，单独做一个API接口供CURL访问，代码更简洁：

// app/api/stream/route.js
export const runtime = 'edge';

export async function GET() {
  const encoder = new TextEncoder();
  const stream = new ReadableStream({
    async start(controller) {
      const content = [
        'API流式输出示例\n',
        '第一部分内容\n',
        '第二部分内容\n',
        '输出结束'
      ];

      for (const part of content) {
        controller.enqueue(encoder.encode(part));
        await new Promise(resolve => setTimeout(resolve, 500));
      }

      controller.close();
    }
  });

  return new Response(stream, {
    headers: {
      'Content-Type': 'text/plain; charset=utf-8',
      'Transfer-Encoding': 'chunked'
    }
  });
}

使用CURL访问https://你的域名/api/stream即可看到流式输出效果。

注意事项 #

• 流式响应兼容性：Vercel的Edge Functions和Serverless Functions都支持流式响应，Edge Functions冷启动更快，推荐使用；
• UA判断的局限性：User-Agent可以被伪造，若需要更严谨的判断，可以结合Accept头（CURL默认Accept: */*，浏览器通常会包含text/html）；
• 延迟控制：代码中的setTimeout用于模拟打字机效果，可根据需求调整时长，去掉则会立即输出所有内容。

内容的提问来源于stack exchange，提问作者darsh