【问题标题】:Is there a way to combine CSR and SSR for the same Angular app?有没有办法为同一个 Angular 应用程序结合 CSR 和 SSR?
【发布时间】:2022-03-14 23:47:53
【问题描述】:

我的团队正在寻找类似Medium 克隆的东西。用户创建的帖子预计不会有太大变化,因此SSR/SSG 似乎是一个不错的选择,特别是如果有一些可用的增量构建功能。但是,帖子上的“点赞”之类的内容可能会非常频繁地变化,因此我们不确定如何适应这种情况。

此外,应用程序的一部分将超越登录,如仪表板,或创建新帖子的编辑器......等,不需要 SEO,所以我们正在考虑是否可以通过 CSR 来完成,而其他部分仍然是SSG或SSR。

这样的组合可以用 Angular Universal 完成吗?到目前为止,我们一直在制作 CSR Angular SPA-s,如果问题有点愚蠢,我们深表歉意:(

【问题讨论】:

    标签: angular server-side-rendering


    【解决方案1】:

    SSR 并不意味着缓存。这意味着当您登陆页面时,内容将从服务器动态生成。结果页面将包含组件的 html,而不仅仅是带有 CSR 的 index.html 的正常内容。所以你最终会得到一个更快的页面显示,以及一个可以被搜索引擎读取的页面。

    一旦页面被渲染并且所有的 js 被解析,客户端的 Angular 应用就会接管。客户端应用将再次调用 API(除非您使用 TransferState),并再次渲染组件。

    也许您对服务器端预渲染感到困惑,因为可以为某些路由预生成 html 页面。这比普通 SSR 快,但数据可能不是最新的。在任何情况下,加载页面后,Angular 客户端应用程序都会接管。

    【讨论】:

      【解决方案2】:

      看看this hybrid approach。在我的工作中,我们正在解决一个类似的问题,我们希望大部分内容不会经常更改,但有几个部分是动态的,取决于谁登录。

      一旦将预渲染的 HTML 文件传递​​给浏览器,Angular 应用程序的其余部分就会加载到顶部,并且 JS 会像平常一样执行 - 允许您根据需要加载动态内容。

      【讨论】:

        【解决方案3】:

        我自己一直在研究这个问题。看起来没有办法在开箱即用的同一个应用程序中混合 CSR 和 SSR。

        网上很少有文章提到Angular应用程序中的动态SSR,但我找不到任何代码sn-ps。

        不过,这个article 展示了如何使用 nginx 服务来做到这一点。

        【讨论】:

        • 您可以只发送来自server.tsindex.html文件,以获得您只需要CSR的路线。
        • 嗨@David,你能分享sn-ps来帮忙吗?我也在寻找相同的东西,并且被困了很多天。
        【解决方案4】:

        您可以同时拥有 CSR(客户端渲染)和 SSR(服务器端渲染)。您必须返回 index.html 文件,而不是在 server.ts 文件中呈现它。如果您需要 SEO 但对 DOM 功能有疑问,这很有帮助。 这是一个例子:

         // This route will do CSR
         server.get('/CSR', (req, res) => {
            res.sendFile(join(distFolder, 'index.html'));
          });
          
          // Will do SSR
          server.get('/SSR', (req, res) => {
            res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
          });
        

        【讨论】:

          猜你喜欢
          • 2021-06-30
          • 1970-01-01
          • 1970-01-01
          • 2019-02-18
          • 2022-01-20
          • 2012-03-05
          • 1970-01-01
          • 1970-01-01
          • 2019-08-15
          相关资源
          最近更新 更多