Next.js 13 版本中引入了一些新功能，變化比較大的一個(gè)點(diǎn)是 React Server Component（簡(jiǎn)稱 RSC）的支持，并且在 Next.js App Router 模式下做為一種默認(rèn)的組件類型。

RSC 也給我們帶來(lái)了一些好處，例如，減少了客戶端的包大小提高能程序的性能、可以利用服務(wù)器的一些基礎(chǔ)設(shè)施，當(dāng)在 Node.js 運(yùn)行時(shí)環(huán)境下，Node.js 可以用的資源在 RSC 組件中也都可以使用。當(dāng)然，也不是什么都支持的，當(dāng)需要 UI 交互的場(chǎng)景，RSC 就不行了，此時(shí)需要編寫(xiě) Client Component 與 Server Component 做混合渲染。

RSC 還是比較新的一個(gè)東西，學(xué)習(xí)資料也不是很多，并且當(dāng)前階段必須在一些構(gòu)建工具或框架中才可以使用。以下推薦一些 RSC + Next.js App Router 相結(jié)合的開(kāi)源項(xiàng)目示例，希望能為您的學(xué)習(xí)帶來(lái)一些幫助。

1. Netflix Clone

• 源碼：https://github.com/sadmann7/netflx-web
• 預(yù)覽：https://netflx-web.vercel.app/

2. Movies

• 源碼：https://github.com/transitive-bullshit/next-movie
• 預(yù)覽：https://next-movie.transitivebullsh.it

3. Commerce

• 源碼：https://github.com/vercel/commerce
• 預(yù)覽：https://demo.vercel.store/search

4. Hacker News

• 源碼：https://github.com/vercel/next-react-server-components
• 預(yù)覽：https://next-rsc-hn.vercel.app

5. AirBnB Clone

• 源碼：https://github.com/SashenJayathilaka/Airbnb-Build
• 預(yù)覽：https://abproject-sclone.vercel.app/

6. Drift

• 源碼：https://github.com/MaxLeiter/Drift
• 預(yù)覽：https://drift.lol/

7. Taxonomy

• 源碼：https://github.com/shadcn/taxonomy
• 預(yù)覽：https://tx.shadcn.com/

8. Blog

• 源碼：https://github.com/maxleiter/maxleiter.com
• 預(yù)覽：https://maxleiter.com/

9. Street photography

• 源碼：https://github.com/amannn/street-photography-viewer
• 預(yù)覽：https://street-photography-viewer.vercel.app/

10. A multi-step form

• 源碼：https://github.com/FesoQue/Advance-Multi-Step-Form
• 預(yù)覽：https://steppers-form.vercel.app/