CC BY
49которой имеет место известное эмерджентное явление, из знаний об этой материальной субстанции не следуют знания об ее материальных составляющих. Кроме того, разрешив рассматриваемую проблему, удастся пролить «яркий луч» на понимание сущности самой малой материальной величины, с которой приходится иметь дело в окружающей среде. В данном случае речь идет об определении планков-ской величины - минимального размера материальной субстанции в таком ее существовании, как вещество. То есть той материи, которую можно регистрировать, измерять современными вещественными приборами, а также, на основе которой, расширять перечень изделий, используемых в эксплуатации, в том числе и средств обработки информации. Ведь эти планковские размеры, в современной науке получены на основе формул, взятых из теории относительности Эйнштейна и квантовой физики, несостоятельность которых, как отмечалось ранее, доказана во многих работах, в том числе и в [4], и «спешить» доверять им не следовало бы.
Таким образом, в настоящей работе сформулирована важнейшая проблема естествознания, без
разрешения которой слабо представляется дальнейшее развитие науки и техники, и, прежде всего, в фундаментальной науке кибернетики - в ее познании естественного интеллекта, и, в частности, создании средств обработки информации, приближенным, по своим возможностям, к естественным совокупностям материи, т.е. созданных природой.
Литература
1. Вышинский В.А. О предмете исследований науки кибернетики. Sciences of Europe № 74, (2021)
2. Эмерджентная эволюция https://ru.wikipe-dia.org/wiki/%D0%AD%D0%BC%D0%B5%D1%80 %D0%B4%D0%B6%D0%B5%D0%BD%D1%82%D 0%BD%D0%B0%D1%8F_%D1%8D%D0%B2%D0 %BE%D0%BB%D1%8E%D1%86%D0%B8%D1%8 F
3. Добро пожаловать в эпоху эмерджентности. https ://www.iidf. ru/media/articles/trends/dobro -pozhalovat-v-epokhu-emerdzhentnosti/
4. Вышинский В.А. Что такое энергия? Sciences of Europe № 42 vol 1, с. 31-41
5. Ярилин А.А. «Золушка» становится принцессой, или место биологии в физике. «Экология и жизнь» №12 2008
АНАЛИЗ РАБОТЫ ПРИЛОЖЕНИЯ С ИСПОЛЬЗОВАНИЕМ SERVER-SIDE RENDERING: МИГРАЦИЯ, НАСТРОЙКА И РАЗВЕРТЫВАНИЕ ПРИЛОЖЕНИЯ NEXT.JS
Князев И.В.
Старший разработчик программного обеспечения в June Homes
Белгород, Россия
ANALYZING APPLICATION PERFORMANCE USING SERVER-SIDE RENDERING: MIGRATING, CONFIGURING AND DEPLOYING THE NEXT.JS APPLICATION
Kniazev I.
Senior Software Developer at June Homes Belgorod, Russia
АННОТАЦИЯ
В статье анализируется приложение Next.JS с использованием рендеринга на стороне сервера, а также методы и подходы к миграции, настройке и развертыванию такого приложения на Production сервер. ABSTRACT
The article analyzes the Next.JS application using server-side rendering, as well as methods and approaches for migrating, configuring and deploying such an application to the Production server. Ключевые слова: swr, javascript, reactjs, nextjs, typescript, es6. Keywords: swr, javascript, reactjs, nextjs, typescript, es6.
Кеширование данных и оптимизация веб-приложений являются самыми актуальными темами последних нескольких лет. Очевидно, что грамотное построение приложения, его архитектура, выбор технологий и дальнейшая его оптимизация влияют на такие показатели как расширяемость, переиспользуемость и эффективность.
С момента огромного всплеска популярности высокодинамичных фреймворков, таких как React, веб-разработчики пытались найти баланс между интерактивным пользовательским интерфейсом, предлагаемым рендерингом на стороне клиента, и
различными преимуществами, связанными с скоростью и оптимизацией, предоставляемыми сервером и рендерингом данных на сервере.
Один из простых способов комбинировать эти методы, чтобы получить лучшее из обоих - использовать Nextjs, фреймворк, построенный на основе React, который позволяет пользователям использовать широкий спектр функций, таких как рендеринг на стороне сервера, статическая генерация, простая маршрутизация на основе файлов и многое другое.
В данной статье анализируются продвинутые функции Next.JS, фактическая реализация кода, миграция, настройка и развертывание приложения с использованием современного Server Side Rendering - рендеринга на стороне сервера. Использование CSR и SSR В основном, JavaScript фреймворки, например такие как React и Angular, используют рендеринг на стороне клиента (CSR), когда сервер отправляет на страницу почти пустой файл HTML, за которым следуют все файлы JavaScript в одном большом пакете, который затем должен быть обработан в браузере для рендеринга DOM-дерева.
На страницах, отображаемых на стороне клиента, начальная скорость загрузки низкая, и пользователь видит пустой экран, пока не будет выполнен весь JavaScript и не будут выполнены запросы к API. Однако последующие скорости загрузки будут быстрыми, так как дальнейшие изменения потребуют только обновления соответствующих разделов DOM-дерева.
Проблема начальной скорости загрузки в CSR может быть решена с помощью рендеринга на стороне сервера (SSR), при котором сервер извлекает информацию из базы данных и отправляет на страницу подготовленный HTML-файл.
При таком подходе на странице есть значимый контент, который может просматривать пользователь. Страница становится интерактивной после выполнения файла JavaScript. Здесь сервер несет нагрузку по выборке и обработке данных, имея более высокую начальная скорость загрузк. Однако на последующие скорости загрузки это не повлияет, так как каждую страницу необходимо отобразить и снова получить с сервера.
Другим важным преимуществом SSR перед CSR является поисковая оптимизация (SEO). Поскольку страницы, отображаемые на сервере, уже подготовлены с соответствующими метаданными, роботы, используемые поисковыми системами, такими как Google, могут легко классифицировать эти страницы, что приводит к более высокому поисковому рейтингу веб-сайта. Однако страницы, использующие CSR, полагаются на выполнение JavaScript для заполнения метаданных. Часто, если выполнение занимает более 300-400 мс, бот обрабатывает пустую страницу, что негативно влияет на SEO показатели.
Идеальным решением является создание гибридного приложения, которое использует преимущества обоих этих методов для оптимизации доступности и взаимодействия с пользователем, и Next.js предлагает отличную отправную точку для этого.
Автоматическая настройка
Для того, чтобы создать новое приложение Next.js рекомендуется использовать create-next-app, которое настраивает все автоматически. Чтобы создать проект, запустите npx create-next-app yarn create next-app
Если вы хотите начать с проекта TypeScript, вы можете использовать --typescript флаг:
npx create-next-app --typescript yarn create next-app --typescript После завершения установки следуйте инструкциям по запуску сервера разработки. Попробуйте отредактировать pages/index.js и посмотрите результат в своем браузере. Ручная настройка
Для начала установите next, react и react-dom в вашем проекте:
npm install next react react-dom yarn add next react react-dom Как только вы это сделаете, вы сможете установить все необходимые зависимости в своем проекте.
Откройте package.json и добавьте следующее:
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint" }
Эти сценарии относятся к различным этапам разработки приложения:
• dev - Запускает next dev в режиме разработки
• build - Запускает next build сборку приложения для Production использования.
• start - Запускает next start Production сервер Next.js
• lint - Запускает next lint настройку встроенной конфигурации ESLint Next.js
Стоит отметить, что Next.js построен на концепции страниц. Страница представляет собой React Component экспортированный из .js, .jsx, .ts или .tsx файла в pages каталоге.
Страницы связаны с маршрутом на основе имени файла. Например pages/about.js, отображается на /about. Вы даже можете добавить параметры динамического маршрута с именем файла.
Итак, нам необходимо далее создать pages каталог внутри проекта и заполнить ./pages/index.js следующим кодом: function Page() {
return <p>paragraph/p> }
export default Page
Чтобы начать разработку вашего приложения, запустите npm run dev или yarn dev. Это запустит сервер разработки на http://localhost:3000.
Посетите http://localhost:3000, чтобы просмотреть ваше приложение.
Как результат проделанного выше мы получаем:
• Автоматическую компиляцию с webpack и babel
• Быстрое реагирование на обновления
• Статическую генерацию и рендеринг на стороне сервера
• Раздачу статических файлов Развертывание приложения на Production.
Основные особенности, методы оптимизации и кэширования.
Перед тем, как приступить к деплою (развертыванию) вашего приложения Next.js, вот несколько рекомендаций, чтобы обеспечить наилучшее взаимодействие с пользователем:
• По возможности используйте кеширование
• Отложите загрузку тяжелых пакетов JavaScript до тех пор, пока они не понадобятся
• Убедитесь, что логирование настроено
• Убедитесь, что настроена обработка ошибок
• Настройте страницы 404 (не найдено) и 500 (ошибка)
• Убедитесь, что вы измеряете производительность
• Запустите Lighthouse, чтобы проверить производительность, передовой опыт, доступность и SEO. Для достижения наилучших результатов используйте Production сборку Next.js и используйте инкогнито в своем браузере, чтобы расширения не влияли на результаты
• Ознакомьтесь с поддерживаемыми браузерами
Повысить производительность можно используя:
• next/image и автоматическую оптимизацию изображений
• автоматическую оптимизацию шрифтов
• оптимизацию скриптов
Самый экономный по времени способ развернуть Next.js в рабочей среде - использовать платформу Vercel от создателей Next.js. Vercel - это облачная платформа для статических сайтов и гибридных приложений.
Если вы еще этого не сделали, отправьте свое приложение Next.js поставщику Git по вашему выбору: GitHub , GitLab или BitBucket. Ваш репозито-рий может быть частным или публичным.
Затем выполните следующие действия:
• Зарегистрируйтесь в Vercel
• После регистрации вы попадете на страницу «Импорт проекта». В разделе «Из репозито-рия Git» выберите поставщика Git, который вы используете, и настройте интеграцию (там вы найдете инструкции: GitHub / GitLab / BitBucket )
• После настройки нажмите «Импортировать проект из...» и импортируйте приложение Next.js. Он автоматически определяет, что ваше приложение использует Next.js, и настраивает конфигурацию сборки
• После импорта он развернет ваше приложение Next.js и предоставит вам URL-адрес развертывания. Нажмите «Посетить», чтобы увидеть ваше приложение в разработке
Если вы используете собственный сервер, рекомендую выполнить миграцию с него (например, с помощью динамической маршрутизации). Если вы не можете выполнить миграцию, стоит рассмотреть другие варианты хостинга.
Vercel сделан создателями Next.js и имеет отличную поддержку для Next.js соответственно.
Например, подход гибридных страниц полностью поддерживается «из коробки»:
• Каждая страница может использовать либо статическую генерацию, либо рендеринг на стороне сервера (SSR).
• Страницы, использующие статическую генерацию и ресурсы (JS, CSS, изображения, шрифты и т.д.), Будут автоматически обслуживаться из сети Vercel Edge Network, что невероятно быстро.
• Страницы, использующие рендеринг на стороне сервера и маршруты API, автоматически становятся изолированными без серверными (serverless) функциями. Это позволяет бесконечно масштабировать рендеринг страниц и запросы API.
При развертывании приложения Next.js автоматически загрузит последнюю версию вашего приложения в фоновом режиме при маршрутизации. Для навигации на стороне клиента next/link временно будет работать как обычный <a> тег.
Если новая страница (со старой версией) уже была предварительно загружена, Next.js будет использовать старую версию. Затем, после полного обновления страницы или нескольких переходов на стороне клиента, Next.js покажет последнюю версию.
Хостинг с помощью сервера Node.JS
Next.js можно развернуть на любом хостинг-провайдере, поддерживающем Node.js. Это подход, который вам следует использовать, если вы используете собственный сервер.
Убедитесь, что ваш package.json имеет 'ЪшИ"и
"start" скрипты:
{
"scripts": { "dev": "next", "build": "next build",
"start": "next start" }
}
Скрипт next build создает Production приложение в папке .next. После сборки next start запускает сервер Node.js, который поддерживает гибридные страницы, обслуживая как статически сгенерированные, так и отображаемые на стороне сервера страницы.
Хостинг с помощью образа Docker Вы можете использовать этот подход при развертывании в Kubernetes или HashiCorp Nomad, или при работе внутри одного узла в любом облачном провайдере.
Пример использования Dockerfile: FROM node:alpine AS deps https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a3150 6
RUN apk add --no-cache libc6-compat WORKDIR /app COPY package.json yarn.lock ./ RUN yarn install --frozen-lockfile FROM node:alpine AS builder WORKDIR /app COPY . .
COPY --from=deps /app/node_modules ./node_modules
RUN yarn build && yarn install --production -ignore-scripts --prefer-offline
FROM node:alpine AS runner
WORKDIR /app ENV NODE_ENV production RUN addgroup -g 1001 -S nodejs RUN adduser -S nextjs -u 1001 COPY --from=builder /app/public ./public COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./pack-age.json
USER nextjs EXPOSE 3000 CMD ["yarn", "start"]
Обязательно поместите этот Dockerfile в корневую папку вашего проекта.
Вы можете создать свой контейнер docker build . -t my-next-js-app и запустить его с помощью docker run -p 3000:3000 my-next-js-app.
Стратегии внедрения и переход на Next.JS Next.js был разработан так, что его можно внедрять постепенно. С Nextjs вы можете продолжать использовать существующий код и добавлять столько React, сколько вам нужно. Начав с малого и постепенно добавляя больше страниц, вы можете предотвратить сбой в работе, избегая полной перезаписи.
Первая стратегия - настроить ваш сервер или прокси так, чтобы все в определенном subpath указывало на приложение Nextjs. Например, ваш существующий веб-сайт может находиться по адресу example.com, и вы можете настроить свой прокси-сервер таким образом, чтобы example.com/store обслуживал магазин электронной коммерции на Next.js.
Используя basePath, вы можете настроить ресурсы и ссылки вашего приложения Nextjs для автоматической работы с вашим новым subpath/store. Поскольку каждая страница в Next.j s представляет собой отдельный автономный маршрут, такие страницы pages/products.js будут маршрутизироваться example.com/store/products в вашем приложении. В коде конфига это будет выглядеть так: // next.config.js module.exports = {
basePath: '/store', }
Вторая стратегия - создать новое приложение Nextjs, указывающее на корневой URL-адрес вашего домена. Затем вы можете использовать rewrites внутри next.config.js, чтобы проксировать некоторые subpath в существующее приложение.
Например, предположим, что вы создали приложение Nextjs, которое будет обслуживаться example.com следующим образом next.config.js. Теперь запросы для страниц, которые вы добавили в это приложение Nextjs (например, /about если вы добавили pages/aboutjs), будут обрабатываться Nextjs, а запросы для любого другого маршрута (например /dashboard) будут проксироваться proxy.example.com. В коде конфига это будет выглядеть так:
// next.config.js module.exports = {
async rewrites() { return {
fallback: [
{
source: '/:path*',
destination: 4https://proxy.example.com/:path*\ },
],
}
return [
{
source: '/:path*',
destination: '/:path*', },
{
source: '/:path*',
destination: 4https://proxy.example.com/:path*\ },
]
},
}
Микро-фронтенды с монорепозиториями и субдоменами
Для микро-фронтендов с монорепозиториями и субдоменами Nextjs (и Vercel) позволяет использовать поддомены для постепенного внедрения новых приложений. Некоторые преимущества микроинтерфейсов:
• Меньшие, более сплоченные и удобные в обслуживании кодовые базы.
• Более масштабируемые организации с разделенными автономными командами.
• Возможность обновлять или даже переписывать части интерфейса более инкрементально.
После настройки вашего монорепозитория, отправьте изменения в репозиторий Git как обычно, и вы увидите коммиты, развернутые в проектах Vercel, которые вы подключили. Заключение
Рендеринг на стороне сервера имеет много преимуществ, не ограничивающийся лишь SEO оптимизацией. Можно отметить, что гибридное веб-приложение по сравнению с полностью развернутым на стороне клиента представляет собой более гибкий и масштабируемый вариант, который позволяет уменьшить сложность и стоимость разработки. В данной статье я проанализировал работу гибридных веб-приложений, а именно приложения на Next.JS, указал основные этапы и стратегии миграции и развертывания приложения на SSR с рабочими примерами кода.
Литература
1. Документация React.JS / [Электронный ресурс], 2021. Режим доступа: https://reactjs.org/ (дата обращения: 01.08.2021).
2. Репозиторий GitHub / React.JS. [Электронный ресурс], 2021. Режим доступа: https://github.com/facebook/react/ (дата обращения: 01.08.2021).
3. Документация Next.JS / [Электронный ресурс], 2021. Режим доступа: https://nextjs.org/ (дата обращения: 01.08.2021).
