Hello，大家好，我是 Sunday。
5月23日，Next.JS 正式公布了 15 RC（候選版本）。這幾乎標(biāo)志著 Next.JS 15 的所有全新功能都已經(jīng)確定下來(lái)了。
圖片
在這里它提供了很多全新更新，其中有 6 個(gè)我個(gè)人認(rèn)為 價(jià)值較大 的全新功能（或更新），咱們一起來(lái)看一下吧！
圖片
運(yùn)行 create-next-app 時(shí)，會(huì)出現(xiàn)一個(gè)新的提示詢(xún)問(wèn)：是否要啟用 Turbopack 進(jìn)行本地開(kāi)發(fā)（默認(rèn)為No）。
? Would you like to use Turbopack for next dev? … No / Yes這意味著，Next.JS 將逐步從 webpack 過(guò)渡到 Turbopack
Turbopack：最快的模塊打包器之一
據(jù) Turbopack官網(wǎng) 描述（真實(shí)情況有待商榷）：Turbopack 比 Webpack 快 700 倍，比 Vite 快 10 倍。
可以使用 --turbo 來(lái)啟用 Turbopack：
npx create-next-app@rc --turboNext.js App Router 建立在 React Canary 之上，這使得開(kāi)發(fā)者可以在 React v19 發(fā)布之前使用這些新的 React API 。其中包括客戶(hù)端和服務(wù)器的新功能，例如：Actions。
而 React Compiler 是一個(gè) React 編譯器。
React Compiler 是 React 團(tuán)隊(duì)在 Meta 上創(chuàng)建的一個(gè)新實(shí)驗(yàn)性編譯器。該編譯器通過(guò)對(duì)純 JavaScript 語(yǔ)義和 React 規(guī)則的理解，可以深入理解你的代碼，這使其能夠?yàn)槟拇a添加自動(dòng)優(yōu)化。編譯器通過(guò)諸如 useMemo 和之類(lèi)的 API 減少了開(kāi)發(fā)人員必須執(zhí)行的手動(dòng)記憶量 useCallback - 使代碼更簡(jiǎn)單、更易于維護(hù)且更不容易出錯(cuò)。
使用方式如下：
npm install babel-plugin-react-compilerconst nextConfig = { experimental: { reactCompiler: true, },}; module.exports = nextConfig;const nextConfig = { experimental: { reactCompiler: { compilationMode: 'annotation', }, },}; module.exports = nextConfig;Next.js 14.1 對(duì)錯(cuò)誤消息和 Hydration 錯(cuò)誤進(jìn)行了改進(jìn)。Next.js 15 繼續(xù)在此基礎(chǔ)上進(jìn)行改進(jìn)，添加了改進(jìn)的 Hydration 錯(cuò)誤視圖。
Hydration 錯(cuò)誤現(xiàn)在會(huì)顯示錯(cuò)誤的源代碼，并提供有關(guān)如何解決問(wèn)題的建議。
例如，這是 Next.js 14.1 中先前的錯(cuò)誤消息：
圖片
Next.js 15 RC 對(duì)此進(jìn)行了改進(jìn)：
圖片
Next.js App Router 推出了自定義緩存默認(rèn)值。這些默認(rèn)值旨在默認(rèn)提供性能最高的選項(xiàng)，并可在需要時(shí)選擇退出。
并不再自動(dòng)緩存！
根據(jù)反饋，重新評(píng)估了緩存啟發(fā)式方法以及它們?nèi)绾闻c部分預(yù)渲染（PPR）等項(xiàng)目以及使用第三方庫(kù)進(jìn)行交互。在 Next.js 15 中，將請(qǐng)求、路由處理程序和客戶(hù)端路由器緩存的緩存默認(rèn)GET設(shè)置從默認(rèn)緩存更改為默認(rèn)不緩存。
如果想要緩存，那么需要手動(dòng)配置，以下是一個(gè)使用 faetch API 的示例：
fetch('https://...', { cache: 'force-cache' | 'no-store' });在 Next.js 14 中，引入了部分預(yù)渲染 (PPR) - 一種結(jié)合靜態(tài)和動(dòng)態(tài)渲染的優(yōu)化在同一頁(yè)上。
除非使用動(dòng)態(tài)函數(shù)，否則 Next.js 目前默認(rèn)為靜態(tài)渲染例如cookies()、、headers()以及未緩存的數(shù)據(jù)請(qǐng)求。
這些 API 將整個(gè)路由選擇為動(dòng)態(tài)渲染。使用 PPR，開(kāi)發(fā)者可以將任何動(dòng)態(tài) UI 包裝在 Suspense 邊界中。當(dāng)新請(qǐng)求進(jìn)入時(shí)，Next.js 將立即提供靜態(tài) HTML shell，然后在同一個(gè) HTTP 請(qǐng)求中渲染和流式傳輸動(dòng)態(tài)部分。
為了允許逐步采用，新版本添加了 experimental_ppr 路線(xiàn)配置選項(xiàng)，用于將特定的布局和頁(yè)面選擇到 PPR 中：
import { Suspense } from "react"import { StaticComponent, DynamicComponent } from "@/app/ui" export const experimental_ppr = true export default function Page() { return { <> <StaticComponent /> <Suspense fallback={...}> <DynamicComponent /> </Suspense> </> };}在處理用戶(hù)請(qǐng)求時(shí)，服務(wù)器通常會(huì)執(zhí)行與計(jì)算響應(yīng)直接相關(guān)的任務(wù)。但是，開(kāi)發(fā)者可能需要執(zhí)行日志記錄、分析和其他外部系統(tǒng)同步等任務(wù)。
由于這些任務(wù)與響應(yīng)沒(méi)有直接關(guān)系，因此用戶(hù)不必等待它們完成。
after()是一個(gè)新的實(shí)驗(yàn)性 API，它通過(guò)允許開(kāi)發(fā)者在響應(yīng)完成流式傳輸后安排要處理的工作來(lái)解決此問(wèn)題，從而使輔助任務(wù)能夠在不阻塞主響應(yīng)的情況下運(yùn)行。
要使用它，請(qǐng)?zhí)砑?nbsp;experimental.after 到 next.config.js：
const nextConfig = { experimental: { after: true, },}; module.exports = nextConfig;
本文鏈接：http://m.www897cc.com/showinfo-26-92196-0.htmlReact 15 RC 版本已發(fā)布！談?wù)勥@ 6 個(gè)令人驚嘆的新功能
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
上一篇： 誰(shuí)說(shuō)爬蟲(chóng)只能 Python ？C# 爬蟲(chóng)開(kāi)發(fā)與演示
下一篇： OPPO 宣布全面普及 AI 手機(jī)，2024 年將為約 5 千萬(wàn)用戶(hù)提供生成式 AI 功能
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)