这是我参与「第五届青训营」伴学笔记创作活动的第 11 天

SSR主要涉及和面向的是C端的对象。
C端的特点：
因为C端网站的数据相对更为敏感、用户容忍度低、部署手续流程更多，考虑不周全往往又会造成不可逆的品牌形象损失，所以对于开发者，开发过程中会承受很大的心理负担和压力。

官网开发

同样作为 C 端网站，官网拥有与其他 C 端网站相同的技术架构选型，通过服务器端渲染（简称：SSR，后文均用 SSR 表示）来进行项目的开发和 SEO 优化，并且压测、备案、部署这些流程和大部分 C 端网站都是类似的。

官网开发的技术核心

项目开发：官网与大部分C 端网站一样，通常采用 SSR 来进行项目的开发，与 B 端应用的客户端渲染（简称：CSR）不同，原理上，更多的数据请求等逻辑需要放在服务器端完成，来保证 SEO 可以获取到站点的完整信息，进行更精准的引擎匹配和排行。

用户体验：官网是对外的形象站点，用户的体验和口碑会决定到外部对公司和团队的印象和信任程度，所以需要对性能有更多的要求。官网开发需要尽可能去优化站点首屏等指标，并且考虑到低网速，多媒体访问站点的情况，保证体验可以在多个场景下保持正常。

运营维护：一个站点上线后，运营会对站点进行后续的维护，尤其对于官网项目，经常会有实时的数据或是政策更新，所以针对官网应用我们需要保证官网数据的可灵活配置，最好可以提供一个额外的后台系统来协助运营。但是官网数据层相对比较简单，直接开发一个后台对于开发的成本是不小的，怎么平衡开发成本和配置效果，也是官网开发需要重点思考的问题。

部署流程：一个对外应用，有严格的备案流程，包括国家站点备案、公安备案等。同时我们还需要考虑集群相关资源的选择，合理地分配集群资源来达到成本和用户访问的平衡。不仅如此，还需要考虑 SEO 站点排行。给予对外站点足够的曝光和流量，才算是实现了官网开发的需求和初衷。

SSR的技术路线

React下的Next.js框架

包括静态及服务器端融合渲染、支持 TypeScript、智能化打包、路由预取等功能无需任何配置。

JSX基础

目标任务：能够理解什么是JSX，JSX的底层是什么

1.JSX介绍

概念：JSX是 JavaScript XML（HTML）的缩写，表示在 JS 代码中书写 HTML 结构

作用：在React中创建HTML结构（页面UI结构）

优势：

采用类似于HTML的语法，降低学习成本，会HTML就会JSX
充分利用JS自身的可编程能力创建HTML结构

注意：JSX 并不是标准的 JS 语法，是 JS 的语法扩展，浏览器默认是不识别的，脚手架中内置的 @babel/plugin-transform-react-jsx 包，用来解析该语法

JSX是JavaScript和HTML的结合，声明式的语言可以通过内置语言转化为JavaScript的命令式形式。

2.JSX中实用js表达式

目标任务：能够在JSX中使用表达式
语法
{ JS 表达式 }

const name = '柴柴'

<h1>你好，我叫{name}</h1>   //    <h1>你好,我叫柴柴</h1>

可以使用的表达式

字符串、数值、布尔值、null、undefined、object（ [] / {} ）
1 + 2、'abc'.split('')、['a', 'b'].join('-')
fn()

特别注意：if 语句/ switch-case 语句/ 变量声明语句，这些叫做语句，不是表达式，不能出现在 {} 中！！

3.JSX列表渲染

目标任务：能够在JSX中实现列表渲染
实现：使用数组的map方法

// 来个列表
const songs = [
  { id: 1, name: '痴心绝对' },
  { id: 2, name: '像我这样的人' },
  { id: 3, name: '南山南' }
]

function App() {
  return (
    <div className="App">
      <ul>
        {
          songs.map(item => <li>{item.name}</li>)
        }
      </ul>
    </div>
  )
}

export default App

注意点：需要为遍历项添加 `key` 属性

4.JSX条件渲染

作用：根据是否满足条件生成HTML结构，比如Loading效果

实现：可以使用 三元运算符 或 逻辑与(&&)运算符

// 来个布尔值
const flag = true
function App() {
  return (
    <div className="App">
      {/* 条件渲染字符串 */}
      {flag ? 'react真有趣' : 'vue真有趣'}
      {/* 条件渲染标签/组件 */}
      {flag ? <span>this is span</span> : null}
    </div>
  )
}
export default App

5.JSX样式处理

行内样式-style

function App() {
  return (
    <div className="App">
      <div style={{ color: 'red' }}>this is a div</div>
    </div>
  )
}

export default App

类名 - className（推荐）

.title {
  font-size: 30px;
  color: blue;
}

类名 - className - 动态类名控制

import './app.css'
const showTitle = true
function App() {
  return (
    <div className="App">
      <div className={ showTitle ? 'title' : ''}>this is a div</div>
    </div>
  )
}
export default App

SSR开发实战-SSR简介和JSX基础（一）| 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 11 天