这是一个创建于 1593 天前的主题，其中的信息可能已经有所发展或是发生改变。
请看： https://work.weixin.qq.com/api/doc/90001/90144/92388
切换文档时顶部和左边的菜单都不会刷新，只有文档内容区域刷新了，表现很像 vue 的单页应用，局部刷新内容。
但是右键查看网页源码又可以看到所有的内容，这样对搜索引擎就很友好。
这种可以做到局部刷新，但是又可以查看到源码的是怎么实现的？有人知道吗？
另外我看他切换文档时接口请求回来的数据有 html 的，有 md 格式的，还有 text 格式的，这是为什么
第 1 条附言 2021-06-02 11:32:17 +08:00
懂了，他这个效果跟 pjax 是一样的，第一次请求是完整的服务端渲染，后面点击切换文档是 ajax + pushState，然后修改对应位置的 innerHTML 。
学到了，这个技术不错，用户体验和搜索引擎都有照顾到
学到了，这个技术不错，用户体验和搜索引擎都有照顾到
 | 1 IsaacYoung 2021-06-02 10:00:30 +08:00 服务端渲染吧 |
 | 2 ReferenceE 2021-06-02 10:01:43 +08:00 via Android 张口就只知道 vue，上古的 frame 技术虽然淘汰了但是设计理念你可以看看 |
 | 3 murmur 2021-06-02 10:02:18 +08:00 打断点不就看出来了，改了 innerHtml 的，右键看不到源码，你那是审查元素不是查看源码 |
 | 4 TomatoYuyuko 2021-06-02 10:04:06 +08:00 这实现方法很多啊，拿 jquery 都能写一个，你说的 vue 指的是 vue 的动态路由吧。。。 |
 | 5 balabalaguguji OP @ReferenceE 但是没看到有用 frame |
| 6 murmur 2021-06-02 10:08:19 +08:00 js_doc_apiShow_cnt 对这个元素的子树修改打断点，然后你就非常明显的看到一个 innerHtml 的修改 |
| 7 balabalaguguji OP @murmur #3 是查看源码，跟审查元素我还是能区分出来的，你可以看下 |
| 8 balabalaguguji OP @murmur #6 这种方式是可以做到查看源码还能看到内容？这个我不是很清楚 |
 | 9 xiyuesaves 2021-06-02 10:11:27 +08:00 有种技术叫 pjax,和这个的效果挺像的 |
 | 10 lp7631010 2021-06-02 10:12:16 +08:00 类似于 pjax |
 | 11 LeeReamond 2021-06-02 10:14:00 +08:00 楼上说的不对，有一个嘲讽提到 vue 的意义不明，另一个说审查元素不是源码的也是意义不明。 它这个应该单纯 LZ 理解错了吧，他的服务器渲染和动态渲染是同步的，第一次访问时候调用服务器渲染结果，之后接管按钮逻辑，很单纯 |
 | 12 ymlluo 2021-06-02 10:14:28 +08:00 barba.js 类似的效果 |
 | 13 AoEiuV020 2021-06-02 10:14:48 +08:00  2 @balabalaguguji 右键查看源码那也是新的网页请求了，自然是完整的内容， 这网站看 network 就知道了，点击没有页面跳转，只是调接口获取展示新内容，然后改一下地址栏的地址， |
| 14 murmur 2021-06-02 10:15:18 +08:00 @LeeReamond IE 的查看元素，是只能看到静态的服务器渲染，chrome 的查看元素，innerHTML 调整直接变了 |
 | 15 eason1874 2021-06-02 10:17:40 +08:00 1 、服务端根据 path 渲染页面并输出完整 HTML，当用户直接请求页面时输出是完整 HTML 。 2 、提供一个内容 API，监听页面链接点击事件并拦截，然后通过 AJAX 请求接口拿到模块内容并替换，同时通过 History API 修改地址栏的 path 成为正确内容路径。 当你查看源码时，显示的不是 AJAX 修改的结果，而是浏览器根据当前 path 重新请求一次的结果。 原理类似 Turbolinks，只不过 Turbolinks 是直接请求原始页面，而这个是专门做了一个 API 去提供页面内容。 |
 | 16 IvanLi127 2021-06-02 10:19:29 +08:00 ssr+csr 就是这个效果 |
 | 17 dianso 2021-06-02 10:20:31 +08:00 via Android mdax |
 | 18 akatquas 2021-06-02 10:21:47 +08:00 简单看了代码之后，发现 会出现一个请求 ，https://work.weixin.qq.com/api/docFetch/fetchCnt?id=<id> 。 说明在客户端的代码更新是通过 vue 来做的，溯源 这个 XHR 的调用栈能发现 beforeRouteUpdate -> routerAdapter，请求返回体里面确实会有相应的 document html tag，可以直接渲染到节点。 那么首屏的怎么来的？ SSR 咯。 至于请求数据多格，说负面就是冗余浪费带宽，说正面就是为了完备性考虑，不同页面用不同类型的数据。 @ReferenceE 一楼说的是 “表现形式很像 Vue 的单页应用”， 你的阅读能力有很一些提升空间嗷。 |
 | 19 YidaZh 2021-06-02 10:22:59 +08:00 典型的单页应用 + 服务端渲染。。。 |
