ホームページ > 記事 > ウェブフロントエンド > 同型 JavaScript をマスターする: Web アプリのパフォーマンスと SEO を向上させる
同型 JavaScript をマスターする: Web アプリのパフォーマンスと SEO を向上させる
- Barbara Streisandオリジナル
- 2024-11-18 09:02:02325ブラウズ
同型 JavaScript は Web 開発における変革をもたらしました。これにより、サーバーとクライアントの両方でシームレスに動作するアプリを構築できます。このアプローチは、パフォーマンス、ユーザー エクスペリエンス、SEO において大きなメリットをもたらします。同型アプリを次のレベルに引き上げるための高度なテクニックをいくつか見てみましょう。
まず、環境間でのコードの共有について話しましょう。同型 JavaScript の主な利点の 1 つは、サーバーとクライアント間でロジックを再利用できることです。これにより、時間が節約されるだけでなく、アプリの動作の一貫性が保証されます。
これを達成するための優れた方法は、モジュール式アーキテクチャを使用することです。ビジネス ロジック、データ取得、ユーティリティ関数用に個別のモジュールを作成できます。これらのモジュールをインポートして、サーバー側とクライアント側のコードの両方で使用できます。
共有ユーティリティ モジュールの簡単な例を次に示します。
// utils.js
export function formatDate(date) {
return new Date(date).toLocaleDateString();
}
export function capitalizeString(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
これらの関数をサーバー側の Node.js コードとクライアント側の React コンポーネントの両方で使用できるようになりました。
状態管理は、同形アプリのもう 1 つの重要な側面です。サーバー上でレンダリングされる初期状態がクライアントが期待するものと一致することを確認する必要があります。ここで Redux のようなライブラリが役に立ちます。
Redux を使用すると、サーバー上にストアを作成し、それを使用して初期 HTML をレンダリングし、状態をクライアントに渡すことができます。その後、クライアントはこの初期状態で独自のストアをハイドレートし、スムーズな移行を保証できます。
これがどのように見えるかの基本的な例を次に示します。
// server.js
import { createStore } from 'redux';
import reducer from './reducer';
const store = createStore(reducer);
const initialState = store.getState();
const html = renderToString(<App store={store} />);
res.send(`
<html>
<body>
<div>
<p>Routing is another area where isomorphic JavaScript shines. By using a library like React Router, we can define our routes once and use them on both the server and client. This ensures that our URLs work correctly regardless of where the page is rendered.</p>
<p>Server-side rendering (SSR) with hydration is a powerful technique in isomorphic apps. It involves rendering the initial HTML on the server, sending it to the client, and then "hydrating" the page with JavaScript to make it interactive.</p>
<p>This approach gives us the best of both worlds: fast initial page loads and fully interactive apps. Here's a basic example using React and ReactDOMServer:<br>
</p>
<pre class="brush:php;toolbar:false">// server.js
import ReactDOMServer from 'react-dom/server';
import App from './App';
const html = ReactDOMServer.renderToString(<App />);
res.send(`
<html>
<body>
<div>
<p>Code splitting and lazy loading are techniques that can significantly improve the performance of our isomorphic apps. By splitting our code into smaller chunks and loading them only when needed, we can reduce the initial load time of our app.</p>
<p>For example, we can use dynamic imports in React to lazy load components:<br>
</p>
<pre class="brush:php;toolbar:false">import React, { Suspense, lazy } from 'react';
const HeavyComponent = lazy(() => import('./HeavyComponent'));
function App() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<HeavyComponent />
</Suspense>
</div>
);
}
このコードは、HeavyComponent が実際にレンダリングされるときにのみロードし、初期バンドル サイズを削減します。
同型アプリでブラウザ固有の API を処理するのは難しい場合があります。サーバー上でブラウザ専用 API を使用しないように、またその逆に注意する必要があります。 1 つのアプローチは、機能検出を使用してフォールバックを提供することです。
const storage = typeof localStorage !== 'undefined' ? localStorage : {
getItem: () => null,
setItem: () => {},
};
export function saveData(key, value) {
storage.setItem(key, JSON.stringify(value));
}
export function loadData(key) {
const item = storage.getItem(key);
return item ? JSON.parse(item) : null;
}
このコードは、(ブラウザーで) 利用可能な場合は localStorage を使用し、サーバー上のダミー オブジェクトにフォールバックします。
サーバーのみの操作の場合、環境チェックを使用できます。
if (typeof window === 'undefined') {
// Server-only code here
}
高性能で SEO に配慮した同形アプリを構築するには、さまざまな要素を慎重に検討する必要があります。サーバー側のレンダリングを最適化して速度を高め、クライアント側の JavaScript が初期レンダリングをブロックしないようにし、検索エンジンに適切なメタデータを提供する必要があります。
パフォーマンスを向上させる手法の 1 つは、ストリーミング SSR を使用することです。これにより、ページ全体の準備が整う前に HTML の一部のクライアントへの送信を開始できるため、体感的な読み込み時間が短縮されます。 React 18 の新しいストリーミング API を使用した基本的な例を次に示します。
// utils.js
export function formatDate(date) {
return new Date(date).toLocaleDateString();
}
export function capitalizeString(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
SEO の場合、サーバーでレンダリングされた HTML に必要なメタデータがすべて含まれていることを確認する必要があります。これには、タイトル タグ、メタ ディスクリプション、構造化データが含まれます。 React コンポーネントでこれらのタグを管理するには、react-helmet のようなライブラリを使用できます。
// server.js
import { createStore } from 'redux';
import reducer from './reducer';
const store = createStore(reducer);
const initialState = store.getState();
const html = renderToString(<App store={store} />);
res.send(`
<html>
<body>
<div>
<p>Routing is another area where isomorphic JavaScript shines. By using a library like React Router, we can define our routes once and use them on both the server and client. This ensures that our URLs work correctly regardless of where the page is rendered.</p>
<p>Server-side rendering (SSR) with hydration is a powerful technique in isomorphic apps. It involves rendering the initial HTML on the server, sending it to the client, and then "hydrating" the page with JavaScript to make it interactive.</p>
<p>This approach gives us the best of both worlds: fast initial page loads and fully interactive apps. Here's a basic example using React and ReactDOMServer:<br>
</p>
<pre class="brush:php;toolbar:false">// server.js
import ReactDOMServer from 'react-dom/server';
import App from './App';
const html = ReactDOMServer.renderToString(<App />);
res.send(`
<html>
<body>
<div>
<p>Code splitting and lazy loading are techniques that can significantly improve the performance of our isomorphic apps. By splitting our code into smaller chunks and loading them only when needed, we can reduce the initial load time of our app.</p>
<p>For example, we can use dynamic imports in React to lazy load components:<br>
</p>
<pre class="brush:php;toolbar:false">import React, { Suspense, lazy } from 'react';
const HeavyComponent = lazy(() => import('./HeavyComponent'));
function App() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<HeavyComponent />
</Suspense>
</div>
);
}
同型 JavaScript は、高速で SEO に配慮した、ユーザーフレンドリーな Web アプリケーションを作成する可能性の世界を開きます。共有コード、ハイドレーションを使用したサーバー側レンダリング、コード分割、環境固有の API の慎重な処理などのテクニックを活用することで、すべてのデバイスとプラットフォームにわたって優れたエクスペリエンスを提供するアプリを構築できます。
同型開発を成功させる鍵は、常にサーバー環境とクライアント環境の両方について考えることであることを忘れないでください。私たちが作成するコードのすべての部分は、両方のコンテキストで動作する (または正常にデグレードされる) 必要があります。この考え方の転換は最初は難しいかもしれませんが、より堅牢でパフォーマンスの高いアプリケーションにつながります。
Web 上で可能なことの限界を押し広げ続けるにつれて、同型 JavaScript はますます重要な役割を果たすことになります。これらの高度な技術を習得することで、私たちは、高速でアクセス可能で、あらゆるデバイスやネットワーク条件にわたってシームレスなエクスペリエンスを提供する、次世代の Web アプリケーションを構築する準備を整えています。
同型 JavaScript の世界は常に進化しており、新しいツールやテクニックが常に登場しています。好奇心を持ち、実験を続け、可能なことの限界を押し上げることを恐れないでください。 Web 開発の未来は同形であり、この革命に参加できるのはエキサイティングな時期です。
私たちの作品
私たちの作品をぜひチェックしてください:
インベスターセントラル | スマートな暮らし | エポックとエコー | 不可解な謎 | ヒンドゥーヴァ | エリート開発者 | JS スクール
私たちは中程度です
Tech Koala Insights | エポックズ＆エコーズワールド | インベスター・セントラル・メディア | 不可解なミステリー中 | 科学とエポックミディアム | 現代ヒンドゥーヴァ
以上が同型 JavaScript をマスターする: Web アプリのパフォーマンスと SEO を向上させるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。