동형 JavaScript 마스터하기: 웹 앱의 성능 및 SEO 향상

동형 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}"></app>);

res.send(`
  
    
      <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></app>);

res.send(`
  
    
      <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...</suspense>
</div>}>
        <heavycomponent></heavycomponent>