SSR 实战：官网开发指南

作者介绍

祯民，字节跳动前端开发工程师，公众号「祯民讲前端」作者。曾负责抖音前端技术团队官网和字节官网中文版的开发，现维护抖音直播内容安全相关的业务及抖音直播宣传中心的日常运营，对 SSR 开发模式有深入研究和丰富的业务实践经验。

小册介绍

我们知道，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 应用！

名人推荐

适宜人群

没接触过官网开发，不支持从何下手的同学；
写过官网但是性能不好想要优化的同学；
对 SSR 的实现原理和底层源码感兴趣的同学；
想学习使用 Nextjs 开发 C 端应用的同学；
想了解 C 端应用完整部署上线流程的同学；
针对主题化、多语言等 C 端需求没有思路的同学；
想学习最新的 headless-CMS 框架 Strapi 替代项目 RPC 层，对项目进行数据管理的同学；
希望入门 C 端开发，了解从“开发-优化-配置”的整条链路的同学。

因为篇幅的限制，任何小册都没办法介绍一个开发过程需要的所有技术栈，所以在学习本小册之前，希望同学们可以提前去了解下面的基础技术栈知识：

React & hook；
Typescript；
Nodejs & Express。

SSR 实战：官网开发指南相关推荐

Vue3官网-高级指南（十五）Vue 与 Web Components
Vue3官网-高级指南(十五)Vue 与 Web Components 文章目录 Vue3官网-高级指南(十五)Vue 与 Web Components 1. Vue 与 Web Components ...

Vue3官网-高级指南（十七）响应式计算`computed`和侦听`watchEffect`（onTrack、onTrigger、onInvalidate、副作用的刷新时机、`watch` 、pre）
Vue3官网-高级指南(十七)响应式计算computed和侦听watchEffect(onTrack.onTrigger.onInvalidate.副作用的刷新时机.watch .pre).渲染机制和 ...

Threejs 官网 - 入门指南（Getting Started）
Threejs 官网 - 入门指南(Getting Started) 太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一 ...

WEB前端项目实战/酒仙网开发-李强强-专题视频课程
WEB前端项目实战/酒仙网开发-204人已学习课程介绍 WEB前端项目实战/酒仙网开发课程收益 WEB前端项目实战/酒仙网开发讲师介绍李强强更多讲师课程 ...

OMAPL138 TI官网开发资源合集
OMAPL138 TI官网开发资源合集 https://wenku.baidu.com/view/321349309b6648d7c0c74612.html 1 评估板简介基于TI OMAP-L13 ...

江门分销官网开发日记：wordpress检测后端标题并且避免重复标题
// 检测后端标题并且避免同名文章更新草稿 add_action( 'publish_post','duplicate_titles_wallfa_bc' ) ; function duplicate ...

Spring 官网阅读指南
一.概述 Spring官网:https://spring.io/,界面如下: 二.各模块介绍进入首页如上图,在首页官网会展示一些当前Spring比较流行的技术.可以看见导航栏有几个模块,信息如下: ...

Koa2 SSR打造官网PC展示页 6
十六.课程搜索展示与无结果提示 1.list中建立noDataTip文件夹 index.ejs <div class="no-data-tip"><h1>- ...

xwiki开发指南1-使用XWiki创建FAQ应用
本文是按照XWiki官网开发指南-FAQ应用创建,自己翻译总结的版本. 此篇含有大量图片,关于XWiki的开发,将在下一篇讲解. 关于XWiki的部署也会单独写一篇基于docker的部署文. 使用XW ...

最新文章

R语言attach函数、detach函数（全局注册或者全局解除）实战

推论统计学基础一：Estimation

Linux删除所有文件（作死命令，危险命令）

杭电1437 天气情况

使用Idea添加PYTHONPATH的一种方案

(完整版)环境工程学复习资料资料

Android 日志自动分析,Android 自动化测试(monkeytest)异常日志分析

音视频和图像相关知识点总结

0DAY和warez

CT重建-X射线断层成像仿真实验

为什么数学不好，和语文有关系？

数据可视化——柱状图

html5 自动矢量化,ArcScan自动矢量化

Java TCP网络编程

VAX v10.9.2062.0-52pj vDie 分析【转载请注明出处】

2018上海区块链国际周倒计时，汇聚全球意见领袖的技术盛会

直播软件源码，实现一个简单的直播功能

Redis启动多端口、运行多实例

打开浏览器，显示的首页是2345浏览器

ENFI下载器地址——百度网盘不限速下载工具

热门文章

ubuntu20.04离线安装python2.7.17

mysql自动填充测试数据库_入门篇（三）：通过填充器快速填充测试数据

Python初学笔记2-【循环语句】

云班课python测试答案_智慧职教云课堂APPPython程序设计题目答案

使用wxjava实现发表内容、预览信息以及推送文章

Unit 1: Packet Sniffing 1.1 Packet Sniffing Introduction to Packet Sniffing

腾讯美团字节抖音面经

postgreSQL数据库的监控及数据维护

[荐]硕博经验——科研论文阅读与写作实战技巧

C语言——有一个已经排好序的数组，要求输入一个数后，按原来顺序的规律将它插入数组中。