这是一个创建于 1304 天前的主题，其中的信息可能已经有所发展或是发生改变。
请看： 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
l4ever 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