Tìm hiểu Microfrontend: Hướng dẫn triển khai Microfrontend trong Next.js

Viết bởi Hướng nội
Dec 24, 2024

Microfrontend là mô hình thiết kế chia ứng dụng web lớn thành nhiều ứng dụng nhỏ, độc lập với nhau đảm nhận một tính năng hoặc chức năng cụ thể

6 min reads

Tìm hiểu Microfrontend: Hướng dẫn triển khai Microfrontend trong Next.js

Trong lĩnh vực phát triển web, nhu cầu tìm kiếm các giải pháp linh hoạt, dễ mở rộng và dễ bảo trì đã thúc đẩy sự ra đời của những mô hình kiến trúc mới mẻ. Trong đó, kiến trúc micro frontend là một phương pháp đột phá trong việc thiết kế và xây dựng ứng dụng giao diện người dùng (frontend).

Trước đây, các ứng dụng frontend thường được xây dựng dưới dạng nguyên khối (monolithic), các tính năng được gắn chặt trong một mã nguồn duy nhất. Dù cách này hoạt động hiệu quả, nhưng nó gây khó khăn trong việc mở rộng, phối hợp nhóm và triển khai nhanh.

Kiến trúc micro frontend ra đời để giải quyết vấn đề này bằng cách chia nhỏ ứng dụng thành các phần độc lập, tương tự như việc lắp ghép một bức tranh từ nhiều mảnh ghép. Sự phân tách rõ ràng và độc lập giữa các phần của kiến trúc này là cho phép từng phần được phát triển, kiểm thử, triển khai và mở rộng một cách riêng lẻ, không phụ thuộc vào toàn bộ hệ thống.

1. Microfrontend là gì?

Kiến trúc Microfrontend là một mô hình thiết kế chia ứng dụng web lớn thành nhiều ứng dụng nhỏ hơn, độc lập với nhau. Mỗi ứng dụng nhỏ này (microfrontend) đảm nhận một tính năng hoặc chức năng cụ thể của hệ thống.

Nhờ đó, các microfrontend có thể được phát triển và triển khai một cách riêng biệt, giúp các nhóm làm việc trên từng phần của ứng dụng mà không gây ảnh hưởng lẫn nhau.

Kiến trúc microfrontend mang lại nhiều lợi ích rõ ràng cho cả đội ngũ phát triển và người dùng:

Đầu tiên, nó cho phép các nhóm developer làm việc song song trên các phần khác nhau của ứng dụng, từ đó tăng hiệu suất và rút ngắn thời gian phát triển.
Thứ hai, từng microfrontend có thể được triển khai riêng lẻ, giúp việc bảo trì và cập nhật trở nên dễ dàng hơn. Nhờ đó, các version sửa lỗi hay thêm tính năng mới có thể được cập nhật mà không làm ảnh hưởng đến toàn bộ ứng dụng.
Cuối cùng, kiến trúc này giúp cải thiện trải nghiệm người dùng bằng cách giảm thời gian tải ban đầu và tạo nên một hệ thống ứng dụng linh hoạt, dễ dàng mở rộng. Thay vì tải toàn bộ ứng dụng cùng lúc, chỉ những phần cần thiết cho người dùng được tải ngay từ đầu.

2. Cách triển khai Microfrontend trong Next.js

Một cách hiệu quả để triển khai microfrontend trong Next.js là sử dụng dynamic imports. Tính năng này cho phép tải các phần khác nhau của ứng dụng dựa trên nhu cầu của người dùng.

Nhờ đó, mỗi microfrontend có thể được tải riêng lẻ, giúp giảm thời gian tải ban đầu cho toàn bộ ứng dụng. Ngoài ra, Next.js còn hỗ trợ render phía server (server-side rendering), giúp cải thiện hiệu suất và mang đến trải nghiệm tốt hơn cho người dùng.

Trong kiến trúc microfrontend, mỗi phần nên được tách biệt rõ ràng, bao gồm các folders riêng, dependencies riêng, và config riêng. Điều này giúp từng microfrontend có thể được phát triển và triển khai cách độc lập, tránh xung đột với các phần khác trong ứng dụng.

Next.js hỗ trợ rất tốt việc phân tách này bằng cách cho phép bạn tổ chức từng microfrontend thành các trang (pages), thành phần (components), và kiểu (styles) riêng biệt.

3. Hướng dẫn triển khai Microfrontend trong Next.js

Trong hướng dẫn này, chúng ta sẽ xây dựng một trang mạng xã hội với kiến trúc Microfrontend sử dụng Next.js. Mỗi microfrontend sẽ đảm nhận một phần chức năng cụ thể (như: profile, post, chat), được phát triển và quản lý độc lập.

