Agent Skills by ALSEL
Anthropic Claudeソフトウェア開発⭐ リポ 0品質スコア 50/100

server-side-rendering

Reactアプリケーションにおけるサーバーサイドレンダリング（SSR）の実装方法を解説します。初期ページの表示速度を向上させたい場合、SEO対策が必要な場合、またはリクエストごとに動的なHTMLを生成したい場合に活用してください。

description の原文を見る

Teaches server-side rendering (SSR) for React applications. Use when you need faster initial page loads, better SEO, or dynamic per-request HTML generation.

SKILL.md 本文

サーバーサイドレンダリング

目次

サーバーサイドレンダリング（SSR）は、Webコンテンツをレンダリングするための最も古い方法の1つです。SSRはユーザーリクエストに応じてページコンテンツの完全なHTMLを生成します。コンテンツには、データストアまたは外部APIからのデータが含まれる場合があります。

connectおよびfetch操作はサーバー上で処理されます。コンテンツをフォーマットするために必要なHTMLもサーバー上で生成されます。したがって、SSRを使用することで、データフェッチングとテンプレート化のための追加のラウンドトリップを避けることができます。そのため、レンダリングコードはクライアント上では必要とされず、このためのJavaScriptをクライアントに送信する必要もありません。

いつ使うべきか

  • SEOと高速なFirst Contentful Paintがアプリケーションにとって重要な場合に使用してください
  • ユーザーと検索エンジンに迅速に表示される必要があるコンテンツの多いページに有効です

いつ使うべきではないか

  • 静的レンダリング（SSG）で十分で、リクエストごとのサーバーコストを回避できる純粋に静的なコンテンツの場合
  • SEOが関係なく、CSRがよりシンプルなアーキテクチャを提供する内部ダッシュボードまたはツールの場合
  • リクエストごとのサーバーレンダリングのオーバーヘッドが高すぎて、キャッシングが実現不可能な場合

手順

  • Next.jsなどの組み込みSSRサポートを提供するフレームワークを使用してください
  • Suspenseサポート付きのストリーミングSSRの場合、renderToPipeableStream（React 18+）へのアップグレードを検討してください
  • クライアントサイドハイドレーションとSSRを組み合わせてインタラクティブなページを実装してください
  • TTFBへの影響に注意してください。サーバーレスポンスタイムを最適化し、キャッシングを検討してください
  • クライアントサイドのJavaScriptを削減するための補完としてReact Server Componentsを探索してください

詳細

SSRでは、すべてのリクエストは独立して扱われ、サーバーによって新しいリクエストとして処理されます。連続した2つのリクエストの出力がそれほど異なっていなくても、サーバーはそれを最初から処理して生成します。サーバーは複数のユーザーに共有されるため、処理能力はある時点でのすべてのアクティブなユーザーによって共有されます。

クラシックSSR実装

クラシックSSRとJavaScriptを使用してページ上の現在時刻を表示および更新する簡単な例を考えてみましょう。

<!DOCTYPE html>
<html>
   <head>
       <title>Time</title>
   </head>
   <body>
       <div>
       <h1>Hello, world!</h1>
       <b>It is <div id=currentTime></div></b>
       </div>
   </body>
</html>

function tick() {
    var d = new Date();
    var n = d.toLocaleTimeString();
    document.getElementById("currentTime").innerHTML = n;
}
setInterval(tick, 1000);

これがCSRコード（同じ出力を提供する）とどのように異なるかに注意してください。また、HTMLはサーバーによってレンダリングされますが、ここに表示されている時刻はJavaScript関数tick()によって生成されるクライアント上のローカル時刻であることに注意してください。サーバータイムなどのサーバー固有の他のデータを表示したい場合、レンダリングされる前にHTMLに埋め込む必要があります。これは、サーバーへのラウンドトリップなしに自動的に更新されないことを意味します。

メリットとデメリット

レンダリングコードをサーバー上で実行し、JavaScriptを削減することで、以下のメリットがあります。

