请看： https://work.weixin.qq.com/api/doc/90001/90144/92388
切换文档时顶部和左边的菜单都不会刷新，只有文档内容区域刷新了，表现很像 vue 的单页应用，局部刷新内容。
但是右键查看网页源码又可以看到所有的内容，这样对搜索引擎就很友好。
这种可以做到局部刷新，但是又可以查看到源码的是怎么实现的？有人知道吗？
另外我看他切换文档时接口请求回来的数据有 html 的，有 md 格式的，还有 text 格式的，这是为什么
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
This topic created in 1979 days ago, the information mentioned may be changed or developed.
Supplement 1 · Jun 2, 2021
懂了，他这个效果跟 pjax 是一样的，第一次请求是完整的服务端渲染，后面点击切换文档是 ajax + pushState，然后修改对应位置的 innerHTML 。
学到了，这个技术不错，用户体验和搜索引擎都有照顾到
学到了，这个技术不错，用户体验和搜索引擎都有照顾到
 |
IsaacYoungJun 2, 2021
1
服务端渲染吧
|
 |
ReferenceEJun 2, 2021 via Android
2
😅张口就只知道 vue，上古的 frame 技术虽然淘汰了但是设计理念你可以看看
|
 |
murmurJun 2, 2021
3
打断点不就看出来了，改了 innerHtml 的，右键看不到源码，你那是审查元素不是查看源码
|
 |
TomatoYuyukoJun 2, 2021
4
这实现方法很多啊，拿 jquery 都能写一个，你说的 vue 指的是 vue 的动态路由吧。。。
|
 |
5
@ReferenceE 但是没看到有用 frame
|
|
murmurJun 2, 2021
6
js_doc_apiShow_cnt 对这个元素的子树修改打断点，然后你就非常明显的看到一个 innerHtml 的修改
|
|
7
@murmur #3 是查看源码，跟审查元素我还是能区分出来的，你可以看下
|
|
8
@murmur #6 这种方式是可以做到查看源码还能看到内容？这个我不是很清楚
|
 |
xiyuesavesJun 2, 2021
9
有种技术叫 pjax,和这个的效果挺像的
|
 |
lp7631010Jun 2, 2021
10
类似于 pjax
|
 |
LeeReamondJun 2, 2021
11
楼上说的不对，有一个嘲讽提到 vue 的意义不明，另一个说审查元素不是源码的也是意义不明。
它这个应该单纯 LZ 理解错了吧，他的服务器渲染和动态渲染是同步的，第一次访问时候调用服务器渲染结果，之后接管按钮逻辑，很单纯 |
 |
ymlluoJun 2, 2021
12
barba.js 类似的效果
|
 |
13
@balabalaguguji 右键查看源码那也是新的网页请求了，自然是完整的内容，
这网站看 network 就知道了，点击没有页面跳转，只是调接口获取展示新内容，然后改一下地址栏的地址， |
2 |
murmurJun 2, 2021
14
@LeeReamond IE 的查看元素，是只能看到静态的服务器渲染，chrome 的查看元素，innerHTML 调整直接变了
|
 |
eason1874Jun 2, 2021
15
1 、服务端根据 path 渲染页面并输出完整 HTML，当用户直接请求页面时输出是完整 HTML 。
2 、提供一个内容 API，监听页面链接点击事件并拦截，然后通过 AJAX 请求接口拿到模块内容并替换，同时通过 History API 修改地址栏的 path 成为正确内容路径。 当你查看源码时，显示的不是 AJAX 修改的结果，而是浏览器根据当前 path 重新请求一次的结果。 原理类似 Turbolinks，只不过 Turbolinks 是直接请求原始页面，而这个是专门做了一个 API 去提供页面内容。 |
 |
IvanLi127Jun 2, 2021
16
ssr+csr 就是这个效果
|
 |
diansoJun 2, 2021 via Android
17
mdax
|
 |
akatquasJun 2, 2021
18
简单看了代码之后，发现 会出现一个请求 ，https://work.weixin.qq.com/api/docFetch/fetchCnt?id=<id> 。 说明在客户端的代码更新是通过 vue 来做的，溯源 这个 XHR 的调用栈能发现 beforeRouteUpdate -> routerAdapter，请求返回体里面确实会有相应的 document html tag，可以直接渲染到节点。
那么首屏的怎么来的？ SSR 咯。 至于请求数据多格式，说负面就是冗余浪费带宽，说正面就是为了完备性考虑，不同页面用不同类型的数据。 @ReferenceE 一楼说的是 “表现形式很像 Vue 的单页应用”， 你的阅读能力有很一些提升空间嗷。 |
 |
