Server ngốn gần 10 GB RAM vì dữ liệu dùng chung bị lấy lại ở mỗi request

const cache = new Map()

async function load(locale: string) {
  const hit = cache.get(locale)
  if (hit && process.env.NODE_ENV === 'production') return hit   // chỉ dùng cache khi chạy thật
  const out = await readAllFiles(locale)                          // đọc ~70 file
  cache.set(locale, out)
  return out
}

const cache = new Map<string, Promise<Messages>>()

function load(locale: string) {
  let hit = cache.get(locale)
  if (!hit) {
    hit = readAllFiles(locale)
    hit.catch(() => cache.delete(locale))   // lỗi thì lần sau thử lại
    cache.set(locale, hit)
  }
  return hit
}

if (process.env.NODE_ENV !== 'production') {
  watch(messagesDir, { recursive: true }, () => cache.clear()).unref()
}

// app/layout.jsx
import { headers } from 'next/headers'
export default async function L({ children }) {
  await headers()
  return <html><body>{children}</body></html>
}
// app/page.jsx
export default function P() { return <h1>hi</h1> }

Server ngon gan 10 GB RAM vi du lieu dung chung bi lay lai o moi request Mot server dev chiem 9,8 GB sau 2.000 request, ban chay that chi 150 MB. Goc la mau loi chung cua moi loai server: du lieu dung chung bi doc lai o moi request. So do tu mot du an Next.js, cach sua va cach ra app cua ban, dung framework nao cung ap dung duoc. hieu nang bo nho vibe code Sau hon bon tieng chay `next dev` qua nhieu vong test E2E, Activity Monitor bao tien trinh `next-server` cua mot web app chiem 16,75 GB RAM, trong do 14 GB da bi he dieu hanh nen. App dang them tieng Anh ben canh tieng Viet, ban dich nam trong thu muc `messages/` gom khoang 70 file JSON nho cho moi ngon ngu.  Khong co dong loi nao, trang van tra dung. RAM chi tang. Do lai cho gon: khoi dong server sach, ban 2.000 request vao 10 trang, roi do. | Che do | Bo nho sau 2.000 request | |---|---| | `next dev`, truoc khi sua | 9,8 GB (ep GC xong van con 7,1 GB heap song) | | `next start`, ban build production | 128 den 167 MB | Ban chay that khong bi. Vay loi nam o che do dev, va khi dieu tra thi hoa ra co hai nguyen nhan khac nhau. ## Mau loi nay khong rieng Next.js Chi tiet duoi day do tren Next.js, nhung cai bay thi co o moi loai server: Express, Django, Rails, Laravel, Spring, Go. Cho nao code chay o moi request ma lai lay mot thu ma request nao cung can nhu nhau (ban dich, cau hinh, danh muc, template email, prompt, ket qua goi API ngoai), thi ban tra cung mot chi phi hang nghin lan. Thuong no chi hien ra la CPU va do tre. No thanh RAM khi co thu gi do giu lai ket qua cua moi lan lay: dau vet go loi cua che do dev, mot Map khong bao gio xoa, bo nho dem cua ORM gan theo tung request, log kem ca payload. Minh chi do tren Next.js nen khong noi duoc con so cho framework khac. Cach giu lai khac nhau o moi noi, con goc thi giong nhau. ## Nguyen nhan thu nhat: doc lai 70 file o moi request Ham nap ban dich trong nhu the nay, kieu code AI viet rat tu nhien: ```ts const cache = new Map() async function load(locale: string) { const hit = cache.get(locale) if (hit && process.env.NODE_ENV === 'production') return hit // chi dung cache khi chay that const out = await readAllFiles(locale) // doc ~70 file cache.set(locale, out) return out } ``` Chu `production` co ly do: luc phat trien ban sua mot cau chu va muon thay ngay, nen cache bi tat. Hau qua la o dev, moi request deu doc lai 70 file. Do bang sampling heap profiler thi cac muc bi giu nhieu nhat la ham doc ban dich va ham chup stack trace ma runtime dev cua Next/React goi cho tung promise, ke ca promise cua `readFile`. Noi gon: ban dev ghi lai dau vet moi lan doc, va 70 lan moi request thi dau vet chat dong. Cach sua gom hai thay doi nho. Cache chinh promise, khong doi co ket qua moi cache, de muoi request dong thoi cung cho mot lan doc: ```ts const cache = new Map<string, Promise<Messages>>() function load(locale: string) { let hit = cache.get(locale) if (!hit) { hit = readAllFiles(locale) hit.catch(() => cache.delete(locale)) // loi thi lan sau thu lai cache.set(locale, hit) } return hit } ``` Va giu tien loi cua dev bang cach xoa cache khi file doi, thay cho viec tat han cache: ```ts if (process.env.NODE_ENV !== 'production') { watch(messagesDir, { recursive: true }, () => cache.clear()).unref() } ``` Da kiem tra: sua mot file ban dich thi trang doi ngay, tra lai thi ve nhu cu. ## Nguyen nhan thu hai: loi rieng cua Next.js dev Sau ban sua, server sach ban rieng trang `/lien-he` van thay heap sau GC tang theo duong thang: 290, 628, 967, 1.303 MB, moi moc 500 request. Mot trang admin trong chi co root layout cung tang khoang 1,2 MB moi request. Nguoi dieu tra dung mot app Next trong, khong co dong code nao cua du an. Root layout goi `await headers()`, trang chi co mot the h1: ```jsx // app/layout.jsx import { headers } from 'next/headers' export default async function L({ children }) { await headers() return <html><body>{children}</body></html> } // app/page.jsx export default function P() { return <h1>hi</h1> } ``` Chay `next dev`, goi `/` 1.500 lan, do heap sau khi ep GC: | Phien ban Next | Heap sau 1.500 request | |---|---| | 16.4.2 | 90 → 343–350 MB | | 16.4.3 | 82 → 334 MB | | 16.5.0-canary.27 | 80 → 335 MB | Doi chung tren cung app, moi lan 1.500 request: | Thay doi | Ket qua | |---|---| | `await connection()` trong layout thay cho `headers()` | 91 → 109 MB | | Khong goi API dong nao | 88 → 126 MB | | `headers()` dat trong server component con boc `children` | van ro (90 → 348 MB) | Muc ro con tang theo kich thuoc du lieu ma trang gui xuong trinh duyet. App nay dang dua toan bo khoang 240 KB ban dich xuong moi trang qua `NextIntlClientProvider`. Bo phan do thi muc ro tu 1,2 xuong khoang 0,43 MB moi request. O app trong, payload lon nhung khong co `headers()` thi khong ro. Minh chua thay issue tuong ung o kho Next.js, va nguoi dieu tra chua gui. Neu ban gap dung to hop nay, day la kich ban tai hien nho nhat. ## Y nghia Hai nguyen nhan cong lai. Loi cua Next lam moi request de lai mot it. Doan code doc 70 file lam cai "mot it" do to ra nhieu lan. Sua cache ban dich keo con so tu 9,8 GB xuong muc chap nhan duoc cho mot buoi lam viec, nhung khong dua no ve phang nhu production. Hai bai hoc nho: - Truoc khi do loi cho code cua minh, hoac cho framework, hay dung mot app trong lam doi chung. Khong co doi chung thi chi co suy doan. - Du lieu dung chung, it doi, dung doc lai o moi request, du ban dung server nao. Ban dich, cau hinh, danh muc, template email, prompt cua chatbot deu thuoc nhom nay. Cache promise, xoa cache dung luc du lieu doi. ## Kiem tra app cua ban 1. Chay dev, ghi RAM tien trinh server, roi goi mot trang 500 lan: `for n in $(seq 1 500); do curl -s -o /dev/null localhost:3000/trang-cua-ban; done`. Do lai bang `footprint -f bytes <pid>` (macOS) hoac `top`. Tang deu va khong ha la co van de. 2. Chay cung kich ban tren ban build chay that cua app. Neu ban do dung yen thi phan lon la chuyen cua che do dev, dung voi sua code chay that. Neu ban that cung tang thi loi nam o code cua ban. 3. Tim cac dieu kien kieu `NODE_ENV === 'production'` hay `DEBUG` dung canh mot cache, va cac `readFile`, `fetch`, truy van database nam trong code chay o moi request ma ket qua khong phu thuoc nguoi goi. 4. Rieng voi Next.js: neu layout goc cua ban goi `await headers()` hay `cookies()`, thu doi sang `await connection()` hoac chuyen phan can header xuong sau hon de xem bo nho co het tang khong. Chi do, chua chac ap dung duoc cho app cua ban. 5. Dung dua toan bo ban dich xuong trinh duyet khi trang chi dung vai nhom chu.