你会学到什么？
- React & hook；
- Typescript；
- Nodejs & Express。
课程简介
我们知道，C 端网站的数据相对更为敏感、用户容忍度低、部署手续流程更多，考虑不周全往往又会造成不可逆的品牌形象损失，所以开发者在开发过程中会承受很大的心理负担和压力。
大家是不是也有过这样的顾虑和困惑：
- 怎么对 C 端网站进行技术选型？开发过程和普通的 B 端平台有什么区别？
- 怎么提高C 端网站用户的体验，且尽可能多地适配多种设备？
- 服务器集群选多少合适？
- C 端网站的排名太靠后怎么办？
- ……
C 端网站类型多样，不论是从项目架构还是商业用途上来分类，都有多种不同的开发方式，上面的问题并没有一套全部适用的解决方案。如果要面面俱到地去学习，将是一个长期沉淀的过程，大家可以从一种项目入手，举一反三。那么哪类项目更合适呢?
我最推荐官网开发。
首先，同样作为 C 端网站，官网拥有与其他 C 端网站相同的技术架构选型，都是通过服务器端渲染（简称：SSR，后文均用 SSR 表示）来进行项目的开发和 SEO 优化，并且压测、备案、部署这些流程和大部分 C 端网站都是类似的。
其次，官网往往作为一个公司或团队的门面和品牌形象，有着更严苛的数据敏感、性能及网站排名的要求，最能作为案例来说明上面这些痛点问题。
如果面对官网应用，你能够得心应手地处理数据流转、把控站点性能以及进行 SEO 等优化，那么对于其余 C 端网站应用也不会再一筹莫展。
我希望能把自己在开发中经常遇到的问题和解决方案分享给大家，尽可能地帮助大家建立规范的开发习惯，从而开发高性能、有良好体验、搜索排名高的 C 端网站。
本着深入浅出的原则，小册分为 架构选型、基础开发、常见需求进阶、性能优化、上线部署 5 个模块，共 20 节，每节课都含有详细的 demo 代码示例及操作流程，最后全部会上传 Github 仓库。
- 架构选型篇，对官网项目进行架构选型，通过对比来学习官网项目的渲染方式。并且将手写一个架构 demo，让大家对框架知其然且知其所以然，为后续的实际开发打下扎实基础。
- 基础开发篇，从环境配置，到基础页面、路由、接口层。全链路讲解一个简单的服务器端页面是如何去开发的，并介绍怎么解决官网可灵活配置的问题，最终让你能独立从零开发一个 SSR Web 应用。
- 常见需求进阶篇，从一些常见但是相对复杂的官网需求例子开始，学习它们是怎么实现的，实现的过程可能会出现哪些问题，怎么达到最佳的实现效果，学到这里，相信你已经可以足够应付官网的大部分复杂场景。
- 性能优化篇，学习如何对官网的体验进行优化，根据实际场景，给出不同的优化方案和对比，详细说明其中的原理，以及针对不同业务场景下的取舍，帮助你提高官网的性能评分和用户体验。
- 上线部署篇，会从压测、埋点、SEO 和域名备案四个角度，详细学习官网部署时需要注意的事项，通过这个模块，你对整个部署链路的了解都会有较大的提升，最终让你可以在外网部署一个稳定可靠的官网项目。
虽然官网不能覆盖 C 端网站的全部场景，但对于提高代码规范、性能优化、架构设计的功底也会有所帮助。如果你并不想要开发官网，也完全可以做到真正地从零开发一个高性能、稳定、交互流畅、有影响力的对外 Web 应用！
课程目录
1 开篇：为什么学习官网开发？
2 架构选型：SSR 为什么广泛应用于 C端网站？
3 架构实现（一）：代码 lint & 项目构建
4 架构实现（二）：如何实现 SSR 的静态页面渲染？
5 架构实现（三）：如何支持 SSR 对数据的请求？
6 实战入门：如何搭建一个 Nextjs 服务器端渲染项目？
7 快速上手：在 Nextjs 项目中实现完整页面链路
8 数据可视化：基于 Strapi 实现后台数据的灵活配置
9 BFF数据流转：Nextjs 中的页面数据流转开发实战
10 样式注入：如何实现一个主题化功能？
11 Animation: 复杂帧动画的逐帧调试 & 实现
12 多媒体适配: 官网的设备样式兼容方案
13 Strapi 进阶：文章页分页 & 国际化多语言功能的实现
14 自定义组件: 如何实现一个动画弹窗组件？
15 首屏优化: 针对大图低网速加载场景的首屏优化方案
16 设备兼容：IOS 300ms delay & 橡皮筋问题解决方案
17 性能保障：如何对官网应用进行上线前压力测试？
18 数据埋点：用户数据的上报统计分析
19 SEO: 如何提高应用的搜索引擎排名？
20 应用上线: 从官网服务域名的申请备案到服务部署
讲师介绍
祯民，字节跳动前端开发工程师，公众号「祯民讲前端」作者。曾负责 抖音前端技术团队官网 和 字节官网中文版 的开发，现维护抖音直播内容安全相关的业务及 抖音直播宣传中心 的日常运营，对 SSR 开发模式有深入研究和丰富的业务实践经验。