Question

相比开发普通的 Web 应用，在开发 SSR 应用时，端上环境和渲染机制的差异，会对编码带来一些约束：

状态管理

Server 端的渲染过程是一个同步的操作，其本质是将 JSX 组件渲染为 HTML 字符串。

setState 、 hooks 这类对组件异步更新状态的方法，以及组件的 生命周期 方法，在 Server 端不会被执行。

开发过程中，应尽量避免将用于渲染初始页面的状态，通过异步的方式来更新。

以 useState 为例， 初始状态值 0 ， 在 Server 端渲染时，会被正常获取，而异步方法 setCount 则不会被执行。

1function Counter() {
2  let [count, setCount] = useState(0);
3  
4  if (count < 3) {
5    setCount(count + 1);
6  }
7  
8  return <span>Count: {count}</span>;
9}

环境判断

在 Node 环境下， window、location 等浏览器环境提供的全局变量是无法正常使用的。如果希望在不同端下，差异性地执行部分逻辑，可以通过为这类代码增加环境的判断方式来实现。

`universal-env` 提供了判断和获取运行时环境的能力。

1npm install universal-env --save

使用示例：

 1import { isWeb, isNode } from 'universal-env';
 2
 3function Page() {
 4
 5    if (isWeb) {
 6    // do something
 7  }
 8  
 9  return <div>hello rax</div>
10}