盧偉冰長(zhǎng)文解析K60至尊版 對(duì)Redmi有著里程碑式的意義
在今天的Redmi后性能時(shí)代戰(zhàn)略發(fā)布會(huì)結(jié)束之后，Redmi總經(jīng)理盧偉冰又帶來(lái)了一篇長(zhǎng)文，詳解了為什么 Redmi 要開(kāi)啟后性能時(shí)代？為什么選擇和 MediaTek、Pixelworks 深度合作？以及后性
在選擇前端框架時(shí)，可靠性對(duì)我的客戶至關(guān)重要。盡管我研究了諸如SvelteKit等選項(xiàng)，但"為什么選擇Next.js？"仍然是一個(gè)經(jīng)常被問(wèn)到的問(wèn)題。在這篇文章中，我將詳細(xì)解釋為什么Next.js是一個(gè)可靠的選擇，以及它充滿前景的未來(lái)。
我的自由職業(yè)客戶經(jīng)常問(wèn)我哪個(gè)前端框架最好。他們不想要最新的潮流；他們想要可靠的東西。我研究了新的選項(xiàng)，比如SvelteKit，但Next.js總是位居前列。這不是關(guān)于最新和最偉大的，而是關(guān)于選擇經(jīng)得起考驗(yàn)和可靠的東西。在這篇文章中，我們將深入探討為什么我押注在Next.js上的主要原因，以及為什么我對(duì)它的未來(lái)感到樂(lè)觀。
在 GitHub上 獲得了令人矚目的 113,000 顆 Star ?，Next.js 無(wú)疑已經(jīng)成為 Web 開(kāi)發(fā)世界中領(lǐng)先的框架。這些星星在一定程度上可以表明開(kāi)發(fā)者社區(qū)的普遍欣賞和興趣。雖然不是一個(gè)框架質(zhì)量或成功的絕對(duì)衡量標(biāo)準(zhǔn)，但它確實(shí)暗示了 Next.js 在同行中所取得的關(guān)注和動(dòng)力。
圖片
然而，在數(shù)字世界中，受歡迎并不足夠，關(guān)鍵是要贏得行業(yè)領(lǐng)袖的信任。而 Next.js 正是做到了這一點(diǎn)。
圖片
像《華盛頓郵報(bào)》、Loom 和 Netflix 等主要公司已經(jīng)將 Next.js 集成到他們的技術(shù)堆棧中，展示了它處理大規(guī)模高流量平臺(tái)的能力。即使是擁有 1 億 YouTube 訂閱者和龐大社交媒體影響力的內(nèi)容創(chuàng)作者 MrBeast 也是使用 Next.js 構(gòu)建他的在線商店。加入這個(gè)列表的還有像 TikTok、Twitch 和 Notion 這樣有影響力的平臺(tái)，這使得 Next.js 不僅僅是一個(gè)框架，而是數(shù)字革命前線企業(yè)和創(chuàng)作者的值得信賴的合作伙伴。
圖片
Server vs. client 端渲染。Next.js 繪制。
當(dāng) Next.js 首次出現(xiàn)時(shí)，它為開(kāi)發(fā)者提供了一個(gè)革命性的選擇：在服務(wù)器上渲染頁(yè)面還是在瀏覽器中直接渲染，為 Web 開(kāi)發(fā)開(kāi)啟了新紀(jì)元。
客戶端渲染 VS 服務(wù)器端渲染 客戶端渲染是指瀏覽器使用 JavaScript 生成和更新網(wǎng)頁(yè)，通常導(dǎo)致動(dòng)態(tài)交互。相比之下，服務(wù)器端渲染是服務(wù)器創(chuàng)建初始頁(yè)面，將完全形成的頁(yè)面交付給瀏覽器，這可以提供更快的初始加載時(shí)間。
隨著 Next.js 13 的推出，游戲發(fā)生了更大的變化。開(kāi)發(fā)者現(xiàn)在可以根據(jù)每個(gè)組件的情況，決定是在服務(wù)器上還是在客戶端上進(jìn)行渲染。這種微調(diào)確保了最佳性能和最大的靈活性。關(guān)于何時(shí)使用每種策略的更清晰圖像，可以在 Next.js 文檔中找到相關(guān)信息。
圖片
Next.js 提供了三種主要的渲染策略，每種都對(duì) SEO 和性能有獨(dú)特的影響：
在快速發(fā)展的 Next.js 世界中，開(kāi)發(fā)者面臨著更多的選擇，這些選擇不僅影響渲染，還影響性能和 SEO 的基礎(chǔ)。這兩個(gè)核心運(yùn)行時(shí)引領(lǐng)了這一提供，每個(gè)運(yùn)行時(shí)都在這些領(lǐng)域具有獨(dú)特的優(yōu)勢(shì)。
通過(guò)將運(yùn)行時(shí)選擇與您的目標(biāo)對(duì)齊，您可以優(yōu)化您的 Next.js 項(xiàng)目，同時(shí)提高性能和搜索可見(jiàn)性。
圖片
React 服務(wù)器組件在這個(gè)新時(shí)代至關(guān)重要，它使 Next.js 開(kāi)發(fā)者能夠創(chuàng)建直接在服務(wù)器上渲染的UI組件。這將帶來(lái)重大的 SEO 和性能優(yōu)勢(shì)：
在今天的 Web 景觀中，用戶體驗(yàn)至關(guān)重要。內(nèi)容加載的任何延遲都可能降低用戶的參與度或轉(zhuǎn)化率：
沃爾瑪發(fā)現(xiàn)，每提高 1 秒的頁(yè)面加載時(shí)間，轉(zhuǎn)化率增加 2%。
鑒于這一點(diǎn)，Next.js 引入了 loading.js約定，結(jié)合 React Suspense，提供有意義的加載 UI。這確保了用戶在特定路由段的內(nèi)容準(zhǔn)備就緒時(shí)立即看到加載狀態(tài)。
圖片
流式渲染將其提升到更高水平。通過(guò)在服務(wù)器上準(zhǔn)備好的 UI 片段，用戶可以在整個(gè)內(nèi)容完成渲染之前開(kāi)始瀏覽頁(yè)面的部分部分。
集成到 Next.js 應(yīng)用程序路由器中，流式渲染提高了初始頁(yè)面加載速度和依賴于較慢數(shù)據(jù)獲取的 UI。結(jié)果是用戶得到迅速的反饋，即使在像產(chǎn)品評(píng)論這樣的內(nèi)容豐富頁(yè)面上也是如此。
有了這些工具，開(kāi)發(fā)者可以設(shè)計(jì)加載 UI，以及策略性地流式傳送路由部分，從而確保提供最佳的用戶體驗(yàn)。
圖片
如果您想以互動(dòng)方式體驗(yàn)這些功能，請(qǐng)查看這個(gè)出色的 Next.js 13 應(yīng)用程序游樂(lè)場(chǎng)演示。參見(jiàn) ?https://vercel.com/templates/next.js/app-directory
它并不僅止于此。在 Next.js 的核心是內(nèi)置的優(yōu)化，確保圖像、字體和腳本都經(jīng)過(guò)優(yōu)化，以提供最佳的用戶體驗(yàn)。這些特定針對(duì)核心 Web 要點(diǎn)的增強(qiáng)功能，確保用戶在每次訪問(wèn)時(shí)都能得到最佳的體驗(yàn)。
圖像是現(xiàn)代 Web 設(shè)計(jì)的重要組成部分，通常決定用戶的參與度和認(rèn)知度。識(shí)別了它們的關(guān)鍵作用，Next.js Image 組件提供了一系列旨在增強(qiáng)性能和用戶體驗(yàn)的優(yōu)點(diǎn)：
第三方腳本，如 Google Tag Manager，通常會(huì)對(duì)網(wǎng)站性能產(chǎn)生負(fù)面影響，從而顯著影響 SEO。Next.js 通過(guò)其 next/script 模塊來(lái)解決這一問(wèn)題，為開(kāi)發(fā)者提供了增強(qiáng)的控制和優(yōu)化。使用 next/script 的主要優(yōu)勢(shì)包括：
流暢的導(dǎo)航是積極的用戶體驗(yàn)的核心。Next.js 中的 組件提升了這一點(diǎn)，使 Web 應(yīng)用程序感覺(jué)即時(shí)和用戶中心化。以下是為什么它至關(guān)重要的原因：
元數(shù)據(jù)是 Web 重要性的無(wú)形動(dòng)力，驅(qū)動(dòng)搜索引擎排名，并增強(qiáng)平臺(tái)之間的可分享性。Next.js 提供了強(qiáng)大的 Metadata API，允許開(kāi)發(fā)者輕松地集成這些關(guān)鍵數(shù)據(jù)片段。您可以通過(guò) Next.js 中的兩種簡(jiǎn)化的方式嵌入元數(shù)據(jù)：
基于配置：從布局或頁(yè)面文件中簡(jiǎn)單地導(dǎo)出元數(shù)據(jù)對(duì)象。
import type { Metadata } from 'next' export const metadata: Metadata = { title: '...', description: '...',} export default function Page() {}基于函數(shù)：使用 generateMetadata 函數(shù)來(lái)獲取需要?jiǎng)討B(tài)值的元數(shù)據(jù)。
export async function generateMetadata( { params, searchParams }: Props, parent: ResolvingMetadata): Promise<Metadata> { // read route params const id = params.id // fetch data const product = await fetch(`https://.../${id}`).then((res) => res.json()) // optionally access and extend (rather than replace) parent metadata const previousImages = (await parent).openGraph?.images || [] return { title: product.title, openGraph: { images: ['/some-specific-page-image.jpg', ...previousImages], }, }}Key Benefits:
通過(guò)利用 Open Graph 協(xié)議和 @vercel/og 庫(kù)，可以提升您在社交媒體上的存在感。這個(gè)工具允許為社交媒體共享生成動(dòng)態(tài)和自定義圖像。
關(guān)鍵優(yōu)勢(shì)包括：
圖片
在快節(jié)奏的 Web 開(kāi)發(fā)世界中，效率和易用性可以使項(xiàng)目的成功有所不同。一個(gè)框架的功能，結(jié)合簡(jiǎn)化的開(kāi)發(fā)者旅程，可以極大地影響項(xiàng)目的成功。在 Next.js 中，開(kāi)發(fā)者不僅僅獲得了工具，還提供了一個(gè)生態(tài)系統(tǒng)，從構(gòu)思到部署都旨在優(yōu)化他們的工作流程。讓我們深入了解 Next.js 為開(kāi)發(fā)者中受歡迎的選擇的原因。
React 以其創(chuàng)建動(dòng)態(tài) UI 組件的能力而取得了一定的成就。然而，盡管其靈活性允許了廣泛的可能性，但它并不滿足更廣泛的架構(gòu)需求，比如路由或數(shù)據(jù)獲取。為了彌合這一差距，React 團(tuán)隊(duì)推廣全棧框架，Next.js（以及 Remix）位居首位：
圖片
Next.js 通過(guò)直觀地集成中間件和后端功能而脫穎而出。它是一個(gè)一站式解決方案。開(kāi)發(fā)者可以在同一個(gè)框架內(nèi)處理前端和后端，簡(jiǎn)化整個(gè)流程。這種統(tǒng)一消除了不斷的上下文切換，甚至編程語(yǔ)言切換的需要，確保了高效的開(kāi)發(fā)體驗(yàn)。
圖片
部署階段通常被視為繁瑣的過(guò)程。然后 Vercel 進(jìn)入了這個(gè)領(lǐng)域。專門(mén)針對(duì) Next.js，Vercel 簡(jiǎn)化了部署過(guò)程，使其變得直接而無(wú)憂。只需幾個(gè)步驟，您的應(yīng)用程序就可以投入使用，準(zhǔn)備擴(kuò)展，并優(yōu)化性能。
以下是我最喜歡的關(guān)于 Vercel 的部分：
圖片
圖片
一個(gè)框架的成功往往取決于其文檔的清晰度和可訪問(wèn)性。Next.js 在這個(gè)領(lǐng)域表現(xiàn)出色，提供了精心制作和結(jié)構(gòu)良好的文檔，有幾個(gè)原因使其脫穎而出：
圖片
從頭開(kāi)始啟動(dòng)項(xiàng)目可能會(huì)令人望而卻步。有了 Next.js，您不再需要重新發(fā)明輪子。它提供了一個(gè)廣泛的多功能模板庫(kù)，適用于各種用途，無(wú)論您是構(gòu)建基于 AI 的應(yīng)用、電子商務(wù)商店、博客還是 SaaS 平臺(tái)。
我個(gè)人最喜歡的模板包括以下：
在涉及到技術(shù)抉擇時(shí)，"永遠(yuǎn)不要押注反對(duì) React" 的格言比以往任何時(shí)候都更為真實(shí)。Next.js 的崛起與 React 茂盛的生態(tài)系統(tǒng)息息相關(guān)。一個(gè)僅僅是一個(gè) UI 組件構(gòu)建器的庫(kù)已經(jīng)發(fā)展成為一個(gè)全面的生態(tài)系統(tǒng)，驅(qū)動(dòng)著許多 Web 上最具活力的應(yīng)用程序。
React 的廣泛采用意味著有大量的資源、庫(kù)和社區(qū)解決方案可用。以下是我最喜歡的庫(kù)的簡(jiǎn)要列表，可加速您的 Next.js 全棧應(yīng)用程序的開(kāi)發(fā)。
Next.js 的成功證明了 React 的能力和其強(qiáng)大的生態(tài)系統(tǒng)。選擇 Next.js，從而間接選擇 React，開(kāi)發(fā)者們將自己與一個(gè)未來(lái)可靠且不斷發(fā)展的技術(shù)堆棧相一致，這個(gè)技術(shù)堆棧得到了充滿激情和創(chuàng)新的社區(qū)的支持。明顯的是：押注 React 就是押注更明亮、更高效、更流暢的 Web 開(kāi)發(fā)未來(lái)。
原文鏈接：https://www.felixvemmer.com/blog/why-next-js
作者：Felix Vemmer
譯者：編程界
本文鏈接：http://www.www897cc.com/showinfo-26-16514-0.htmlNext.js的崛起：為什么它是現(xiàn)代網(wǎng)站的首選全棧框架
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
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)