用户常见问题收集

[i5ting]

收集用户的常见问题和回答，沉淀到文档的常见问题章节中。

抛个砖

如何阿里云使用？ 如何集成nest？ 如何结合cdn来发布？

[unclechong]

有个关于分片的问题请教下： 现在项目里面是使用react-loadable生成分片，那为什么不直接使用 react-loadable 提供的 webpack plugin 生成的分片描述文件？手动维护分片信息可能会出现js chunk加载不全的问题，最终导致 hydrate 失败。

[unclechong]

有考虑将 react-loadable 替换到 loadable-components 吗？

[StringKe]

考虑支持 angular 么？

[SkyBlueFeet]

第三方库的引入，能给个示例吗，vue引ant-design-vue@next失败

[i5ting]

design

@zhangyuang 看一下这个

[zhangyuang]

有考虑将 react-loadable 替换到 loadable-components 吗？

不考虑，功能一致没必要换

[zhangyuang]

有个关于分片的问题请教下： 现在项目里面是使用react-loadable生成分片，那为什么不直接使用 react-loadable 提供的 webpack plugin 生成的分片描述文件？手动维护分片信息可能会出现js chunk加载不全的问题，最终导致 hydrate 失败。

可以看这篇文章https://zhuanlan.zhihu.com/p/343743374。 按照规范来不会出现加载不全的情况

[zhangyuang]

第三方库的引入，能给个示例吗，vue引ant-design-vue@next失败

参考readme antd/vant 的内容已经描述的很清楚了，也可以扫码加群咨询

[zhangyuang]

考虑支持 angular 么？

暂时不考虑，没有相关精力且个人认为必要性不大

[Rainer-Yu]

类似fetch.ts 中 isBrowser 这种重复性代码 __isBrowser__ ? await (await window.fetch('/api/index')).json() : await ctx?.apiService?.index() 将来会进行 语法糖处理吗

[zhangyuang]

类似fetch.ts 中 isBrowser 这种重复性代码 __isBrowser__ ? await (await window.fetch('/api/index')).json() : await ctx?.apiService?.index() 将来会进行 语法糖处理吗

不需要进行语法糖处理。示例代码只是告诉你 fetch.ts 可能会在不同的环境下调用，让开发者理解更深刻。而现实中，除了大公司会在服务端 node 层通过 rpc 调用其他语言提供的服务，大部分应用都是使用 http 的方式来调用其他语言提供的接口服务。这种情况下不需要判断环境。

[SSoLMan]

npm scripts build 命令，可以默认让NODE_ENV=production 吗，这样我就不用修改命令了 ："build": "cross-env NODE_ENV=production ssr build",

[zhangyuang]

npm scripts build 命令，可以默认让NODE_ENV=production 吗，这样我就不用修改命令了 ："build": "cross-env NODE_ENV=production ssr build",

本来 ssr build 默认就是 NODE_ENV=production 啊，不需要加

[SSoLMan]

我执行npm run build时，在 /config.js 文件中读取不到process.env.NODE_ENV； 使用ssr-server-utils 提供的isDev得到的是true

[zhangyuang]

isDev 是给你设置环境用的，不是给你判断环境用的。

@SSoLMan 稍等，发现问题了，这块上次更新有毛病，现在修复下

[zhangyuang]

@SSoLMan version@5.5.18 已修复 已发版

[SSoLMan]

好的，感谢

[Rainer-Yu]

能否每次保存完都显示链接地址呀

[ Midway ] Start Server at  http://127.0.0.1:3000
[ Midway ] Start on LAN http://192.168.3.4:3000

[i5ting]

127.0.0.1

能，但这样做的需求是啥？

[zhangyuang]

出于什么需求呢 ，没看出有做这个的必要性 

发自我的iPhone

