Микро-фронтенд с React и Next.js

Автор Харш Патель✏️

Работа над масштабным проектом и управление его кодовой базой может стать большой проблемой для команд. Хотя микро-фронтенды существуют уже некоторое время, они становятся все более популярными благодаря своим уникальным возможностям и удобству использования.

Микро-фронтенды особенно полезны, поскольку несколько команд могут работать над отдельными модулями одного и того же проекта, не беспокоясь о других модулях. При использовании микрофронтендов не имеет значения, сколько модулей будет добавлено к текущей системе.

В этой статье мы рассмотрим основы того, что такое микрофронтенд и как его реализовать с помощью Next.js. Мы также обсудим преимущества использования микрофронтендов в ваших приложениях.

  • Введение в микрофронтенды
  • Реализация микрофронтенда с помощью Next.js
    • Предварительные условия
    • Настройка микрофронтендов
    • Выполнение и результаты
  • Преимущества микрофронтендов
    • Развертывание и безопасность
    • Масштабируемость
    • Более быстрая разработка
    • Простота тестирования

Введение в микрофронтенды

Для начала, микро-фронтенды не следуют какой-либо определенной структуре и не имеют фиксированных границ.

Так насколько мал микрофронтенд? Этот вопрос до сих пор не решен. Суть в том, что вы должны разделить свой проект на части, чтобы не нарушить пользовательский опыт. Этот процесс может быть болезненным, потому что он, скорее всего, будет включать в себя множество пересмотров на доске.

Со временем ваш проект будет развиваться, и, возможно, вам придется пересматривать микро-фронтенд по ходу дела. .

React — это популярный технологический стек фронтендов, известный своей полезностью и возможностями. Использование микро-фронтендов с React — это вишенка на вершине! И здесь на помощь приходит Next.js.

Next.js обладает целым рядом преимуществ, включая:

  • Встроенная поддержка маршрутизаторов. Нет необходимости в дополнительном пакете
  • Встроенная поддержка CSS и TypeScript
  • Автоматически устанавливаемые маршруты на основе страниц
  • Легко создается для производства
  • Оптимизация изображений и интернационализированные SDK
  • Встроенные бессерверные функции (маршруты API)

Итак, теперь давайте посмотрим, как создать микро-фронтенд с помощью Next.js!

Реализация микро-фронтенда с помощью Next.js

Мы будем использовать объединение модулей, которое технически является функцией webpack v5. Она позволяет создавать несколько сборок одного приложения и запускать его как монолит.

Некоторые люди могут подумать, что федерация модулей — это новая функция JavaScript, но на самом деле это просто принцип архитектуры, который позволяет динамически загружать код из других сборщиков. Это отлично подходит, если вы хотите добавить новый микро-фронтенд к существующей системе; вы можете сделать это быстро, не затрагивая то, что есть сейчас.

Предварительные условия

Предполагая, что на вашей машине уже установлен Node, мы собираемся построить три микро-фронтенда Next.js. В первом микрофронтенде мы выставим компонент, а во втором — общую функцию. Затем мы будем использовать эти экспортированные элементы в нашем третьем микро-фронтенде, по сути дела делая его потребителем каждого экспортированного модуля.

Ваше приложение Next.js должно быть версии 10.2 или более поздней, чтобы поддерживать webpack 5. В противном случае вам придется использовать внешний пакет для поддержки федерации модулей. В этом руководстве я использую Next.js v12.2.0.

Настройка микрофронтендов

Сначала создайте три фронтенда в одном каталоге, выполнив приведенную команду:

 mkdir next_microfrontend
> npx create-next-app fe1
> npx create-next-app fe2
> npx create-next-app fe3
Войти в полноэкранный режим Выйти из полноэкранного режима

В первом фронтенде, или fe1, мы создадим компонент Header, который будет открываться. Мы сделаем это в файле src/component/Header.jsx:

import * as React from 'react'

const Header = () => {
  return (
    <div
      style={{
        background: 'black',
        width: '100%',
        height: '100px',
        color: 'white',
        textAlign: 'center',
        display: 'flex',
        justifyContent: 'left',
        alignItems: 'center',
        fontSize: '24px',
        paddingLeft: '15px'
      }}>
      Name
    </div>
  );
};

export default Header;
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь, чтобы все заработало, нам нужно добавить его на страницу index.js:

import styles from '../styles/Home.module.css'
import Header from '../src/component/Header'

