近期 Node.js 發(fā)布了新網(wǎng)站，帶來(lái)了全新的外觀變化?？雌浼夹g(shù)選型，也是緊跟潮流，用到了最新的 Next.js App Router 框架，版本 ～14.1.3 這是 Next.js 近期的最新版本了，不過(guò)看起來(lái)同時(shí)也在用 Next.js 的 pages 模式。參考 Github https://github.com/nodejs/nodejs.org

圖片

規(guī)模

nodejs.org 網(wǎng)站存在已經(jīng) 14 年了！以下是 2011 年底關(guān)于實(shí)用下載和文檔主頁(yè)的設(shè)計(jì)，當(dāng)時(shí)還是 Node.js 0.6 版本。

圖片

隨著項(xiàng)目的發(fā)展，Node.js 網(wǎng)站的規(guī)模也在逐漸增大，包含了 1600 多個(gè)頁(yè)面，巔峰時(shí)期擁有近 20 種本地化語(yǔ)言、每月 30 億次請(qǐng)求、數(shù)據(jù)傳輸量達(dá)到 2PB。

規(guī)模增大的同時(shí)以前的設(shè)計(jì)是不能滿(mǎn)足當(dāng)今需求的，一個(gè)設(shè)計(jì)良好的網(wǎng)站，對(duì)用戶(hù)的吸引力也是不同的。

首次嘗試重新設(shè)計(jì)

在 2019 年進(jìn)行過(guò)首次重新設(shè)計(jì)，域名是 nodejs.dev，github 倉(cāng)庫(kù)為 https://github.com/nodejs/nodejs.org 現(xiàn)在該倉(cāng)庫(kù)已廢棄，nodejs.dev 這個(gè)域名默認(rèn)也是做了重定向，呈現(xiàn)的是最新官網(wǎng)設(shè)計(jì)。

技術(shù)選型看起來(lái)主要是選擇了 gatsby，這是一個(gè)基于 React 的靜態(tài)站點(diǎn)生成器。

圖片

新技術(shù)棧的單一切換很復(fù)雜，并對(duì)網(wǎng)站已經(jīng)確立的存在造成了風(fēng)險(xiǎn)，團(tuán)隊(duì)面臨著孤立開(kāi)發(fā)的挑戰(zhàn)（這個(gè)代碼庫(kù)不是社區(qū)或貢獻(xiàn)者所在的地方），現(xiàn)在回想起來(lái)，可能從一開(kāi)始就無(wú)意中注定了該項(xiàng)目的失敗。

考慮 nextra

在選用 Next.js 之前，有考慮過(guò)使用 nextra，這是一個(gè)基于 Next.js 和 MDX 的靜態(tài)網(wǎng)站生成器，通過(guò) mdx 可以寫(xiě) markdown，如果有些交互類(lèi)的，你還可以寫(xiě)一個(gè) jsx 組件，在 markdown 中應(yīng)用。之前在做 《next.js 中文教程》https://github.com/qufei1993/nextjs-learn-cn 時(shí)也是選用的 nextra。

圖片

相比 Node.js 官網(wǎng)，以上項(xiàng)目規(guī)模是簡(jiǎn)單多了，這種文檔形的推薦可以考慮下 nextra。

但 Node.js 官網(wǎng)一是體量大，二是有很多自定義的設(shè)置，像 nextra 框架有自己風(fēng)格的，可能很難適應(yīng)其自定義需求。

但這也是一個(gè)很好的開(kāi)始。

選用 Next.js

Next.js 近兩年很火，從社區(qū)也能看到同 React 的緊密合作，對(duì) Node.js 團(tuán)隊(duì)來(lái)講不僅符合當(dāng)前貢獻(xiàn)者的技能水平，而且還能利用其強(qiáng)更大的工具生態(tài)系統(tǒng)。

Node.js 官網(wǎng)仍然是靜態(tài)構(gòu)建的，以確保最終用戶(hù)的速度和基礎(chǔ)托管的獨(dú)立性，還利用了 Next.js 的增量靜態(tài)再生來(lái)獲取像發(fā)布等動(dòng)態(tài)內(nèi)容。

關(guān)于 Next.js 吐槽一個(gè)點(diǎn)，在基于 Next.js App Router 框架的開(kāi)發(fā)模式下，性能是有點(diǎn)差的，速度很慢（同 vite 不是一個(gè)級(jí)別），經(jīng)常遇到內(nèi)存占用很多的問(wèn)題（還會(huì)出現(xiàn)內(nèi)存泄漏），在最新的 Next.js 版本中內(nèi)存泄漏問(wèn)題有所改善，但開(kāi)發(fā)速度慢問(wèn)題體驗(yàn)感還不是太好，有使用過(guò)的小伙伴可以來(lái)發(fā)表下言論。

不過(guò) Node.js 新官網(wǎng)看起來(lái)在開(kāi)發(fā)模式下用的是 Next.js 在研發(fā)的新編譯器 turbo。

圖片

在選用 Next.js 期間 Node.js 與 Vercel 有著密切的合作關(guān)系。當(dāng)網(wǎng)站規(guī)模使 webpack 的內(nèi)存管理在靜態(tài)導(dǎo)出時(shí)受到壓力時(shí)，他們提供了直接支持（有官方對(duì)支持還是不一樣的）。

“這在某種程度上是一種共生關(guān)系。我們的需求推動(dòng)了他們的平臺(tái)改進(jìn)，而他們的平臺(tái)使我們能夠構(gòu)建一個(gè)更好的網(wǎng)站。我們?cè)诠_(kāi)發(fā)布之前對(duì)新版本進(jìn)行了測(cè)試，這是對(duì)框架進(jìn)行現(xiàn)實(shí)世界壓力測(cè)試的真實(shí)情況”。

在新網(wǎng)站的設(shè)計(jì)過(guò)程中，還有些其它方面的內(nèi)容。

• OpenJS 基金會(huì)的幫助資助
• 與設(shè)計(jì)師 Hayden Bleasel 對(duì)新官網(wǎng)的重新設(shè)計(jì)
• 使用 Orama 實(shí)現(xiàn)對(duì)網(wǎng)站的搜索
• 使用 Sentry 進(jìn)行錯(cuò)誤報(bào)告監(jiān)控

以下是 Node.js 新官網(wǎng)的首頁(yè)。

圖片

參考 https://nodejs.org/en/blog/announcements/diving-into-the-nodejs-website-redesign。