Angular Server Prerendering: より高速でユーザーフレンドリーな Web アプリケーションを構築します。
Angular は、最新の Web アプリケーションを構築するための強力なフロントエンド フレームワークです。ただし、アプリケーションのサイズが大きくなるにつれて、パフォーマンスの問題が発生する可能性があります。Angular アプリケーションのパフォーマンスとユーザー エクスペリエンスを向上させるために、開発者はさまざまな技術や方法を採用できます。その 1 つはサーバー側のプリレンダリングです。この記事では、この概念を詳細に紹介し、その使用法と利点を示す例を示します。
サーバーサイドのプリレンダリングとは何ですか?
サーバーサイド プリレンダリングは、「SSR」(サーバーサイド レンダリング) とも呼ばれ、Web アプリケーションのパフォーマンスと検索エンジン最適化 (SEO) を向上させるために使用されるテクノロジーです。これは、従来のクライアント側レンダリング (クライアント側レンダリング) とは対照的です。クライアント側レンダリングでは、アプリケーションの初期化とレンダリングがユーザーのブラウザで行われますが、サーバー側事前レンダリングでは、アプリケーションの初期化と部分的なレンダリングがサーバー上で行われます。これは、HTML をブラウザーに送信する前に、サーバーがバックエンドで Angular アプリの初期レンダリング作業の一部を実行して、レンダリングされた HTML ページを生成することを意味します。この HTML ページは、JavaScript がロードされて実行されるのを待たずに、ユーザーに直接表示できます。
サーバーサイドのプリレンダリングの主な利点は次のとおりです。
-
読み込み時間の短縮: サーバーがバックエンドで初期レンダリングを実行するため、ユーザーはコンテンツをより速く表示できます。これは、特に帯域幅が狭いデバイスやパフォーマンスが制限されているデバイスでのユーザー エクスペリエンスを向上させるために重要です。
-
SEO フレンドリー: 検索エンジン クローラーは、レンダリングされた HTML ページをより簡単にインデックス付けして理解できるため、検索結果におけるアプリのランキングが向上します。これはオンライン ビジネスにとって非常に重要です。
-
パフォーマンスの向上: クライアント側のレンダリングに必要な作業が軽減され、ブラウザーの読み込みと操作が高速化されます。これは、直帰率を減らし、ユーザー維持率を向上させるのに非常に役立ちます。
以下では、具体的な例を使用して、サーバー側のプリレンダリングがどのように機能するかを示します。
例: Angular サーバー側のプリレンダリング
この例では、Angular フレームワークと Angular Universal ライブラリを使用して、サーバー側のプリレンダリングを実装します。記事のリストと記事の詳細ページを備えたブログ サイトを構築しているとします。
ステップ 1: Angular アプリを作成する
まず、基本的な Angular アプリケーションを作成します。Angular CLI を使用して、プロジェクトのスケルトンをすばやく生成できます。
ng new my-blog-app
ステップ 2: Angular Universal をインストールする
次に、サーバー側のプリレンダリングの実装に役立つ Angular Universal ライブラリをインストールする必要があります。プロジェクトのルート ディレクトリで次のコマンドを実行します。
ng add @nguniversal/express-engine
このコマンドは、Angular Universal を自動的に構成し、サーバー側のレンダリングに必要なファイルとコードを生成します。
ステップ 3: 事前レンダリングされたルートを作成する
Angular Universal では、サーバー側でどのルートを事前レンダリングするかを定義する必要があります。たとえば、読み込み時間の短縮と SEO の最適化を実現するために、記事の詳細ページをサーバー側で事前レンダリングしたい場合があります。src/app/app.server.module.tsファイルを編集することで、プリレンダリング ルートを定義できます。
// app.server.module.ts
import {
NgModule } from '@angular/core';
import {
ServerModule, ServerTransferStateModule } from '@angular/platform-server';
import {
ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
import {
AppModule } from './app.module';
import {
AppComponent } from './app.component';
@NgModule({
imports: [
AppModule,
ServerModule,
ModuleMapLoaderModule,
ServerTransferStateModule,
],
bootstrap: [AppComponent],
})
export class AppServerModule {
}
ステップ 4: プリレンダリング サービスを作成する
次に、サーバー側で初期レンダリングを実行し、HTML ページを生成するプリレンダリング サービスを作成します。src/app/prerender.service.tsこのサービスはファイル内に作成できます。
// prerender.service.ts
import {
Injectable } from '@angular/core';
import {
renderModuleFactory } from '@angular/platform-server';
import {
enableProdMode } from '@angular/core';
import {
APP_BASE_HREF } from '@angular/common';
import {
createServerRenderer, RenderResult } from 'aspnet-prerendering';
import {
AppServerModule } from './app.server.module';
enableProdMode();
@Injectable({
providedIn: 'root' })
export class PrerenderService {
public async render(params: any): Promise<RenderResult> {
const {
AppServerModuleNgFactory, LAZY_MODULE_MAP } = AppServerModule;
const options = {
document: params.data.originalHtml,
url: params.url,
extraProviders: [
{
provide: APP_BASE_HREF, useValue: params.baseUrl },
{
provide: 'BASE_URL', useValue: params.origin + params.baseUrl },
],
};
const renderModule = createServerRenderer((moduleFactory: any) => {
return renderModuleFactory(moduleFactory, options);
});
return new Promise<RenderResult>((resolve, reject) => {
renderModule(AppServerModuleNgFactory, {
document: params.data.originalHtml,
url: params.url,
}).then((html: string) => {
resolve({
html });
}, reject);
});
}
}
ステップ 5: プリレンダリング サービスを使用する
最後に、サーバー側のルート ハンドラーで事前レンダリング サービスを使用して、特定のルートを処理します。Express.js ルート ハンドラーのサンプルのコードは次のとおりです。
// server.ts
import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import {
enableProdMode } from '@angular/core';
import * as express from 'express';
import {
ngExpressEngine } from '@nguniversal/
express-engine';
import {
join } from 'path';
import {
AppServerModule } from './src/main.server';
enableProdMode();
const app = express();
app.engine(
'html',
ngExpressEngine({
bootstrap: AppServerModule,
})
);
app.set('view engine', 'html');
app.set('views', join(__dirname, 'dist/browser'));
app.get('*.*', express.static(join(__dirname, 'dist/browser')));
app.get('*', (req, res) => {
// 使用预渲染服务处理请求
const prerenderService = new PrerenderService();
prerenderService
.render({
url: req.url,
baseUrl: '/',
origin: req.protocol + '://' + req.get('host'),
data: {
originalHtml: '',
},
})
.then(({
html }) => {
res.render('index', {
req, res, html });
})
.catch((error) => {
console.error(error);
res.status(500).send('Internal Server Error');
});
});
app.listen(3000, () => {
console.log(`Server is listening on port 3000`);
});
上記のコードでは、Angular Universal を使用してngExpressEngineルーティングを処理し、事前レンダリングが必要なルートでそれを使用しますPrerenderService。
プリレンダリングは、サーバー側でページをレンダリングするテクノロジーであり、ユーザー エクスペリエンスと検索エンジン最適化 (SEO) を向上させるためにユーザーが要求したときに、完全にレンダリングされたページを迅速に提供できます。
Angular またはその他のシングル ページ アプリケーション (SPA) の場合、ページをレンダリングするためにクライアント側で多くの JavaScript が実行されます。これは、ユーザーが最初にページをリクエストしたときに、ブラウザーがページのレンダリングを開始する前に、大量の JavaScript をダウンロードする必要があることを意味します。これにより、完全にレンダリングされたページが表示されるまでユーザーはしばらく待つことになり、ユーザー エクスペリエンスに悪影響を及ぼす可能性があります。さらに、多くの検索エンジン クローラーは、ページのインデックス作成時に JavaScript を完全に実行できない場合があり、その結果、ページの SEO ランキングが低下する可能性があります。
プリレンダリングはこれらの問題を解決できます。サーバー側でプリレンダリングを行うと、ユーザーがページをリクエストするまでに、完全にレンダリングされた HTML がすでに生成されています。つまり、ユーザーはクライアント側で JavaScript が実行されるのを待たずに、完全にレンダリングされたページをすぐに見ることができます。さらに、事前にレンダリングされたページは、JavaScript を実行せずにレンダリングされた HTML を直接読み取ることができるため、検索エンジン クローラーにとってよりフレンドリーです。
Angular Universal を例に挙げると、これはサーバー側での事前レンダリングに使用される Angular の重要な部分です。基本的な Angular Universal のプリレンダリングの例を次に示します。
まず、Angular Universal の依存関係をインストールする必要があります。
ng add @nguniversal/express-engine
これにより、必要なサーバーサイド レンダリング (SSR) サポートが Angular プロジェクトに追加されます。
次に、Angular サービスで、renderModuleFactoryこの関数を使用してアプリケーションを事前レンダリングできます。この関数は、Angular モジュール ファクトリといくつかのオプションをパラメータとして受け取り、レンダリングされた HTML 文字列を返します。
import {
renderModuleFactory } from '@angular/platform-server';
import {
AppServerModuleNgFactory } from './app/app.server.module.ngfactory';
const html = await renderModuleFactory(AppServerModuleNgFactory, {
document: '<app-root></app-root>',
url: '/'
});
この場合、AppServerModuleNgFactoryそれはアプリケーションのサーバー側バージョンであり、document事前レンダリングしたい HTML テンプレートであり、urlレンダリングしたいルートです。
サーバーがユーザーのリクエストを受信すると、上記のコードを実行して事前レンダリングされた HTML を生成し、この HTML をユーザーに送信します。ユーザーのブラウザはこの HTML をすぐに表示し、JavaScript をダウンロードしてバックグラウンドで実行できるため、ユーザーはページを操作できます。
結論は
サーバーサイドのプリレンダリングは、Angular アプリケーションのパフォーマンスと SEO を大幅に向上させる強力な技術です。初期レンダリングをサーバー側に移動することで、読み込み時間の短縮、ユーザー エクスペリエンスの向上、および検索エンジンのランキングの向上を実現できます。サーバー側のプリレンダリングの設定には追加の作業が必要になる場合がありますが、特に大量のコンテンツや重要な SEO を処理する必要がある Web アプリケーションの場合、大きな利益をもたらす可能性があります。
この記事で、Angular サーバー側のプリレンダリングについて詳しく理解し、その実装方法を例を示して説明できれば幸いです。ブログ サイトを構築している場合でも、複雑なエンタープライズ アプリケーションを構築している場合でも、サーバー側のプリレンダリングは検討する価値のあるオプションであり、ユーザー エクスペリエンスとアプリケーションのパフォーマンスを大幅に向上させることができます。Angular を使用して Web アプリケーションを構築する場合は、アプリケーションを最適化するためにサーバー側のプリレンダリングを検討することをお勧めします。