meibin08 / Neteasecloudmusic Ssr
网易云音乐 react服务端渲染示例
Stars: ✭ 106
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Neteasecloudmusic Ssr
Stencil
A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.
Stars: ✭ 9,880 (+9220.75%)
Mutual labels: ssr
Qv2ray
⭐ Linux / Windows / macOS 跨平台 V2Ray 客户端 | 支持 VMess / VLESS / SSR / Trojan / Trojan-Go / NaiveProxy / HTTP / HTTPS / SOCKS5 | 使用 C++ / Qt 开发 | 可拓展插件式设计 ⭐
Stars: ✭ 12,886 (+12056.6%)
Mutual labels: ssr
Wild Next
Our next.js boilerplate with sane base configuration.
Stars: ✭ 101 (-4.72%)
Mutual labels: ssr
Oh My Fullstack
🚀 Full stack web application skeleton (Next.js, Redux, RxJS, Immutable, Express)
Stars: ✭ 99 (-6.6%)
Mutual labels: ssr
Serverless With Next5 Boilerplate
Serverless.js with Next.js 5 on AWS, powered by the Serverless Framework
Stars: ✭ 100 (-5.66%)
Mutual labels: ssr
Netlify Functions Express
How to use Netlify functions + express.js for serverside rendering on the JAMStack
Stars: ✭ 105 (-0.94%)
Mutual labels: ssr
Viewi
Powerful tool for building full-stack and completely reactive user interfaces using PHP
Stars: ✭ 93 (-12.26%)
Mutual labels: ssr
Scripts
Shadowsocks/SS一键脚本、ShadowsocksR/SSR一键脚本、V2Ray一键脚本、trojan一键脚本、VPS购买教程,各种网络资源和网络教程
Stars: ✭ 1,377 (+1199.06%)
Mutual labels: ssr
Depictr
A middleware for rendering static pages when crawled by search engines
Stars: ✭ 92 (-13.21%)
Mutual labels: ssr
Ts React Boilerplate
Universal React App with Redux 4, Typescript 3, and Webpack 4
Stars: ✭ 104 (-1.89%)
Mutual labels: ssr
Egg Vue Webpack Boilerplate
Egg Vue Server Side Render (SSR) / Client Side Render (CSR)
Stars: ✭ 1,302 (+1128.3%)
Mutual labels: ssr
Vue Family Bucket Ssr Koa2 Full Stack Development From Meituan
🚀🚀2020最新Vue全家桶+SSR+Koa2全栈开发☁
Stars: ✭ 100 (-5.66%)
Mutual labels: ssr
Next Express Bootstrap Boilerplate
⚡️ JavaScript boilerplate for a full stack app built using React.js, Next.js, Express.js, react-bootstrap, SCSS and full SSR with eslint.
Stars: ✭ 102 (-3.77%)
Mutual labels: ssr
.
网易云音乐 React同构直出示例在线示例:https://meibin08.github.io/NeteaseCloudMusic-SSR/#/music/song
在线示例因网易云音乐API的请求限制,github静态服务器部署,没有node代理请求转发,所以接口请求数据是失败,完整示例请本地运行
了解更多?——@IT·平头哥联盟
功能点
- react 服务端渲染 同构直出,解决了SEO优化、减少渲染等待时间(首屏优化);
- !!重点完善了同构数据请求发起到数据的接收输出、客户端/服务端请求的兼容、首屏直出等的问题;
- 网易云 API 的请求代理转发,设置header绕过网易云服务的拦截等;
- Skeleton Screen -- 骨架屏;
- 与网易云音乐M站版本完全一致的功能;
- 推荐音乐、热歌榜、搜索等
- !!等你去发现……
技术交流
安装依赖包
- git clone https://github.com/meibin08/NeteaseCloudMusic-SSR.git
- npm install (建议使用cnpm 因部分组件如不能翻墙会安装失败)
开发环境
- npm run dev
- 访问http://localhost:8081
生成环境
- npm run build
- npm start
- 访问http://localhost:8081
关于我
- 最近在写博客了,有兴趣的同学可以关注一下我和朋友一起整的公众号,专注于分享前端/测试的一些心得总结👇👇,
- 公众号:
honeyBadger8
。
项目图片预览
还可以打赏哦~
- 如果觉得此示例对你有帮助,可以打赏我一点小费哦~ ^_^ ~
鸣谢
- 一直在看同构直出的一些东西,尝试了很多次,最后以失败告终,因为在网上看了很多的文章、示例等,都以概念性的为主,每次看到最后,都是千篇一律----
最后最最重点的服务端数据处理、请求等逻辑没有了
,所以想着弄一个完整的示例,正好偶然的机会又看到了以下几位大神分享的内容,给了很大的启发,非常感谢! - NeteaseCloudMusicApi
- React同构直出优化总结
- react-isomorphic-boilerplate
- douban-movie-react-ssr
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].