3

背景：使用 Angular Universal 执行预渲染，但并非所有路由都会被渲染（大部分是查询参数或仅经过身份验证的页面），因此希望根据需要回退到快速渲染器。

快速复制（bash）：

npm install -g @angular/cli@next
ng new partial-prerender -s -t --minimal --routing --interactive=false
cd partial-prerender/
ng add @nguniversal/express-engine@'^9.0.0-rc.1'
ng g m child --route child --module app
cat << 'EOF' > src/app/app.component.ts
import { Component } from '@angular/core';

@Component({
  template: `<div [routerLink]="['/']">Root</div><div [routerLink]="['child']">Child</div><router-outlet></router-outlet>`,
})
export class AppComponent {}
EOF
npm run prerender
npm run serve:ssr

这种快速复制将生成应用程序、通用实现、子页面，并替换应用程序 html 以提供 2 个链接和一个路由器插座，然后构建/预渲染。两条路线都将被预渲染，但这足以讨论这个问题。

问题：执行动态 SSR，因为 Express 服务器将接收请求而不是提供预渲染的静态文件。通常无需/index.html指定即可访问 URL。

请注意，可以在/dist/partial-prerender/browser/index.html和找到静态文件.../child/index.html。为了测试，我用垃圾替换了这些文件的内容，只是为了一目了然地确定正在加载哪些文件。

也可以添加console.log('DYNAMIC');一个server.ts：

server.get('*', (req, res) => {
    console.log('DYNAMIC');
    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
});

当向localhost:4000or发出请求时localhost:4000/child，将打印“动态”并生成动态渲染版本，而不是给我损坏的预渲染文件。

当向localhost:4000/index.htmlor提出请求时localhost:4000/child/index.html，

server.get('*.*', express.static(distFolder, { maxAge: '1y' }));

拾取并提供损坏的文件。

一切都是有道理的，为什么会发生，但我希望能够只点击给定的 url（没有/index.html并接收预渲染文件（如果可用），然后回退到让 SSR 工作。

潜在的解决方案： 修改server.ts以测试与给定请求路径匹配的文件是否存在 +/index.html并为它们提供服务，回退到res.render(...

  • 这是最好的方法吗？
    • 如果是这样，为什么这不是默认功能？我唯一的猜测是你在不增加检查开销的情况下使用反向代理执行此操作的灵活性。
  • 最好的方法是什么？
    • 可能 6 年没有大量使用 Express，但感觉express.static应该以某种方式使用fs
    • 如果fs是答案，将预渲染文件缓存在内存中是否有意义？

如果有帮助，我会生成一个 alpine-node 容器并使用 Nginx 入口部署到 K8s。仅提及这一点，因为也许有一个类似神奇try-files的功能可以“尝试”/index.html从节点容器中“尝试”文件+检索，然后在没有 , 的情况下回退/index.html，但似乎不太可能。

4

2 回答 2

4

您可以像这样在 get 请求中使用 if 语句

const fullPath = join(distFolder, req.originalUrl);
  if (existsSync(fullPath)) {
    console.log('STATIC Exists');
    return res.sendFile(join(distFolder, req.originalUrl));
  } else {
     //Dynamic
     res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
   }
于 2020-07-29T07:37:01.770 回答
0 
npm install @nguniversal/express-engine@11.2.1 --save

默认情况下它已经带来了静态页面。

于 2021-03-05T18:33:45.017 回答