------------------ 原始邮件 ------------------ 发件人: whylost @.> 发送时间: 2021年5月9日 13:37 收件人: ykfe/ssr @.> 抄送: yuuang @.>, Mention @.> 主题: 回复：[ykfe/ssr] 用户常见问题收集 (#20)

能否每次保存完都显示链接地址呀 [ Midway ] Start Server at http://127.0.0.1:3000 [ Midway ] Start on LAN http://192.168.3.4:3000
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[Rainer-Yu]

现在只有启动时显示一次,有时关闭浏览器后再次打开 直接点击链接地址打开 会比较方便.仅此而已

[y358947988]

个人觉得plugin-vue3 里

53    const combineAysncData = await getAsyncCombineData(fetch, store, to)
54    asyncData.value = Object.assign(asyncData.value, combineAysncData)

应该替换为

      asyncData.value = await getAsyncCombineData(fetch, store, to)

使用vue3 reactive() 生成一个 store 并维护响应性的工作不应由plugin-vue3 来完成 应该用户在 layout/App.vue 中完成（例如代码Object.assign(asyncData.value, combineAysncData)所做的事情）

plugin-vue3 更需要每当前端/后路由改变 将layoutFetch.ts和fetch.ts的返回值合并后返回

[zhangyuang]

1、为什么要把这段代码放业务代码里 2、合并后返回，怎么返回，不还是通过props吗，跟现在这样有任何区别吗 3、你这样等于调用新的 fetch 后默认丢弃所有之前的状态，这是不可能的

发自我的iPhone

------------------ 原始邮件 ------------------ 发件人: y358947988 @.> 发送时间: 2021年6月1日 22:44 收件人: ykfe/ssr @.> 抄送: yuuang @.>, Mention @.> 主题: 回复：[ykfe/ssr] 用户常见问题收集 (#20)

个人觉得plugin-vue3 里 53 const combineAysncData = await getAsyncCombineData(fetch, store, to) 54 asyncData.value = Object.assign(asyncData.value, combineAysncData)
应该替换为 asyncData.value = await getAsyncCombineData(fetch, store, to)
使用vue3 reactive() 生成一个 store 并维护响应性的工作不应由plugin-vue3 来完成 应该用户在 layout/App.vue 中完成（例如代码Object.assign(asyncData.value, combineAysncData)所做的事情）

plugin-vue3 更需要每当前端/后路由改变 将layoutFetch.ts和fetch.ts的返回值合并后返回

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[y358947988]

2. 首先,我每次 改变路由 只拿 新路由页面fetch.ts和layoutFetch.ts的返回值如何拿? 1&3. 关于丢弃所有状态的问题 并不会造成 丢弃所有之前的状态 的情况发生 如果需求是只需要 新路由页面fetch.ts和layoutFetch.ts的返回值 并不想每个页面fetch.ts 都添加不同的 namespace 命名空间 如果需求是只需要 asyncData 为一个 store 包含所有执行过的 fetch.ts 的返回值 并且页面fetch.ts 都添加不同的 namespace 命名空间

有一种办法是 asyncData 不仅仅返回一个 .value 新加一个 .fetchData  
asyncData.fetchData  只返回 新路由页面 fetch.ts 和 layoutFetch.ts 的返回值

当然 可能我的思想有问题, 我觉得直觉就是 fetch.ts 里return了什么 从props 里就可以取出什么 而不是需要包装一层namespace 才能做到

[zhangyuang]

心累。。有那么难理解吗。 1、asyncData 等于一个大的store，每个 fetch 等于一个 store module， store module肯定要有自己的 namespace 2、就算你不想加namespace，那要做的事情最多也是把 fetch 的返回结果直接返回给 当前fetch对应组件的 props。这就是最原始做法跟 provide/inject 完全是两个概念，只适用于极其简单的应用。并且极易导致不同组件 props key 重复 3、顺便提一下，上面说的 fetch => component props 就是 https://github.com/ykfe/egg-react-ssr 最原始的做法。这种做法只适用于非常简单的模型，在 Vue 场景实现难度大于 React，并不打算，也没有必要支持

[y358947988]

把 fetch 的返回结果直接返回给 当前fetch对应组件的 props 对,就是需要这个,不可以吗 现在并不能这样直接拿 ,加一个直接拿的途径也行啊

[zhangyuang]

尝试了一下，改动量不大。下个版本将添加该功能可扫码进入微信群了解详情

[y358947988]

尝试了一下，改动量不大。下个版本将添加该功能可扫码进入微信群了解详情

非常感谢,微信二维码过期了,望更新

[zhangyuang]

已更新

[zhangyuang]

fix by 5.5.44 https://github.com/ykfe/ssr/commit/b54f92dc988ad767c2b5714e5266fda33cbb73e8

[baikefun]

组合 ant-design-vue@next 时 有很多问题 client和server时 有些不一致 经常刷新就炸 反复看文档解决办法就是 onlyCsr 包裹起来 就白瞎了ssr。局部组件时 示例 components:{ [Button.name]:Button } template中写： 刷新就炸 ， 不知道是 ant-design-vue@next 对ssr支持有问题 还是这个SSR有问题

[zhangyuang]

@baikefun 那明显是你自己的问题啊，不一致就找为什么不一致。刷新出错就看报错信息。你自己先搞懂什么情况下用 onlyCsr 好不好，另外要反馈问题就给复现。不要说一堆没有意义的废话。

[baikefun]

@baikefun 那明显是你自己的问题啊，不一致就找为什么不一致。刷新出错就看报错信息。你自己先搞懂什么情况下用 onlyCsr 好不好，另外要反馈问题就给复现。不要说一堆没有意义的废话。

哪句是没有意义的废话了？ 刷新出错就看报错信息 我没看吗？ 提示组件没注册 或 无效的映射 一顿操作后还是异常。 最后发现 重启服务 这。。。就正常了 SSR 接入ant-design-vue@next 大概流程 1 babel.config.js 中加 plugins : [["import",{libraryName:"ant-design-vue",libraryDirectory:"lib",style:true},"ant-design-vue"]] 2 config.js中加 whiteList : [/ant-design-vue.*?(style)/] 3 render.vue中加 components:{ [Xxx.name]: Xxx }
确保配置正确的前提下 重启服务能解决蹊跷的问题

[zhangyuang]

@baikefun ？所以你想表达什么呢，提示组件没注册 或 无效的映射都是最基础的vue问题跟ssr完全无关 1、如果你是群里的那个人那就自己参考我发的example，照着抄都不会吗 2、不给复现仓库你说的每一句都是废话，你是要我来隔空猜你的代码是怎么写的吗

[baikefun]

@zhangyuang 我还能表达什么，让入坑的小白别跟我一样走弯路呗

[zhangyuang]

@baikefun 简直无语，能专业一点吗，还需要我说几万遍。提 issue 就老老实实描述 1、复现步骤 2、错误展示 3、复现仓库 人的问题不要赖在框架上面，如果你自己解决不了就老老实实按规范来。thanks。

[ChrisSong1994]

想请教下服务端的部分怎么debugger 调试的？

[zhangyuang]

@ChrisSong1994 你要debug哪种类型的代码呢。服务端Node.js代码可以打断点。服务端渲染的组件代码只能console.log不过可以sourcemap定位到源码

[akon0076]

在服务端是无法绑定DOM事件的。网上的解决方案是再拉取一个JS文件来绑定DOM事件，但如何在项目中优雅地实现呢，有相关的文档么

[zhangyuang]

.....用了vue还绑定dom事件干嘛。要绑定在客户端去做啊写法跟之前没有任何区别

发自我的iPhone

------------------ 原始邮件 ------------------ 发件人: 李红 @.> 发送时间: 2021年7月9日 09:53 收件人: ykfe/ssr @.> 抄送: yuuang @.>, Mention @.> 主题: 回复：[ykfe/ssr] 用户常见问题收集 (#20)

[akon0076]

@zhangyuang 用的react

[zhangyuang]

用什么都一样啊....这是基础中的基础跟ssr几乎没有任何关系

发自我的iPhone

------------------ 原始邮件 ------------------ 发件人: 李红 @.> 发送时间: 2021年7月9日 09:56 收件人: ykfe/ssr @.> 抄送: yuuang @.>, Mention @.> 主题: 回复：[ykfe/ssr] 用户常见问题收集 (#20)

@zhangyuang 用的react

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[zhangyuang]

写在didMount或者useeffect里面

发自我的iPhone

------------------ 原始邮件 ------------------ 发件人: 李红 @.> 发送时间: 2021年7月9日 09:56 收件人: ykfe/ssr @.> 抄送: yuuang @.>, Mention @.> 主题: 回复：[ykfe/ssr] 用户常见问题收集 (#20)

@zhangyuang 用的react

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[wzhzzmzzy]

有一点小小的改进意见：Vue3 setup() 里抛出错误会导致整个页面无法渲染，全局兜底的异常处理逻辑需要用户自己开发，这个是否可以集成到框架里？或者给一些最佳实践的指导？

[zhangyuang]

@wzhzzmzzy 报错你肯定能 catch 到error的啊，渲染降级不就是让你做这个事情的吗,http://doc.ssr-fc.com/docs/features$csr

[wzhzzmzzy]

@zhangyuang 我理解的渲染降级是底层容灾方案，并不是业务异常处理方案。那也就是我需要自己在页面里实现异常捕获+渲染报错的过程，才能直接render出来一个错误页面。也可以吧，理解了。

[zhangyuang]

@wzhzzmzzy 你要先清楚异常原因。如果你的代码只会在服务端报错，那就说明代码本身就是有问题无法在服务端运行，这种处理方法只能是应用降级到客户端渲染。如果是其他错误，例如 xxx is undefined 的错误，写代码的时候就可以去业务代码里面兼容这种错误。框架是不可能替你去决定出错后怎么处理，你可以选择降级到客户端渲染，也可以选择渲染一个提示页面。也可以做其他处理例如 静态html降级。只要你能在服务端 catch 到 error，那么怎么处理都行

[akon0076]

大佬我想问问，react18会对ssr有优化吗，有的话后面会做哪些更新呢

[zhangyuang]

除了suspense没多大变化。甚至我觉得升级18根本没多大意义

发自我的iPhone

------------------ 原始邮件 ------------------ 发件人: 李红 @.> 发送时间: 2021年7月19日 19:44 收件人: ykfe/ssr @.> 抄送: yuuang @.>, Mention @.> 主题: 回复：[ykfe/ssr] 用户常见问题收集 (#20)

[akon0076]

在前端根据环境需要做不同的操作，框架有内置注入信息到页面的的功能么