替换使用纯静态方案实现

[elrrrrrrr]

问题报告与改动方案

🖼️ 背景

最初，我们计划使用 Next.js 的 Server Side Rendering (SSR) 和 React Server Components (RSC) 来提高我们网站首页的首屏渲染性能。

然而，在实际应用过程中，我们面临了一些挑战。在国内，使用 Vercel 托管的访问速度不尽如人意. 🐌 同时，在使用 阿里云函数计算（Function Compute，FC） 时，我们注意到 Time to First Byte (TTFB) 较高，需要数秒的延时. ⏳ 更进一步，通过 阿里云 Elastic Compute Service (ECS) 进行独立部署，使用 PM2 进行进程托管，但在实际应用过程中，我们多次遇到进程异常退出的问题. 🚧 由于 nextjs 默认没有导出清晰的日志和错误信息，很难进行排查。

改动方案

为了解决这些问题, 我们决定采用 Next.js 提供的 export 模式 并使用 Nginx 进行纯静态托管. 📦 这个改动方案有以下主要特点:

1. 📌 首页预渲染：我们会对首页进行预渲染, 以确保仍然能够提供出色的访问性能. 🏁

2. 🛡️ 稳定性:通过纯静态托管和首页预渲染，在生产环境将不再启动 nextjs 提供接口服务，不再担心进程异常退出

3. 影响:

   a. ❌ 版本列表页校验功能：由于 NPM Registry 接口未提供跨域能力, 因此我们将无法实现版本列表页的自动校验功能.

   b. 🌀 前端拉取完整清单：为了解决部分版本号较多的情况下的性能问题, 前端将需要提前拉取完整的清单. 这可能导致列表页在渲染之前出现轻微的卡顿. 🚦

nginx 配置实例

server {
    listen 80;
    server_name npmmirror.com;

    root /path/to/cnpmweb/out;

    location ^~ /_next/static/ {
        expires 30d;
        try_files $uri $uri/ =404;
    }

    location ^~ /package/ {
        try_files $uri /package/[...slug].html;
    }
    
    location ~ ^/sync/(.*) {
        rewrite ^/sync/(.*) /package/$1 permanent;
    }

    location / {
        try_files $uri $uri/ /index.html;
    }
}

[fengmk2]

gpt 写的文案么