YidaZhJun 2, 2021
19
典型的单页应用 + 服务端渲染。。。
|
|
20
@YidaZh #19 说得太泛了，要细节
|
 |
21
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
@akatquas #18 感谢认真的分析
|
 |
xz410236056Jun 2, 2021
23
hexo 博客用的 Pjax
|
 |
C603H6r18Q1mSP9NJun 2, 2021
24
点击菜单有 ajax 请求啊。。。就是一个简单的 ajax 而已
|
 |
myCupOfTeaJun 2, 2021
25
ssr+csr 都是这个效果
比如 react 这边的 Nextjs 我估计 vue 的 Nust.js 应该也差不多 |
 |
KininaruJun 2, 2021
26
服务端渲染。点了另一篇文章，浏览器发了个请求，能看出来服务端把渲染好的内容用 json 返回过来了
 |
 |
wowbabyJun 2, 2021
27
它这个是 ajax + history.pushState()，而且每个页面应该是生成的静态页面
|
 |
yunyuyuanJun 2, 2021
28
就是 pjax 的效果。ajax 请求数据或者网页，处理后直接插到 innerHTML，然后 pushState 修改 url，偷樑换柱。
|
|
29
@xz410236056 #23 感谢，看了下，确实好像是效果上是这类东西，但是腾讯这个没用到你这个库
|
 |
um1ngJun 2, 2021
30
Next.js or Nuxt.js
|
 |
mscbJun 2, 2021 via Android
31
带服务端渲染功能的单页面程序
|
|
32
@mekingname #21 嗯，懂了，感谢
|
 |
luqingliangJun 2, 2021
33
经典 vue
|
|
34
@AoEiuV020 #13 感谢，之前还以为查看源码是不会重新请求的，懂了
|
 |
cw2k13asJun 2, 2021
35
看了下这个网站就是拿 vue 写的，如果说搜索引擎可以搜索就是用了 ssr
|
|
36
@eason1874 #15 是这样！感谢，学习到了。
|
|
37
@wowbaby #27 嗯，是的
|
|
38
@yunyuyuan #28 嗯，已经懂了，是这样的
|
 |
lschoJun 2, 2021
39
这随便用哪种技术都可以实现，用 jquery 都可以。
但看腾讯这个，就是简单的服务端渲染。首次加载的话，整个页面都渲染。用户点击的话，只渲染文档区域，然后修改 url 就行了。 |
 |
jkmfJun 2, 2021
40
chrome 装个 wappalyzer 插件就可以看到用的什么技术栈了
|
 |
thtznetJun 2, 2021
41
局部刷新，很多技术都可以实现，连微软的 MVC Razor 都可以
|
 |
ifyourJun 2, 2021
42
可以服务端渲染（ SSR ）的单页应用（ SPA ）
|
 |
nanxiaobeiJun 2, 2021
43
比微信文档的体验要好，微信文档太丑了
|
 |
uadwJun 2, 2021
44
挺好的一个功能
|
 |
ragnaroksJun 2, 2021
45
VUE+SSR，jsdigger 可劫持分析
|
 |
newmlpJun 2, 2021
46
我还以为啥了不起的技术
|
 |
sutraJun 2, 2021
47
jQuery
|
 |
A388Jun 2, 2021
48
@ReferenceE 关键是这个页面确实是 vue 写的
|
 |
gdrkJun 2, 2021
50
服务端首屏渲染,后续 vue 交互
|
 |
maplelinJun 2, 2021
51
vue+ssr，基本大厂前端标配技能了
|
 |
Al0rid4lJun 2, 2021
52
ssr 吧, 因为你(Chrome)查看源代码(注意不是审查元素)的时候实际上会对当前 URL 重新发起请求, 所以后端渲染了, 但是你切换侧边栏选项, 其实还是前端渲染
这两者都可以通过查看网络请求确认 |
 |
luckycJun 3, 2021
53
https://work.weixin.qq.com/api/docFetch/fetchCnt?id=24984
这用 jquery 就是一分钟的事情啊. |
 |
KisekiRemiJun 3, 2021
54
你下个 vuetools 去看看，本来就是 vue 做的
|
 |
xbchaonbaJun 3, 2021
55
不就是 vue 写的吗
|
Select Language