如何使用服务器端渲染构建快速加载的React apps

服务端渲染与react没有直接关系,你可以理解为服务端渲染时一段js，引入到react或者vue里面都能使用，不引入也没关系。

使用服务端渲染的场景是当我们要求渲染时间尽量快、页面响应速度快时（优点），才会采用服务器渲染，并且应该“按需”对页面进行渲染 ——“首次加载/首屏”。即服务端渲染的优势在于：由中间层( node端 )为客户端请求初始数据、并由node渲染页面。

react 服务端渲染流程

服务端渲染路线：2. 请求一个html ->2. 服务端请求数据( 内网请求快 ) ->3. 服务器初始渲染（服务端性能好，较快） ->4. 服务端返回已经有正确内容的页面 ->5. 客户端请求js/css文件 ->6. 等待js文件下载完成 ->7. 等待js加载并初始化完成 ->8. react-dom( 客户端 )把剩下一部分渲染完成( 内容小，渲染快 )

我的问题是 CDN 将缓存服务器响应以加快速度，因此第一个访问 CDN 上的网站的用户将缓存其登录视图并返回到浏览器。这反过来意味着，因为它被缓存，所以访问该站点的其他用户也会看到其他用户登录的视图，而不是他们自己的，因为这是 CDN 缓存的内容。不理想。

我正在努力思考解决这个问题的最佳方法是什么。想听听有关解决此问题的最佳实践方法的任何建议吗？

我想到的一种方法是可能总是在第一次访问页面时返回注销的视图请求，因此在客户端进行身份验证/登录，从那时起始终在服务器上进行身份验证。但是，如果 next.js 仅在第一个请求上进行服务器端渲染，并且让后续请求在客户端上进行所有渲染，则此方法仅适用，我不确定是否是这种情况。

---