JavaScriptが少ないとFCPとTTIが早くなる

ページ上に複数のUI要素とアプリケーションロジックがある場合、SSRはCSRと比較して大幅にJavaScriptが少なくなります。したがって、スクリプトのロードと処理に必要な時間は短縮されます。FP、FCPおよびTTIはより短くなり、FCP = TTIになります。SSRを使用すると、ユーザーはすべての画面要素が表示されて対話的になるまで待つ必要がありません。

クライアントサイドのJavaScript予算を追加できる

開発チームは、目的のパフォーマンスを達成するためにページ上のJS量を制限するJS予算で作業する必要があります。SSRを使用する場合、ページをレンダリングするために必要なJSを直接削除するため、アプリケーションに必要な可能性のあるサードパーティJSのための追加スペースが作成されます。

SEO対応

検索エンジンのクローラーはSSRアプリケーションのコンテンツを簡単にクロールできるため、ページの検索エンジン最適化がより高いレベルで実現されます。

SSRは上記のメリットのため静的コンテンツに最適です。ただし、これがすべてのシナリオに完璧ではない理由となるいくつかのデメリットがあります。

TTFBが遅い

すべての処理がサーバー上で実行されるため、以下の1つ以上の状況がある場合、サーバーからのレスポンスが遅延する可能性があります：

  • サーバーに過度な負荷をかける複数の同時ユーザー。
  • 遅いネットワーク
  • サーバーコードが最適化されていない。

いくつかのインタラクションで完全なページリロードが必要

すべてのコードはクライアント上で利用できないため、すべてのキーオペレーション用にサーバーへの頻繁なラウンドトリップが必要であり、完全なページリロードが発生します。これにより、ユーザーがオペレーション間でより長く待つ必要があるため、インタラクション間の時間が増加する可能性があります。したがって、シングルページアプリケーションはSSRでは不可能です。

Next.jsでのSSR

Next.jsフレームワークもSSRをサポートしています。これはすべてのリクエストでサーバー上のページを事前レンダリングします。これは、ページからgetServerSideProps()と呼ばれる非同期関数をエクスポートすることで達成できます。

export async function getServerSideProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  };
}

contextオブジェクトには、HTTPリクエストおよびレスポンスオブジェクト、ルーティングパラメータ、クエリ文字列、ロケールなどのキーが含まれます。

次の実装は、getServerSideProps()を使用してReactでフォーマットされたページ上のデータをレンダリングする例を示しています：

// data fetched from an external data source using `getServerSideProps`

const Users = ({ users, error }) => {
 return (
   <section>
     <header>
       <h1>List of users</h1>
     </header>
     {error && <div>There was an error.</div>}
     {!error && users && (
       <table>
         <thead>
           <tr>
             <th>Username</th>
             <th>Email</th>
             <th>Name</th>
           </tr>
         </thead>
         <tbody>
           {users.map((user, key) => (
             <tr key={key}>
               <td>{user.username}</td>
               <td>{user.email}</td>
               <td>{user.name}</td>
             </tr>
           ))}
         </tbody>
       </table>
     )}
   </section>
 );
};

export async function getServerSideProps() {
 try {
   // Fetch data from external API
   const res = await fetch("https://jsonplaceholder.typicode.com/users");
   const data = await res.json();

   // Pass data to the page via props
   return { props: { users: data, error: null } };
 } catch (error) {
   return { props: { users: null, error: true } };
 }
}

export default Users;

サーバー用React

Reactはアイソモーフィック的にレンダリングでき、ブラウザおよびサーバーなどの他のプラットフォーム上で機能することを意味します。したがって、UI要素はReactを使用してサーバー上でレンダリングされる場合があります。

Reactは、複数の環境で同じコードを実行できるユニバーサルコードと共に使用することもできます。これはサーバー上でNode.jsを使用することで可能になります。

ReactDOMServer.renderToString(element);

この関数はReact要素に対応するHTMLエスト文字列を返します。その後、HTMLはクライアントにレンダリングされて、ページの読み込みを高速化します。

