Next.js Edge Functions 超时问题

最近使用Next.js框架开发gpt-4应用,发现调用gpt-4返回结果是超过30秒就出现timeout提示。在fetch函数添加各种timeout选项问题依然存在。后面找寻时发现:

“Edge Functions have a timeout of 30 seconds and even longer when streaming, which far exceeds the timeout limit for serverless functions on Vercel’s Hobby plan. Using these can allow you to get past timeout issues when using AI APIs that take longer to respond. As an added benefit, Edge Functions are also cheaper to run.”

也就是说使用streaming功能的函数(包含ReadableStream关键字)必须是edge,即在函数后面添加:

export const runtime = “edge”;

这样即使超过30秒也不会报错。

 

https://vercel.com/docs/concepts/functions/edge-functions/streaming

 

Avoiding CORS Issues in React/Next.js

Cross-Origin Resource Sharing (CORS) 是一个让开发人员有些头疼的事。当在服务器调用外部api时,经常报这个错。以下有两种方法避免:

  1. 安装CORS library (https://www.npmjs.com/package/cors) 并告诉服务器访问,
    app.use(cors({
        origin: 'http://127.0.0.1:3000',
    }))
  2. 增加代理proxy,
    const url;
    if (process.env.NODE_ENV === "production") {
        url = "https://www.example.com/whoami"
    } else {
        url = "http://127.0.0.1:4000/whoami"
    }
    fetch(url)

    在package.json文件添加:

    "proxy": "http://localhost:4000",

    假如使用 Next.js 的话,在next.config.js文件下添加如下:

    module.exports = {
      async rewrites() {
        return [
          {
            source: '/api/:path*',
            destination: 'http://localhost:4000/:path*'
          }
        ]
      }
    }

Rails应用减少内存消耗

环境:Ubuntu 20.04

内存泄漏在 Ruby 中常常是由 C 拓展程序 bug 导致的。内存碎片会造成内存呈对数增长。 它看起来像一个长长的曲线,会到达某个不可见的限制点。所有 Ruby 进程都有一些内存碎片问题。Ruby 管理内存方式必然会导致这个问题。尤其是 Ruby 不会在内存中移动对象。这样可能会破坏持有 Ruby 对象指针的 C 扩展程序。 碎片有时会造成 Ruby 占用超过它实际需要两倍的内存,有时还可能会是 4 倍之多!

解决方法:1. 调整环境变量 export MALLOC_ARENA_MAX=2

2. 使用jemalloc内存分配库,检查是否支持

ruby -r rbconfig -e “puts RbConfig::CONFIG[‘MAINLIBS’]”

 

NextJS添加图片弹窗提示

首先安装 npm i reactjs-popup

代码如下:

import React from ‘react’;
import Popup from ‘reactjs-popup’;
import ‘reactjs-popup/dist/index.css’;

export default function PopupGfg(){
return(
<div>
<h4>NextJs Popup</h4>
<Popup trigger={<button> Click to open popup </button>}
position=”right center”>
<div>GeeksforGeeks</div>
<Link href=”#”>{<Image src=”/myalipay.jpg” width={300} height={400} alt=”banner”/>}</Link>
</Popup>
</div>
)
};

 

注: Position Enums: ‘top left’ ‘top right’ ‘bottom right’ ‘bottom left’ ‘right center’ ‘left center’ ‘top center’ ‘bottom center’ ‘center center’