Cấu trúc thư mục sẽ được tổ chức theo cách tách biệt từng microfrontend, bao gồm pages, components, và styles riêng biệt. Host Application sẽ tích hợp các microfrontend lại thành một ứng dụng duy nhất.

social-network/
│
├── host-app/                     # Ứng dụng chính (Host Application)
│   ├── pages/
│   │   ├── _app.js               # File khởi tạo chung
│   │   ├── index.js              # Trang chính (Home Page)
│   │   ├── api/
│   │   │   └── event-bus.js      # event-bus để truyền dữ liệu hoặc giao tiếp giữa các Micro Frontend.
│   │   └── styles/
│   │       └── global.css        # CSS chung cho toàn bộ ứng dụng
│   ├── components/
│   │   ├── Navbar.js             # Thanh điều hướng
│   │   ├── Footer.js             # Phần chân trang
│   │   └── Layout.js             # Bố cục trang chính
│   └── package.json              # Dependencies
│
├── microfrontends/               # Các Microfrontend
│   ├── profile/                  # Microfrontend: Hồ sơ cá nhân
│   │   ├── pages/
│   │   │   └── index.js          # Trang chính hồ sơ
│   │   ├── components/
│   │   │   └── ProfileCard.js    # Thành phần hiển thị thông tin người dùng
│   │   └── styles/
│   │       └── profile.css       # CSS riêng của Profile
│   │   └── package.json          # Dependencies
│   │
│   ├── posts/                    # Microfrontend: Bài viết
│   │   ├── pages/
│   │   │   └── index.js          # Trang danh sách bài viết
│   │   ├── components/
│   │   │   └── PostCard.js       # Thành phần hiển thị bài viết
│   │   └── styles/
│   │       └── posts.css         # CSS riêng của Posts
│   │   └── package.json          # Dependencies
│   │
│   └── chat/                     # Microfrontend: Trò chuyện
│       ├── pages/
│       │   └── index.js          # Giao diện chính của Chat
│       ├── components/
│       │   └── ChatWidget.js     # Thành phần hiển thị khung chat
│       └── styles/
│           └── chat.css          # CSS riêng của Chat
│       └── package.json          # Dependencies
│
└── README.md                     # Tài liệu hướng dẫn

Trang chính pages/index.js tích hợp các microfrontend bằng dynamic imports.

import dynamic from 'next/dynamic';
import Navbar from '../components/Navbar';
import Footer from '../components/Footer';

// Import động các Microfrontend
const Profile = dynamic(() => import('../microfrontends/profile/pages/index'));
const Posts = dynamic(() => import('../microfrontends/posts/pages/index'));
const Chat = dynamic(() => import('../microfrontends/chat/pages/index'));

export default function Home() {
  return (
    <div>
      <Navbar />
      <main>
        <h1>Welcome to Social Network - 200Lab Demo</h1>
        <Profile />
        <Posts />
        <Chat />
      </main>
      <Footer />
    </div>
  );
}

File pages/_app.js đảm bảo các microfrontend có thể dùng chung bố cục (layout) và CSS toàn cục.

import '../styles/global.css';

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

Tạo một microfrontend cho profile:

Trang hồ sơ người dùng microfrontends/profile/pages/index.js

export default function ProfileCard({ userId }) {
  return (
    <div className="profile-card">
      <h3>User ID: {userId}</h3>
      <p>Details about the user...</p>
    </div>
  );
}

CSS riêng của profile

.profile-card {
  border: 1px solid #ccc;
  padding: 16px;
  border-radius: 8px;
  background-color: #f9f9f9;
}

Giao tiếp giữa các Microfrontend: sử dụng Event Bus để truyền dữ liệu hoặc giao tiếp giữa các Microfrontends.

Tạo event bus: host-app/pages/api/event-bus.js

const listeners = {};

export const emit = (event, data) => {
  if (listeners[event]) {
    listeners[event].forEach((callback) => callback(data));
  }
};

export const on = (event, callback) => {
  if (!listeners[event]) listeners[event] = [];
  listeners[event].push(callback);
};

Cách sử dụng eventbus:

import { emit } from '../../host-app/pages/api/event-bus';

const handleUpdate = () => {
  emit('userUpdated', { name: 'John Doe', age: 30 });
};

4. Kết luận

Bằng cách chia nhỏ một ứng dụng nguyên khối (monolithic) thành các microfrontend nhỏ và độc lập, các đội ngũ phát triển ứng dụng có thể làm việc hiệu quả hơn và tạo ra những ứng dụng chất lượng cao. Next.js mang đến các tính năng như dynamic imports và server-side rendering, giúp việc triển khai kiến trúc microfrontend trở nên dễ dàng hơn.

Các bài viết liên quan: