JavaScript フレームワークを使用したサーバーサイド レンダリング (SSR)

今日のペースの速い Web 開発環境では、検索エンジンに適した高パフォーマンスの Web サイトを提供することが重要です。これを実現する効果的な方法の 1 つは、サーバー側レンダリング (SSR) を使用することです。この記事では、JavaScript フレームワークを使用して SSR を実装する方法を検討し、プロジェクトで SSR の可能性を最大限に発揮するのに役立つコード例、説明、出力を提供します。

サーバーサイドレンダリングについて理解する

サーバー側レンダリングには、サーバー上で HTML コンテンツを生成し、それをクライアントに送信し、そこですぐに表示されます。このアプローチは、ブラウザーがサーバーから最小限の HTML を取得し、JavaScript を使用してクライアント側でコンテンツをレンダリングするクライアント側レンダリング (CSR) とは対照的です。

サーバーサイドレンダリングの利点

• パフォーマンスの向上 − SSR は、サーバーが事前にレンダリングされた HTML をクライアントに送信するため、最初の意味のある描画までの時間を最小限に抑えます。これにより、ページの読み込み時間が短縮され、ユーザー エクスペリエンスが向上します。

• SEO 最適化 − 検索エンジンは、サーバーでレンダリングされたページを簡単にクロールしてインデックスを作成できるため、検索エンジンのランキングが向上し、見つけやすさが向上します。

• ソーシャル メディア共有 − サーバーでレンダリングされたページは、ソーシャル メディア プラットフォームに豊富なコンテンツを提供し、共有リンクに正確なプレビューが表示され、効果的にユーザーを惹きつけることができます。

JavaScript フレームワークを使用してサーバー側レンダリングを実装する

人気のある JavaScript フレームワークを使用した SSR の実際的な実装を見てみましょう。

React.js と Next.js

Create React App を使用して、新しい React プロジェクトを作成します。ターミナルを開いて次のコマンドを実行します -

リーリー

これにより、基本的な React プロジェクト構造を含む my-ssr-app という新しいディレクトリが作成されます。

プロジェクト ディレクトリに切り替えます -

リーリー

Next.js を依存関係としてインストールします -

リーリー

例

src/index.js ファイルの内容を次のコードに置き換えます-

リーリー

プロジェクトの src ディレクトリに、pages という名前の新しいディレクトリを作成します−

リーリー

src/index.js ファイルを src/pages ディレクトリに移動します−

リーリー

package.json ファイルを開き、既存の「scripts」セクションを次のコードに置き換えます -

リーリー

変更を保存し、ターミナルで次のコマンドを実行して開発サーバーを起動します -

リーリー

ブラウザを開いて、http://localhost:3000 に移動します。

＃＃＃出力＃＃＃

Vue.js と Nuxt.js

React と同様に、Vue.js も Nuxt.js と呼ばれる強力な SSR フレームワークを提供します。

ターミナルを開いて次のコマンドを実行して、新しい Nuxt.js プロジェクトを作成します -

リーリー

これにより、基本的な Nuxt.js プロジェクト構造を含む my-ssr-app という新しいディレクトリが作成されます。

プロジェクト ディレクトリに切り替えます

−

リーリー

例

pages/index.vue ファイルを開き、既存のコンテンツを次のコードで置き換えます

−

リーリー 変更を保存すると、開発サーバーは更新されたコンテンツを自動的に再読み込みします。

次のコマンドを実行して開発サーバーを起動します

−

リーリー ブラウザを更新して、http://localhost:3000 にアクセスします。

＃＃＃出力＃＃＃

Angular と Angular Universal

Angular は、サーバー側のレンダリングに Angular Universal を提供する包括的な JavaScript フレームワークです。

まず、npm を使用して Angular Universal をインストールします

−

リーリー

例

次に、新しいファイル src/app/home.component.ts を作成し、次のコードを追加します -

import { Component } from '@angular/core';

@Component({
   selector: 'app-home',
   template: `
      <div>
         <h1>Welcome to SSR with Angular and Angular Universal!</h1>
      </div>
  `,
})
export class HomeComponent {}

使用以下代码更新 src/app/app.module.ts 文件 −

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HomeComponent } from './home.component';

@NgModule({
   imports: [BrowserModule],
   declarations: [AppComponent, HomeComponent],
   bootstrap: [AppComponent],
})
export class AppModule {}

最后，运行以下命令启动开发服务器−

npm run dev:ssr

在浏览器中导航到 http://localhost:4000，您将看到服务器渲染的输出。

输出

结论

服务器端渲染在性能、SEO 和社交媒体共享方面提供了显着的优势。 React.js 与 Next.js、Vue.js 与 Nuxt.js 以及 Angular 与 Angular Universal 等 JavaScript 框架提供了强大的 SSR 解决方案。

通过利用 SSR 的强大功能，开发人员可以增强用户体验、提高搜索引擎可见性并提供高度优化的网站。通过本文中提供的代码示例和说明，您现在已经为在项目中使用 JavaScript 框架实现 SSR 奠定了坚实的基础。立即开始探索 SSR 并释放 Web 应用程序的全部潜力。

以上がJavaScript フレームワークを使用したサーバーサイド レンダリング (SSR)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。