Menguasai JavaScript Isomorphic: Meningkatkan Prestasi dan SEO dalam Apl Web

JavaScript Isomorfik telah menjadi pengubah permainan dalam pembangunan web. Ia membolehkan kami membina apl yang berfungsi dengan lancar pada kedua-dua pelayan dan pelanggan. Pendekatan ini membawa manfaat besar dalam prestasi, pengalaman pengguna dan SEO. Mari terokai beberapa teknik lanjutan untuk membawa apl isomorfik anda ke peringkat seterusnya.

Mula-mula, mari bercakap tentang perkongsian kod antara persekitaran. Salah satu kelebihan utama JavaScript isomorfik ialah keupayaan untuk menggunakan semula logik merentas pelayan dan klien. Ini bukan sahaja menjimatkan masa tetapi juga memastikan konsistensi dalam tingkah laku apl anda.

Cara terbaik untuk mencapai matlamat ini adalah dengan menggunakan seni bina modular. Kami boleh mencipta modul berasingan untuk logik perniagaan kami, pengambilan data dan fungsi utiliti. Modul ini kemudiannya boleh diimport dan digunakan dalam kedua-dua kod sebelah pelayan dan sebelah pelanggan.

Berikut ialah contoh mudah modul utiliti kongsi:

// utils.js
export function formatDate(date) {
  return new Date(date).toLocaleDateString();
}

export function capitalizeString(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

Kini kami boleh menggunakan fungsi ini dalam kedua-dua kod Node.js bahagian pelayan kami dan komponen React pihak pelanggan kami.

Pengurusan negeri ialah satu lagi aspek penting apl isomorfik. Kita perlu memastikan bahawa keadaan awal yang diberikan pada pelayan sepadan dengan apa yang pelanggan jangkakan. Di sinilah perpustakaan seperti Redux berguna.

Dengan Redux, kami boleh mencipta kedai pada pelayan, menggunakannya untuk memaparkan HTML awal kami, dan kemudian menyerahkan keadaan kepada pelanggan. Pelanggan kemudiannya boleh menghidratkan kedainya sendiri dengan keadaan awal ini, memastikan peralihan yang lancar.

Berikut ialah contoh asas bagaimana ini mungkin kelihatan:

// 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>