renderToString()関数はhydrateRoot()で使用できます。これはサーバーでレンダリングされたHTMLを保持し、クライアント上にイベントハンドラーをアタッチします。

これを実装するには、すべてのページに対応するクライアントとサーバーの両方の.jsファイルを使用します。サーバー上の.jsファイルはHTMLコンテンツをレンダリングし、クライアント上の.jsファイルはそれをハイドレートします。

サーバーコード：

app.get("/", (req, res) => {
  const app = ReactDOMServer.renderToString(<App />);
});

要素Appがハイドレートされることを保証するためのクライアントサイドコード：

import { hydrateRoot } from "react-dom/client";

hydrateRoot(document.getElementById("root"), <App />);

Reactを使用したSSRの完全な例はこちらで見つけることができます。

参照

ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ

詳細情報

作者
patternsdev
リポジトリ
patternsdev/skills
ライセンス
MIT
最終更新
不明
GitHubで原本を見る →フィードバックを送る

Source: https://github.com/patternsdev/skills / ライセンス: MIT

関連スキル

汎用ソフトウェア開発⭐ リポ 39,967

doubt-driven-development

重要な判断はすべて、本番環境への展開前に新しい視点から対抗的レビューを実施します。速度より正確性が重要な場合、不慣れなコードを扱う場合、本番環境・セキュリティに関わるロジック・取り消し不可の操作など影響度が高い場合、または後でバグを修正するよりも今検証する方が効率的な場合に活用してください。

by addyosmani
汎用ソフトウェア開発⭐ リポ 1,175

apprun-skills

TypeScriptを使用したAppRunアプリケーションのMVU設計に関する総合的なガイダンスが得られます。コンポーネントパターン、イベントハンドリング、状態管理（非同期ジェネレータを含む）、パラメータと保護機能を備えたルーティング・ナビゲーション、vistestを使用したテストに対応しています。AppRunコンポーネントの設計・レビュー、ルートの配線、状態フローの管理、AppRunテストの作成時に活用してください。

by yysun
OpenAIソフトウェア開発⭐ リポ 797

desloppify

コードベースのヘルスチェックと技術負債の追跡ツールです。コード品質、技術負債、デッドコード、大規模ファイル、ゴッドクラス、重複関数、コードスメル、命名規則の問題、インポートサイクル、結合度の問題についてユーザーが質問した場合に使用してください。また、ヘルススコアの確認、次の改善項目の提案、クリーンアップ計画の作成をリクエストされた際にも対応します。29言語に対応しています。

by Git-on-my-level
汎用ソフトウェア開発⭐ リポ 39,967

debugging-and-error-recovery

テストが失敗したり、ビルドが壊れたり、動作が期待と異なったり、予期しないエラーが発生したりした場合に、体系的な根本原因デバッグをガイドします。推測ではなく、根本原因を見つけて修正するための体系的なアプローチが必要な場合に使用してください。

by addyosmani
汎用ソフトウェア開発⭐ リポ 39,967

test-driven-development

テスト駆動開発により実装を進めます。ロジックの実装、バグの修正、動作の変更など、あらゆる場面で活用できます。コードが正常に動作することを証明する必要がある場合、バグ報告を受けた場合、既存機能を修正する予定がある場合に使用してください。

by addyosmani
汎用ソフトウェア開発⭐ リポ 39,967

incremental-implementation

変更を段階的に実施します。複数のファイルに影響する機能や変更を実装する場合に使用してください。大量のコードを一度に書こうとしている場合や、タスクが一度では完結できないほど大きい場合に活用します。

by addyosmani
本サイトは GitHub 上で公開されているオープンソースの SKILL.md ファイルをクロール・インデックス化したものです。 各スキルの著作権は原作者に帰属します。掲載に問題がある場合は info@alsel.co.jp または /takedown フォームよりご連絡ください。
原作者: patternsdev · patternsdev/skills · ライセンス: MIT