收藏!十个 React Server Component + Next.js 开源项目分享

开源
RSC 还是比较新的一个东西,学习资料也不是很多,并且当前阶段必须在一些构建工具或框架中才可以使用。以下推荐一些 RSC + Next.js App Router 相结合的开源项目示例,希望能为您的学习带来一些帮助。

Next.js 13 版本中引入了一些新功能,变化比较大的一个点是 React Server Component(简称 RSC)的支持,并且在 Next.js App Router 模式下做为一种默认的组件类型。

RSC 也给我们带来了一些好处,例如,减少了客户端的包大小提高能程序的性能、可以利用服务器的一些基础设施,当在 Node.js 运行时环境下,Node.js 可以用的资源在 RSC 组件中也都可以使用。当然,也不是什么都支持的,当需要 UI 交互的场景,RSC 就不行了,此时需要编写 Client Component 与 Server Component 做混合渲染。

RSC 还是比较新的一个东西,学习资料也不是很多,并且当前阶段必须在一些构建工具或框架中才可以使用。以下推荐一些 RSC + Next.js App Router 相结合的开源项目示例,希望能为您的学习带来一些帮助。

1. Netflix Clone

  • 源码:https://github.com/sadmann7/netflx-web
  • 预览:https://netflx-web.vercel.app/

图片

2. Movies

  • 源码:https://github.com/transitive-bullshit/next-movie
  • 预览:https://next-movie.transitivebullsh.it

图片

3. Commerce

  • 源码:https://github.com/vercel/commerce
  • 预览:https://demo.vercel.store/search

图片

4. Hacker News

  • 源码:https://github.com/vercel/next-react-server-components
  • 预览:https://next-rsc-hn.vercel.app

图片

5. AirBnB Clone

  • 源码:https://github.com/SashenJayathilaka/Airbnb-Build
  • 预览:https://abproject-sclone.vercel.app/

图片

6. Drift

  • 源码:https://github.com/MaxLeiter/Drift
  • 预览:https://drift.lol/

图片

7. Taxonomy

  • 源码:https://github.com/shadcn/taxonomy
  • 预览:https://tx.shadcn.com/

图片

8. Blog

  • 源码:https://github.com/maxleiter/maxleiter.com
  • 预览:https://maxleiter.com/

图片

9. Street photography

  • 源码:https://github.com/amannn/street-photography-viewer
  • 预览:https://street-photography-viewer.vercel.app/

图片

10. A multi-step form

  • 源码:https://github.com/FesoQue/Advance-Multi-Step-Form
  • 预览:https://steppers-form.vercel.app/

图片

责任编辑:武晓燕 来源: 编程界
相关推荐

2022-12-29 20:23:43

VueReact

2021-11-26 10:29:24

jsRemix开源

2021-11-29 09:12:44

Next.js Remix 开源

2022-10-13 18:54:57

JavaScriptQwikReact

2023-04-28 08:42:22

Node.js开源项目

2012-10-29 14:18:58

开源云计算

2021-01-04 09:06:18

Next.js设计技巧

2022-12-20 12:06:06

开源项目APP

2020-12-14 11:40:27

Next.js SSRReact

2013-01-14 09:11:07

2021-10-08 06:50:32

前端开源项目

2014-10-23 08:56:42

开源项目C

2023-04-07 15:12:46

ReactReact-Intl

2022-11-04 08:16:22

2022-02-22 20:48:48

RemixNext.js框架

2021-09-20 11:09:13

项目语言语法

2022-04-20 07:42:08

Python脚本代码

2021-12-02 14:55:44

Python项目编程语言

2022-03-21 14:41:33

前端代码JS

2023-03-21 08:02:34

架构React服务器
点赞
收藏

51CTO技术栈公众号