使服务器端渲染的内容在客户端上具有交互性(SSR +客户端JS)

时间:2019-05-29 10:04:13

标签: javascript progressive-web-apps nestjs ssr

我目前正在尝试一些有关利用服务器端渲染(SSR)的想法和概念。到目前为止,我已经着手使用NestJS,因为它可以让我使用PHP非常熟悉的MVC模式。但是,到目前为止,我了解到的一般用法是仅将HTML Shell发送给客户端,并向其提供其他数据(PWA)。

但是我想做的是在服务器上渲染我的内容,并在客户端到达那里时向客户端添加交互性-然后从那里拾取并继续渲染,就好像它是PWA。

到目前为止,我发现,诸如Vue和React之类的框架以及其他框架都具有名为.hydrate()的方法,该方法的工作方式与常规.render()相似,只是它需要现有的HTML和重复使用该方法将侦听器和处理程序附加到侦听器和处理程序,从而最大程度地减少了在客户端上呈现的需求。这确实在服务器上进行了更多工作,但在客户端上却减少了“直到内容的时间”。另外,它为不具备JawaScript抓取功能的搜索引擎(如Google)保留了很多SEO功能。

但是,如果满足以下条件,似乎只能补水-如果我做错了,请纠正我-

  • 服务器和客户端的路由是相同的。与之类似,服务器和客户端必须具有可用的相同组件和适当的路由器。
  • 水合作用只能在一个框架内使用(React无法渲染Vue)。这是可以理解的,因为它是一个特定的实现。

为此,我必须“基本上”编写针对服务器的应用程序,就像它是客户端一样,然后配置WebPack-或任何其他捆绑程序-为客户端构建几乎相同的应用程序,减去服务器处理(HTTP内容)。

但这是真的吗?实际上是否可以动态构建页面,将其发送给客户端,然后让客户端从那里接管,甚至可以进行任何其他渲染的地方?

为演示我想做什么,请考虑以下事件流:

  • 客户端连接到服务器,请求/foo。 (HTTP/1.1 GET /foo
  • 服务器处理请求并生成一个部分内容,其中仅包含需要进入<body>的内容。
  • 将部分文件插入HTML外壳程序,其中包括对客户端脚本client.js的引用。
  • 客户端接收渲染过程的输出并运行client.js
  • 客户端使用client.js中的组件来混合服务器发送的HTML文档的内容。
  • 用户现在单击指向/bar的链接。
  • 客户端向服务器发出/bar的请求。但是,不是返回另一个完整的HTML文档,而是只发回部分(或只是JSON对象)。
  • 客户将部分文档插入文档中,再次使其水化,并恢复交互性。尽管该站点最初是由服务器渲染的,但现在它的行为实际上类似于PWA。

我想坚持使用NestJS,因为它是MVC概念。但是我想知道这种混合SSR / PWA经验的想法是否可行?

谢谢!

0 个答案:

没有答案