Next.js 是一個(gè)構(gòu)建在 React 之上的 JavaScript 框架，而 React 是一個(gè)用于構(gòu)建用戶界面的流行庫。這意味著可以使用 React 來構(gòu)建應(yīng)用程序，而 Next.js 提供了額外的工具和功能來簡化這一開發(fā)過程。Next.js 的主要優(yōu)勢(shì)之一是它支持服務(wù)器端渲染。意味著服務(wù)器可以為頁面生成 HTML 并將其發(fā)送給客戶端，而不是客戶端使用 JavaScript 生成 HTML，這樣可以提高應(yīng)用程序的性能和 SEO。

Next.js 還包括許多其他功能，這些功能在構(gòu)建和部署 Web 應(yīng)用程序時(shí)很有用。例如，它具有自動(dòng)代碼拆分功能，這樣有利于提升應(yīng)用性能，因?yàn)閼?yīng)用程序?qū)⒅患虞d當(dāng)前頁面所需的代碼，而不是一次加載所有代碼。Next.js 還有一個(gè)內(nèi)置的開發(fā)服務(wù)器和一個(gè)用于將應(yīng)用程序部署到生產(chǎn)環(huán)境的工具鏈。

隨著...的引入Next.js 13和應(yīng)用程序路由器的測(cè)試版，React服務(wù)器組件公開發(fā)布。這個(gè)新的范例允許不需要React的交互特性的組件，例如useState和useEffect，只保留服務(wù)器端。受益于這一新功能的一個(gè)方面是國際化。傳統(tǒng)上，國際化需要權(quán)衡性能，因?yàn)榧虞d翻譯會(huì)導(dǎo)致更大的客戶端捆綁包，而使用消息解析器會(huì)影響應(yīng)用程序的客戶端運(yùn)行時(shí)性能。

的承諾React服務(wù)器組件我們可以魚與熊掌兼得。如果國際化完全在服務(wù)器端實(shí)現(xiàn)，我們可以為我們的應(yīng)用程序?qū)崿F(xiàn)新的性能水平，而將交互功能留給客戶端。但是，當(dāng)我們需要應(yīng)該在國際化消息中反映的交互控制的狀態(tài)時(shí)，我們?nèi)绾问褂眠@種范式呢？

在本文中，我們將探索一個(gè)顯示Unsplash街頭攝影圖像的多語言應(yīng)用程序。我們將使用next-intl為了在React服務(wù)器組件中實(shí)現(xiàn)我們所有的國際化需求，我們將研究一種以最小的客戶端占用空間引入交互性的技術(shù)。