export default function Home() {
  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <Header />
      </main>
    </div>
  )
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Если вы хотите увидеть результат, запустите npm run dev и посетите http://localhost:3000/. Он должен выглядеть следующим образом:

Теперь нам нужно обнародовать наш компонент, чтобы сделать его глобально доступным для другого микро-фронтенда. Для этого нам нужно изменить next.config.js следующим образом:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack5: true, // Need to make it true for some versions of Next JS
  distDir: 'build', // Defined build directory
  webpack: (config, options) => { // webpack configurations
    config.plugins.push(
      new options.webpack.container.ModuleFederationPlugin({
        name:"fe1",
        filename: "remoteEntry.js", // remote file name which will used later
        remoteType: "var",
        exposes: { // expose all component here.
          "./header": "./src/component/Header"
        },
        shared: [
          {
            react: {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
          {
            "react-dom": {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
        ]
      })
    )
    return config
  }
}

module.exports = nextConfig
Войти в полноэкранный режим Выйти из полноэкранного режима

Когда мы соберем fe1, вы сможете найти файл JavaScript, используемый в другом микро-фронтенде, в месте http://localhost:[PORT]/build/remoteEntry.js.

Отлично, мы создали компоненты в fe1 и в fe2! Теперь мы создадим общую функцию для экспонирования.

Давайте создадим одну функцию в fe2:

// utils/getSquareRoot.js
const squareRoot = (number) => {
  return Math.sqrt(number)
}

export default squareRoot;
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь давайте настроим next.config.js для того же самого:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  distDir: 'build',
  webpack: (config, options) => {
    config.plugins.push(
      new options.webpack.container.ModuleFederationPlugin({
        name:"fe2",
        filename: "remoteEntry_2.js",
        remoteType: "var",
        exposes: {
          "./squareRoot": "./utils/getSquareRoot"
        },
        shared: [
          {
            react: {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
          {
            "react-dom": {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
        ]
      })
    )
    return config
  }
}

module.exports = nextConfig
Вход в полноэкранный режим Выйти из полноэкранного режима

Как только мы соберем его, http://localhost:[PORT]/build/remoteEntry_2.js будет готов к использованию.

Давайте будем рассматривать fe3 как потребителя. Мы будем использовать экспортированный компонент fe1 и функцию fe2.

Сначала настроим next.config.js:

/** @type {import('next').NextConfig} */
const path = require('path');
const nextConfig = {
  reactStrictMode: true,
  distDir: 'build',
  webpack: (config, options) => {
    config.plugins.push(
      new options.webpack.container.ModuleFederationPlugin({
        name:"fe3",
        filename: 'static/consumerFile.js'
        remoteType: "var",
        remotes: {
            fe1: options.isServer ? path.resolve(../fe1/build/remoteEntry.js) : 'fe1',
            fe2: options.isServer ? path.resolve(../fe1/build/remoteEntry_2.js) : 'fe2',
        },
        shared: [
          {
            react: {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
          {
            "react-dom": {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
        ]
      })
    )
    return config
  }
}

module.exports = nextConfig
Вход в полноэкранный режим Выход из полноэкранного режима

Здесь видно, что мы определили remote в конфигурации webpack. Задача remote — потреблять данные с заданного URL и делать контент доступным для этого приложения. Он будет принимать удаленные или локальные зависимости, основываясь на условии, которое мы указали.

Чтобы использовать этот файл, нам нужно обновить файл _document.js, указанный в разделе pages:

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <script src="http://localhost:3000/build/remoteEntry.js" />
      <script src="http://localhost:3001/build/remoteEntry_2.js" />
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}
Вход в полноэкранный режим Выход из полноэкранного режима

Импортируем этот модуль в файл index.js и используем его.

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'

// Importing modules
const Header = (await import('fe1/header')).default;
const squareRoot = (await import('app1/getSquareRoot')).default;

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <Header />
      </Head>
      <main className={styles.main}>
        <h1 className={styles.title}>
           Square root of 4: {squareRoot(4)}
        </h1>
      </main>
    </div>
  )
}
Вход в полноэкранный режим Выход из полноэкранного режима

Выполнение и результаты

Теперь пришло время проверить, работает это или нет. Сначала соберите и запустите fe1 и fe2. Запустите fe3, выполнив npm start dev и перейдите на соответствующий URL, чтобы проверить результат.

Вау! Мы только что использовали содержимое двух кодов фронтенда в нашем основном фронтенде!

🚀 Давайте сделаем немного магии.

Перейдите в fe1 → src → component и измените значение с name на name updated. Затем повторно запустите f2.

Вы можете увидеть новый код, который был обновлен в fe1, ничего не делая. Удивительно, правда?

Преимущества микрофронтендов

Проще говоря, микро-фронтенды делают веб-приложения более удобными в обслуживании. Если вы когда-нибудь были частью большого приложения, вы знаете, что это очень утомительно — управлять всем.

Микрофронтенды работают по принципу «разделяй и властвуй». Теперь давайте разберемся в наиболее важных и ценных аспектах работы с микрофронтендами.

Развертывание и безопасность

Существенным преимуществом архитектуры микрофронтенда является то, что вы можете разделить единое тело на отдельные части, которые могут быть развернуты независимо друг от друга. При самостоятельном развертывании вы можете поддерживать и собирать, не работая над другими частями.

Vercel поддерживает отдельные репо различных фронтендов, независимо от языка и фреймворка, чтобы развернуть их вместе. Кроме того, вы можете использовать сервисы развертывания, такие как Netlify. После развертывания вы можете использовать его только как отдельный фронтенд.

Когда фронтенд используется большой аудиторией, он должен быть безопасным и надежным. Для обеспечения безопасности можно использовать SSL-сертификат типа Wildcard или однодоменный, многодоменный или SAN SSL-сертификат. Один SAN или мультидоменный SSL-сертификат может обеспечить безопасность нескольких сайтов и поддоменов.

Масштабируемость

Существует множество фреймворков, построенных на JavaScript, но если вы хотите объединить разработчиков с разным опытом работы над одним проектом, будет ли это вообще возможно? С микрофронтендами ответ положительный!

Вы можете объединить React, Vue и Angular в одном проекте, используя преимущества архитектуры микро-фронтенда. На мой взгляд, это дает лучший результат в конечном итоге.

Более быстрая разработка

Теперь вы знаете, что ваша команда может работать независимо друг от друга. Отлично, больше никакого ненужного хаоса!

Ваша команда может разрабатывать и развертывать свой фронтенд, когда захочет. Релизы могут быть сделаны быстро, потому что нет нулевых зависимостей, связанных с отдельными модулями.

Главная цель определения микро-фронтенда — более быстрые итерации.

Простота тестирования

Лучше тестировать отдельные части приложения, прежде чем переходить к интеграционному тестированию. Этого можно достичь здесь!

Команды будут тестировать микро-фронтенд перед тестированием приложения, тем самым снижая вероятность того, что ошибки попадут в реальную систему.

Помимо этого, другими преимуществами являются небольшая кодовая база, которую легко поддерживать, и возможность быстро добавить или удалить любой модуль из системы.

Заключение

В этой статье мы рассмотрели концепцию микрофронтендов и привели примеры. Надеемся, теперь вы знаете, что их легко принять и они имеют несколько замечательных возможностей!

Next.js довольно чист и следует простой архитектуре микро-фронтенда. Мне не терпится увидеть, что Next принесет в будущем в отношении микроархитектуры и рендеринга на стороне сервера с помощью микрофронтенда.

Лично мне нравится стиль кодирования микро-фронтенда, потому что его легко поддерживать в командах. Кроме того, построение фронтенда и безопасность также управляются довольно элегантно. Это очень интересная возможность для команды, потому что в будущем эта концепция, вероятно, вырастет за пределы ограничений!

В дальнейшем вы не найдете различий между микрофронтендом и односкелетной системой.


LogRocket: Полная видимость производственных приложений Next.js

Отладка приложений Next может быть сложной задачей, особенно когда пользователи сталкиваются с проблемами, которые трудно воспроизвести. Если вы заинтересованы в мониторинге и отслеживании состояния Redux, автоматическом выявлении ошибок JavaScript, отслеживании медленных сетевых запросов и времени загрузки компонентов, попробуйте LogRocket.

LogRocket — это как видеорегистратор для веб- и мобильных приложений, записывающий буквально все, что происходит в вашем приложении Next. Вместо того чтобы гадать, почему возникают проблемы, вы можете собрать воедино и сообщить, в каком состоянии находилось ваше приложение в момент возникновения проблемы. LogRocket также отслеживает производительность вашего приложения, предоставляя такие показатели, как загрузка процессора клиента, использование памяти клиента и другие.

Пакет промежуточного ПО LogRocket Redux добавляет дополнительный уровень видимости пользовательских сессий. LogRocket регистрирует все действия и состояние ваших хранилищ Redux.

Оцените статью
devanswers.ru
Добавить комментарий