동형 JavaScript 마스터하기: 웹 앱의 성능 및 SEO 향상-JS 튜토리얼-php.cn

Mastering Isomorphic JavaScript: Boost Performance and SEO in Web Apps

동형 JavaScript는 웹 개발의 판도를 바꾸는 요소가 되었습니다. 이를 통해 서버와 클라이언트 모두에서 원활하게 작동하는 앱을 구축할 수 있습니다. 이 접근 방식은 성능, 사용자 경험 및 SEO에 큰 이점을 제공합니다. 동형 앱을 한 단계 더 발전시킬 수 있는 몇 가지 고급 기술을 살펴보겠습니다.

먼저 환경 간 코드 공유에 대해 이야기해 보겠습니다. 동형 JavaScript의 주요 장점 중 하나는 서버와 클라이언트 전체에서 로직을 재사용할 수 있다는 것입니다. 이렇게 하면 시간이 절약될 뿐만 아니라 앱 작동 방식의 일관성도 보장됩니다.

이를 달성하는 가장 좋은 방법은 모듈식 아키텍처를 사용하는 것입니다. 비즈니스 로직, 데이터 가져오기 및 유틸리티 기능에 대해 별도의 모듈을 만들 수 있습니다. 그런 다음 이러한 모듈을 가져와서 서버측 코드와 클라이언트측 코드 모두에서 사용할 수 있습니다.

다음은 공유 유틸리티 모듈의 간단한 예입니다.

// 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 구성 요소 모두에서 이러한 기능을 사용할 수 있습니다.

상태 관리는 동형 앱의 또 다른 중요한 측면입니다. 서버에 렌더링된 초기 상태가 클라이언트가 기대하는 것과 일치하는지 확인해야 합니다. 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를 사용하지 않도록 주의해야 하며, 그 반대의 경우도 마찬가지입니다. 한 가지 접근 방식은 기능 감지를 사용하고 대체 기능을 제공하는 것입니다.

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가 초기 렌더링을 차단하지 않도록 하며, 검색 엔진에 적절한 메타데이터를 제공해야 합니다.

성능을 향상시키는 한 가지 기술은 스트리밍 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-helmet과 같은 라이브러리를 사용하여 React 구성 요소에서 이러한 태그를 관리할 수 있습니다.

// 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 친화적이며 사용자 친화적인 웹 애플리케이션을 만들 수 있는 가능성의 세계를 열어줍니다. 공유 코드, 하이드레이션을 통한 서버 측 렌더링, 코드 분할, 환경별 API의 신중한 처리 등의 기술을 활용하여 모든 기기와 플랫폼에서 뛰어난 경험을 제공하는 앱을 구축할 수 있습니다.

성공적인 동형 개발의 핵심은 항상 서버와 클라이언트 환경을 모두 고려하는 것임을 기억하세요. 우리가 작성하는 모든 코드는 두 컨텍스트 모두에서 작동(또는 우아하게 저하)되어야 합니다. 이러한 사고방식의 변화는 처음에는 어려울 수 있지만 이를 통해 더욱 강력하고 성능이 뛰어난 애플리케이션이 탄생합니다.

웹에서 가능한 것의 경계를 계속 확장함에 따라 동형 JavaScript가 점점 더 중요한 역할을 하게 될 것입니다. 이러한 고급 기술을 숙달함으로써 우리는 모든 장치와 네트워크 조건에서 빠르고 액세스 가능하며 원활한 경험을 제공하는 차세대 웹 애플리케이션을 구축할 수 있도록 준비하고 있습니다.

동형 JavaScript의 세계는 끊임없이 새로운 도구와 기술이 등장하면서 끊임없이 진화하고 있습니다. 호기심을 갖고, 계속 실험하고, 가능한 것의 경계를 넓히는 것을 두려워하지 마십시오. 웹 개발의 미래는 동형이며, 지금은 이 혁명의 일부가 될 수 있는 흥미로운 시기입니다.