客户端渲染和跳过服务器渲染方法？答案

【问题标题】：Client side rendering and skipping server rendering approach?客户端渲染和跳过服务器渲染方法？
【发布时间】：2015-05-28 11:31:54
【问题描述】：

我想在客户端呈现我的页面，以帮助减轻服务器的负载并减少流量。我知道第一次调用服务器通常会导致服务器必须呈现请求的页面，然后将该页面发送给用户。当用户与页面交互时，javascript 接管路由，向服务器发送特定视图的请求，然后通过客户端上的 javascript 更新该视图。

我在想这种方法是否存在，是否可行。

假设我想去地址：

www.example.com/about

是否有一种方法可以将 /about 作为参数附加到来自服务器的 html 页面/javascript 代码（与 www.example.com/ 相同）。当 dom 在客户端准备就绪时，它会向服务器发送一个请求以获取 /about 数据，该数据会随着响应更新客户端视图。这意味着完全跳过服务器端渲染。

还是我疯了？

【问题讨论】：

因为它被标记为 Angular，我假设你知道它，对吧？然后查看 Angular-router ，它正是这样做的模块。
@MrE 确实！我标记了它，因为我通常使用这些平台，这篇文章可能对那些开发人员很有趣。是的，我知道它真的与他们没有任何关系。
这里有一个例子：scotch.io/tutorials/angular-routing-using-ui-router
我相信这个答案是实现您想要的一种（如果不是唯一的）方法：stackoverflow.com/questions/824349/…
@MrE 我明白了！我还没有深入了解 AngularJS，很好的链接！

标签： javascript angularjs node.js template-engine

【解决方案1】：

不，你没有疯。这是大多数单页应用程序 (SPA) 框架（如 AngularJS）的工作方式。

例如，我通常为 AngularJS 配置网络服务器的方式是具有以下路由：

/pub/<relative_file_path> 只提供<relative_file_path> 指定的静态文件，例如所有的 JS、HTML 部分和 CSS。
/api/<whatever> 是客户端通过 AJAX 访问的所有端点的位置
其他所有内容只返回index.html，这是一个静态文件，其中包含对 JS、CSS 和标记的引用的整个页面。

因此，当您访问www.example.com/about 时，您将获得index.html 页面，该页面告诉浏览器下载整个应用程序的JS，其中包括客户端路由配置。应用程序启动后，它会看到位置是www.example.com/about，并说“我知道/about，我会去那个页面！”。

当然，“转到该页面”是指“获取该页面的部分 HTML，并通过 AJAX 获取任何数据”。没有可见的页面刷新/更改发生。

【讨论】：

啊，所以它会自动检查加载中的某个部分的 url。问题是;它会首先显示原始索引内容（就像用户从那里开始一样）然后然后请求/about页面吗？如果是这样，我猜它会在更新时产生闪烁效果？
是的，它可能有点闪烁，但通常不会特别明显。实际上，您通常首先看到的是“shell/skeleton” UI，然后在加载时填充主要内容区域。对于大多数用例来说，它通常足够快。