8

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

 1 year ago
source link: https://www.51cto.com/article/755781.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

作者：五月君 2023-05-26 08:13:49
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/
图片
责任编辑：武晓燕 来源： 编程界

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK