✍️ Стек сайта

Netlify

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

Некоторые преимущества:

• Простое развертывание: С помощью панели управления Netlify создает свой собственный репозиторий, который загружается на Github, и свои собственные микросервисы. Затем он выполняет и распространяет контент по широкому CDN, чтобы предоставлять посетителям готовые статические веб-сайты.

• SSL сертификаты: имеет встроенное управление DNS и SSL-сертификатами это бесплатно и без истечения срока действия.

• Автоматическое сборка и развертывание: после выполнения команды push в git репозиторий netlify автоматически делает новый production, запускает плагины и развертывает.

• Интеграции с API таких сервисов как Github, Cloudinary, Contentful, Algolia, Redis, Lighthouse и многие другие

• Встроенная поддержка коллекции медиа файлов

• Преимущества Netlify CMS:

  • Простая первичная настройка: Настройка выполняется через файл конфигурации
  • Удобный markdown редактор: Поддерживает: работу с медиа файлами, блоками программного кода, режимы редактирования WYSIWYG и исходный код документа.

NextJS

NextJS - это js-фреймворк, построенный поверх React, чтобы помочь разработчикам создавать высокопроизводительные веб-приложения и сверхбыстрые статические веб-сайты.

93 тыс. звезд на github

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

Особенности:

• Маршрутизация на основе файлов с поддержкой интернационализации
• Любой файл, добавленный в каталог pages/api, рассматривается как конечная точка API с соответствующим маршрутом API
• Режим предварительного просмотра позволяет отображать страницы во время запроса, а не во время сборки.
• Можно использовать гибридный подход для создания контента, выбирая между рендерингом на стороне сервера или статической генерацией для каждой страницы

Варианты создания страниц

• Static site generation (SSG)
• Server-side rendering (SSR).
• Incremental Static Regeneration (ISR) начиная с версии 9.5

Автоматическая оптимизация:

• Автоматическое создание статической страницы при сборке или при повторном запросе: если для генерации страницы не используются функции getServerSideProps и getInitialProps, то страница будет храниться в кэше NextJS. Подробнее Automatic Static Optimization
• Автоматическая выборка данных (auto prefetch): если использовать компонент Link, то страница указанная в параметре href будет предварительно загружена и кэширована браузером
• Автоматическая оптимизация растровых изображений: если использовать компонент Image, изображение будет кэшироваться с размерами, указанными в компоненте автоматически

Встроенное набор инструментов для разработчика

• useRouter: создает объект router, который хранит состояние адреса ресурса, текущую настройке языка, и предоставляет методы для навигации по сайту
• styled-jsx: дружественная к компонентам поддержка CSS для JSX (визуализируемая на сервере или клиенте).
• Встроенный набор компонентов: Image, Router, Link, Script, Head, Server

Styled components

styled-components - возможности ES6 и CSS для стилизации компонентов React.

Преимущества:

• Styled-components отслеживает, какие компоненты отображаются на странице, и вводит их стили и ничего больше, полностью автоматически.
• Styled-components генерирует уникальные имена классов для ваших стилей.
• Если компонент не используется (что может обнаружить инструментарий) и удаляется, все его стили удаляются вместе с ним.
• Адаптация стиля компонента на основе его props или global theme
• Чтобы найти стиль, влияющий на ваш компонент, ни придется просматривать различные файлы поэтому, обслуживание - это проще простого, независимо от того, насколько велика ваша кодовая база.
• Автоматическое добавление префикса поставщика.

MUI

MUI предлагает полный набор инструментов пользовательского интерфейса, которые помогут вам быстрее внедрять новые функции.

Основные особенности:

• Широкий выбор высококачественных компонентов.
• Хорошо продуманная система кастомизации интеграция с библиотеками стилей, по умолчанию используется библиотека emotion, поддерживаются styled-components, tailwind и др.
• Поддержка рендеринга компонентов на сервере.

MUI состоит из нескольких пакетов:

• Base: не поставляется с какой-либо темой по умолчанию или встроенным движком стилей. Это делает его отличным выбором, если вам нужен полный контроль над тем, как реализован CSS вашего приложения.
• Joy UI: содержит тот же список компонентов, который в Material UI, с аналогичной философией, основанной на компонентном API и расширяемости настройки, но без внешнего вида Material Design.
• Material UI: это библиотека компонентов пользовательского интерфейса, которая реализует Material Design от Google.
• System - представляет собой набор утилит CSS для быстрого создания пользовательских дизайнов с помощью библиотек компонентов пользовательского интерфейса.
• MUI X: это набор продвинутых компонентов пользовательского интерфейса для сложных вариантов использования. Большинство компонентов MUI X доступны бесплатно, но для более продвинутых функций требуется коммерческая лицензия Pro или Premium.