服务端渲染(SSR)怎么区分 JS 代码块是在浏览器执行,还是在 Server 端执行?

2021-08-31 16:15:32 +08:00
 legstrong

刚开始看前端框架,对服务端渲染(SSR)很感兴趣。 想问一下哪位仁兄能否解答一下这个问题,在启动 SSR 后

npm run dev:ssr

Angular 是怎么区分哪一部分的 JS 在浏览器端执行,哪一部分在 Server 端执行的?

很可能是我作为后端程序员对 SSR 的认识存在偏颇。多多指教!

2245 次点击
所在节点    Angular
8 条回复
shapl
2021-08-31 16:21:49 +08:00
生命周期钩子 ?
acthtml
2021-08-31 16:31:27 +08:00
可以通过 window 对象来简单不严谨区分:在 server 端,没有这个 window 对象。

如果要严谨,需要参考具体 ssr 的实现文档,一般会有入口类型这样的全局常量,例如 WEBPACK_ENTRY_TYPE == 'server'.
blurh11E27
2021-08-31 17:45:19 +08:00
唉 研究完了 找我做项目呀 哈哈哈哈
zlgodpig
2021-08-31 18:09:24 +08:00
1. runtime 判断。node 和 浏览器有不同的 global 对象。不过这个可以 mock,还是要自己检查下
2. build 两个版本,build 的时候加构建参数。
duan602728596
2021-08-31 19:03:24 +08:00
一般来说,服务端不存在 window 和 document,所以可以通过
typeof window === 'undefined'
typeof document === 'undefined'
来判断。而且对于组件尤其要注意当前的环境
lujjjh
2021-08-31 20:41:49 +08:00
“Angular 是怎么区分哪一部分的 JS 在浏览器端执行,哪一部分在 Server 端执行的?”

我觉得你想要问的是一段代码比如 t = Date.now(),Angular 怎么确定它应该在服务端执行,还是交给浏览器执行。(远古时期的“SSR”是在 <script> 上标明 [runat="server"] :doge )

SSR 一般只渲染初始状态,所以可以认为服务端只执行渲染初始状态所必须执行的代码。至于 Angular 具体是什么策略,我没有写过 Angular,所以没法回答,但肯定是只要按照 Angular 的约定写代码,Angular 会自动帮你处理好 SSR 。

在服务端执行和在浏览器端执行也不是相交的,一段代码可能在首次渲染和后续渲染的时候都需要执行,所以 SSR 的代码需要同构(既能在服务端跑,又能在浏览器跑),除了一些常规的 HTTP 库,看起来 Angular 还在服务端实现了一套 document 和 location 的接口。
legstrong
2021-09-01 15:57:05 +08:00
感谢各位的回复!

> 我觉得你想要问的是一段代码比如 t = Date.now(),Angular 怎么确定它应该在服务端执行,还是交给浏览器执行。(远古时期的“SSR”是在 <script> 上标明 [runat="server"] :doge )

@lujjjh 是的,我需要知道这个。
Angular 的目录结构看起来像是把这部分的代码揉在了一起。

需要进一步了解是担心机密信息、加密规则暴露在浏览器端。

我再研究一下,有结果了会跟大家分享。
fuyun
2023-04-26 01:02:29 +08:00
import { isPlatformBrowser } from '@angular/common';
import { Inject, Injectable, PLATFORM_ID } from '@angular/core';

@Injectable({
providedIn: 'root'
})
export class PlatformService {
isBrowser = this.platformId ? isPlatformBrowser(this.platformId) : typeof document === 'object' && !!document;

constructor(@Inject(PLATFORM_ID) private platformId: any) {}
}
调用:
if (!this.platform.isBrowser) {
...
}
另外,机密信息、加密规则建议放在服务端,通过接口去调用。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/799078

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX