私は ASP.NET Web サイトを持っており、いくつかの Angular 2 コンテンツをそれに取り込もうとしています。Web サイトにはさまざまなページがあり、多くの静的コンテンツが含まれています。特定のページでは、Angular 2 アプリケーションとしてレンダリングされる動的コンテンツをレンダリングする必要があります。
/* CSS not important */ body { font-family: sans-serif; padding: 5px; } [data-dynamic-app] { color: white; padding: 8px; background: #4444ff; margin: 10px 0; }<section>
<h2>Some Static Content</h2>
<p>
There is static content on the page that is rendered by the ASP.NET application.
</p>
</section>
<div data-dynamic-app="appA">Placeholder for App A</div>
<div data-dynamic-app="appB">Placeholder for App B</div>これは、クライアント側では問題ではありません。既にプレースホルダー要素 (data-dynamic-appそれらの属性によって識別される) を反復処理し、それぞれに適切な Angular アプリケーションをブートストラップすることができたからです。簡単です。
ただし、SEO の理由から、クライアント側のコードに到達する前にページの Angular 部分がレンダリングされるように、サーバー側のレンダリングを追加する必要があります。課題は、IIS を介して提供される ASP.NET Web サイト用の既存の Visual Studio ソリューションにこれを構築しようとしていることですが、それを行う方法がわかりません。
私は頭の中でアイデアを実行してきましたが、Angular Universal の経験がないフロントエンドに焦点を当てた開発者として、どのアイデアがクレイジーで、実際にどこかに行き着く可能性があるかどうかを判断できません。ここに私の頭をよぎったいくつかのことがあります：
- Angular Universal を介して ASP.NET アプリケーションの HTML 出力全体をプロキシし、動的部分を事前にレンダリングします。
- ASP.NET Core で実行され、AngularUniversal が組み込まれているAngular2Spaアプリケーションを使用して、何らかの形で既存の ASP.NET サイトからコンテンツを取得します。
上記はまったく意味をなさないかもしれませんし、それらの「もし」または「どのように」もわかりません。私は、ASP.NET、IIS、さらには Angular Universal についてもほとんど知りません。したがって、上記を明確化/改善するためのアイデア、またはまったく異なるより良いアイデアをいただければ幸いです。