JavaScript フレームワークを使用したサーバーサイドレンダリング (SSR)-jsチュートリアル-php.cn

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

WBOY

リリース： 2023-08-25 11:05:02

転載

1091 人が閲覧しました

今日のペースの速い 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 に移動します。

＃＃＃出力＃＃＃

使用 JavaScript 框架的服务器端渲染 (SSR) 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

使用 JavaScript 框架的服务器端渲染 (SSR) 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 {}

ログイン後にコピー

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