useSearchParams() should be wrapped in a suspense boundary
date
Jan 24, 2024
slug
use-search-params-should-be-wrapped-in-a-suspense-boundary
status
Published
tags
Shorts
Frontend
Next.JS
summary
Next.js v14.1.0 後，experimental flag missingSuspenseWithCSRBailout 預設從 false 變成 true …
type
Post
Next.js v14.1.0 後，experimental flag
missingSuspenseWithCSRBailout 預設從 false 變成 true，變成如果需要 pre-build 的 Page / Layout 有用到 useSearchParams() 但沒有在外層包上 <Suspense /> 的話，會直接在 build 時噴一個 BailoutToCSRError，Error Log 如下：“useSearchParams() should be wrapped in a suspense boundary at page "...". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout”
而會有這樣的行為主要是避免開發者在錯誤的寫法下 build 出一個 Client Side Render Only 的頁面，但感覺有點激進。雖然目前可以先手動把這個 experimental flag 關掉，但根據官方文件上的說法，未來會把這個 flag 直接拿掉，看來還是能加 Suspense 就先加吧
但相對應的在設計 custom hook 上，感覺就更不適合拿 useSearchParams() 來再封裝，畢竟外層很難 aware 裡面的實作。不過保險的解法可能就是在 Page 層都包個 Suspense，至少能讓他 build 過 🚬