这是一个创建于 47 天前的主题，其中的信息可能已经有所发展或是发生改变。
最近我在做一个海外电商网站的二次开发工作，它的前端基于 React 技术栈，后端是基于 PHP 技术栈。这个网站主要是面对 C 端用户的，但是它的技术选型好像并不适合。下面我以产品列表页面来举例说明一下 当用户点击进入产品列表页面时，整体流程如下
1. 浏览器通过前端路由导航到产品页面
2. 等待 DOM 树渲染完毕后，发出 XHR 请求获取产品列表
3. 使用 js 将产品列表渲染到 DOM 上
看起来好像没什么问题，但实际体验却有点糟糕
首先进入页面时，由于没有数据，因此页面是一片空白，但是还是会渲染 DOM ，只是给人的感觉是空白的而已，不管你的 diff 算法再快，也得花时间吧。
其次 XHR 请求花费了一定的时间。
最后将数据再次渲染到 DOM 的过程也花费了一定的时间。
我们总结一下，一共渲染了两次，发送请求一次，并且这个过程无法并行，毕竟 JS 是单线程，别看它异步，再异步它也不好使。
那么如果说用户点击这个页面的时候，服务器直接返回已经渲染好数据的页面，浏览器只做一次渲染那体验会好很多。如果服务端是 JSP 这种技术，还得生成一遍 HTML 页面，也会花费一点时间。
那么根据实际业务来看，由于产品并不是经常更新（几天或者几周才可以更新一个产品），所以最好的方案就是将这个页面静态化，然后设置下这个页面的有效期，过期则重新生成。这样不仅节省了服务器生成 HTML 的时间，还可以充分利用 CDN 来缓存页面。
5 条回复
 |
1
wonderfulcxm 46 天前 via iPhone
那用 next.js ssg
|
 |
2
flmn 46 天前
Next.js 就是来解决你的问题的
|
 |
3
fd9xr 46 天前 via iPhone
那你就从 PHP 把 init data 传给 React 啊
|
 |
4
chuck1in 46 天前
这种静态网站好像就是有这种问题。如果用服务端渲染就没这个问题，从服务器拿 html 的时候已经带上了业务数据了。
说简单一些，其实就是个加载延迟的问题。解决方法其实很简单，你做一个 loading 然后在空白的时候展示这个 loadng 就可以了。 |
 |
5
Ritr OP |
Select Language