| 20 balabalaguguji OP @YidaZh #19 说得太泛了，要细节 |
 | 21 mekingname 2021-06-02 10:29:32 +08:00 1 1. 当你直接访问任何一个 URL 的时候，它都会直接给出后端渲染的完整页面 2. 当你在网页里面点击某个连接的时候，它通过 Ajax 请求增加的 html 代码并替换现有的部分。 而查看源代码，`view-source:网址`这种形式，本质上还是会发起新的请求，所以这里对应的`网址`会使用后端渲染的页面。于是就会给你造成这种错觉。 有一种很简单的办法来证明我所说的：你首先访问任何一个页面，例如： https://work.weixin.qq.com/api/doc/90001/90144/92392 然后，复制里面一段文字。 然后，你再单独访问另外一个页面，例如： https://work.weixin.qq.com/api/doc/90001/90144/92394 你可以看到，如果你查看这后一个页面的源代码，你是无法找到前一个页面的文字的。这就说明只有你当前直接输入网址访问的这个页面是后端渲染，你通过点击连接打开的其它页面是异步加载。 |
| 22 balabalaguguji OP @akatquas #18 感谢认真的分析 |
 | 23 xz410236056 2021-06-02 10:38:40 +08:00 hexo 博客用的 Pjax |
 | 24 C603H6r18Q1mSP9N 2021-06-02 10:48:53 +08:00 点击菜单有 ajax 请求啊。。。就是一个简单的 ajax 而已 |
 | 25 myCupOfTea 2021-06-02 10:49:09 +08:00 ssr+csr 都是这个效果 比如 react 这边的 Nextjs 我估计 vue 的 Nust.js 应该也差不多 |
 | 26 Kininaru 2021-06-02 10:49:36 +08:00 服务端渲染。点了另一篇文章，浏览器发了个请求，能看出来服务端把渲染好的内容用 json 返回过来了  |
 | 27 wowbaby 2021-06-02 10:51:28 +08:00 它这个是 ajax + history.pushState()，而且每个页面应该是生成的静态页面 |
 | 28 yunyuyuan 2021-06-02 10:57:47 +08:00 就是 pjax 的效果。ajax 请求数据或者网页，处理后直接插到 innerHTML，然后 pushState 修改 url，偷换柱。 |
| 29 balabalaguguji OP @xz410236056 #23 感谢，看了下，确实好像是效果上是这类东西，但是腾讯这个没用到你这个库 |
 | 30 um1ng 2021-06-02 11:22:55 +08:00 Next.js or Nuxt.js |
 | 31 mscb 2021-06-02 11:25:27 +08:00 via Android 带服务端渲染功能的单页面程序 |
| 32 balabalaguguji OP @mekingname #21 嗯，懂了，感谢 |
33 luqingliang 2021-06-02 11:26:39 +08:00 经典 vue |
| 34 balabalaguguji OP @AoEiuV020 #13 感谢，之前还以为查看源码是不会重新请求的，懂了 |
 | 35 cw2k13as 2021-06-02 11:27:26 +08:00 看了下这个网站就是拿 vue 写的，如果说搜索引擎可以搜索就是用了 ssr |
| 36 balabalaguguji OP @eason1874 #15 是这样！感谢，学习到了。 |
| 37 balabalaguguji OP @wowbaby #27 嗯，是的 |
| 38 balabalaguguji OP @yunyuyuan #28 嗯，已经懂了，是这样的 |
 | 39 lscho 2021-06-02 11:33:52 +08:00 这随便用哪种技术都可以实现，用 jquery 都可以。 但看腾讯这个，就是简单的服务端渲染。首次加载的话，整个页面都渲染。用户点击的话，只渲染文档区域，然后修改 url 就行了。 |
 | 40 jkmf 2021-06-02 11:38:54 +08:00 chrome 装个 wappalyzer 插件就可以看到用的什么技术栈了 |
 | 41 thtznet 2021-06-02 11:54:45 +08:00 局部刷新，很多技术都可以实现，连微软的 MVC Razor 都可以 |
 | 42 ifyour 2021-06-02 12:44:57 +08:00 可以服务端渲染（ SSR ）的单页应用（ SPA ） |
 | 43 nanxiaobei 2021-06-02 13:11:16 +08:00 比微信文档的体验要好，微信文档太丑了 |
 | 44 uadw 2021-06-02 13:24:36 +08:00 挺好的一个功能 |
 | 45 ragnaroks 2021-06-02 13:26:30 +08:00 VUE+SSR，jsdigger 可劫持分析 |
 | 46 newmlp 2021-06-02 13:52:49 +08:00 我还以为啥了不起的技术 |
 | 47 sutra 2021-06-02 14:07:16 +08:00 jQuery |
 | 48 A388 2021-06-02 14:15:26 +08:00 @ReferenceE 关键是这个页面确实是 vue 写的 |
| 49 sutra 2021-06-02 14:22:23 +08:00 |
 | 50 gdrk 2021-06-02 15:51:21 +08:00 服务端首屏渲染,后续 vue 交互 |
 | 51 maplelin 2021-06-02 16:01:41 +08:00 vue+ssr，基本大厂前端标配技能了 |
 | 52 Al0rid4l 2021-06-02 21:02:51 +08:00 ssr 吧, 因为你(Chrome)查看源代码(注意不是审查元素)的时候实际上会对当前 URL 重新发起请求, 所以后端渲染了, 但是你切换侧边栏选项, 其实还是前端渲染 这两者都可以通过查看网络请求确认 |
 | 53 luckyc 2021-06-03 10:24:45 +08:00 https://work.weixin.qq.com/api/docFetch/fetchCnt?id=24984 这用 jquery 就是一分钟的事情啊. |
 | 54 KisekiRemi 2021-06-03 16:52:06 +08:00 你下个 vuetools 去看看，本来就是 vue 做的 |
 | 55 xbchaonba 2021-06-03 17:46:51 +08:00 不就是 vue 写的吗 |
Select Language