Question

我正在阅读有关节点的Angular 2 Server侧渲染。

但我找不到一个例子或解释我该怎么做。我需要从服务器渲染一些带有角度的页面，有什么建议吗？

Answer 1

好吧，看看这个入门套件 https://github.com/alexpods/angular2-universal-starter。它具有服务器端呈现， Web worker支持（整个angular2应用程序在Web worker中运行），延迟加载（使用webpack的代码拆分）还有很多其他的东西。我希望它会对你有所帮助。

披露：我是作者。

Answer 2

这是在他们的谈话中使用角度通用的创造者的例子，它是一个工作回购 - ＆gt; https://github.com/angular/universal-starter/tree/angular-connect

这是谈话 - Full Stack Angular 2

Answer 3

看看这里：https://universal.angular.io/

看起来有些＆＃39;官方文档/网站现已上线。 API文档在代码中，但为了快速参考，请参阅以下链接：

https://universal.angular.io/api/universal/index.html#typedoc-main-index https://universal.angular.io/api/preboot/globals.html

不错的第三方概述和设置文档：https://mickaelkerjeanblog.wordpress.com/2016/05/02/angular-universal/

Answer 4

另一个example repo https://github.com/ng-seed/universal在angular2-webpack-starter展示了单个项目中的通用和精益角度。

此应用程序使用 Angular 4.0.0 提供的platform-server，它可能是一个很好的入门/种子项目，直到 Angular 提供有关使用的一些文档platform-server。

此外，它涵盖AngularClass {{3}}的大部分功能，例如async / lazy 路由， SCSS 编译（内联和外部），dev / prod模式， AoT 编译通过@ngtools/webpack，测试，TsLint / Codelyzer，@types以及更多。

披露：我也是作者：）

Answer 5

逐步在评论下方运行角服务器端渲染

步骤1：-> ng add @ng-toolkit/universal

步骤2：-> npm install

步骤3：-> npm run build:prod

步骤4：-> ng build --prod

步骤5：-> npm run server

步骤6：->运行cmd并编写命令-> curl http://localhost:4000

我的服务器端角度应用https://exampreparation.study

Answer 6

我在2018年7月发现了此搜索，并认为此后可能已经发生了变化。现在我们使用Angular 6，并且有一个很好的教程here，将它与firebase一起使用。

角度文档在这里：https://angular.io/guide/universal。

您有一个app.server.module从ServerModule导入@angular/platform-server和常规应用程序模块：

imports: [
  ServerModule,
  AppModule
],

在普通的AppModule中，您在导入withServerTransition时会调用BrowserModule。

BrowserModule.withServerTransition({ appId: APP_ID })

对于服务器端渲染，您有一个单独的主体，它仅导出服务器模块：

export { AppServerModule } from './app/app.server.module';

运行快递服务器的相关部分如下：

const { renderModuleFactory } = require('@angular/platform-server');
const { AppServerModuleNgFactory } = require('./dist/server/main');

const index = require('fs')
  .readFileSync(path.resolve(__dirname, './dist/browser/index.html'), 'utf8')
  .toString();

let app = express();

app.get('**', function(req, res) {
  renderModuleFactory(AppServerModuleNgFactory, {
    url: req.path,
    document: index
  }).then(html => res.status(200).send(html));
});

Answer 7

服务器端渲染有2种

动态SSR（服务器端渲染）和静态预渲染

动态SSR 的概念是，将启动一个实时Node服务器，每当命中Route时，它就会动态生成并序列化应用程序-将String返回给浏览器。请记住，您不能将其放置在AWS S3或nginx或apache httpd中，而需要在某个地方运行节点服务器。

静态预渲染是指我们要预渲染路线列表并创建静态文件（例如：index.html，about-us.html等）然后使用我们选择的服务器稍后会提供这些文件。您可以像使用普通的角度应用程序一样，使用AWS S3或nginx或apache httpd进行部署。

那么我们怎么知道选择哪个以及何时选择呢？

预渲染通常可以为您提供更好的性能，因为我们不等待服务器使用您应用程序中所有必需的API，并且无需“序列化”任何内容，它已经拥有应用程序的所有序列化HTML为每个Routes文件输出。这是我们与客户考虑的一系列问题，然后再考虑我们需要采取的路线。

何时使用静态预渲染：

您的应用程序本身是静态的。（或至少是您要预渲染的路线）例如：主页|关于我们|与我们联系
站点的非常动态的部分（以及位于登录/身份验证屏障后面的部分）可以指向应用程序的常规客户端呈现（CSR）版本，而Angular可以正常引导自身。 / p>
您的应用程序更新不是很频繁。每当需要对静态路由进行一些更改时，只需简单地再次运行构建脚本，然后重新发布包含所有预渲染文件的/ dist文件夹即可。

何时使用动态SSR：

您的应用程序（以及您到达SSR的路线）非常动态
您有一个“趋势产品”列表| “实时数据” |等等，您需要为每个服务器端渲染正确填充。
您的应用程序结构是基于JSON文件或CMS呈现的，在任何给定时刻任何内容都可能发生变化。

通常大多数应用程序都需要静态预渲染（因为身份验证墙后面的任何路由都无法从使用SSR中获得太多/任何收益，因为主要目的之一是获得SEO），并改善了感知性能。请记住，您始终可以使应用程序的某些方面在SSR期间不呈现，并在CSR期间填充这些动态部分！

参考 https://medium.com/@MarkPieszak/angular-universal-server-side-rendering-deep-dive-dc442a6be7b7

任一方法（截至2019年12月）

对于动态SSR ，只需遵循https://angular.io/guide/universal

用于静态预渲染

https://stackoverflow.com/a/53725674/6785908

https://github.com/angular/angular/issues/23024

Angular 2 Universal - 服务器端渲染

7 个答案:

动态SSR（服务器端渲染）和静态预渲染

那么我们怎么知道选择哪个以及何时选择呢？

何时使用静态预渲染：

何时使用动态SSR：

任一方法（截至2019年12月）