Днес споделям моя опит с използването на рамките Gatsby JS и Next JS

Gatsby JS:

GatsbyJS е генератор на статичен сайт. Той извършва предварително изграждане и връща статични файлове (HTML, CSS, JS) като резултат. Това означава, че задната част изпълнява работата от страната на сървъра веднъж на етапа на изграждане (освен случаите, когато клиентът в браузъра поиска API).

Характеристики:

  • Поддръжка на статично генериране на сайтове
  • Поддържа рендиране от страна на клиента
  • Използване на GraphQL за обработка на данни
  • Обширна поддръжка на вътрешни и общностни добавки
  • Използва се от: reactjs.org, www.figma.com

Моите наблюдения:

  • Отлична платформа за създаване на статични страници.
  • Извънредна поддръжка за Оптимизация на изображението, Разделяне на код (зареждане на JavaScript пакет на страници въз основа на потребителска заявка/навигация).
  • Функциите на PWA се предоставят от вградени плъгини. Тези библиотеки са наистина добри и имат голяма подкрепа от общността на Гетсби.
  • „Постепенното статично изграждане“ може да се използва за създаване на динамичен уебсайт. Но в момента той поддържа само с облачен хостинг gatsby.
  • За извличане на данни от API, той има силна зависимост от Graph QL. Въпреки че това може да бъде избегнато, някои функции като оптимизации на изображения и някои плъгини изискват Graph QL.

Моите препоръки:

Екосистемата Gatsby има силна зависимост от Graph QL. Познаването на React JS само по себе си няма да е достатъчно за екипа за разработка да изгради уебсайт с Gatsby. От гледна точка на производителността ще има по-малко време за рисуване на съдържанието и ще се зарежда бързо, тъй като страницата е готова по време на изграждането. Препоръчваме Gatsby JS, ако случаите на използване са само за генериране на статичен сайт.

Следващ JS

Next.js е JavaScript рамка, създадена от Vercel. Позволява ви да създавате изобразяване от страна на сървъра и статични уеб приложения с помощта на React.

Характеристики:

  • Поддържа изобразяване от страната на сървъра
  • Поддръжка на статично генериране на сайтове
  • Поддържа рендиране от страна на клиента
  • Динамичен уебсайт
  • Постепенно генериране на статичен сайт
  • Използва се от: marvel.com, hulu.com

Моите наблюдения:

  • Надеждна платформа за създаване на статични и странични страници за обслужване. Добра подкрепа от общността.
  • Поддръжка извън кутията за Оптимизация на изображението, Разделяне на код (пакет за зареждане на javascript страници въз основа на потребителска заявка/навигация).
  • PWA функции и не са предоставени по подразбиране. Трябва да използвате библиотеката с отворен код като — https://github.com/shadowwalker/next-pwa#readme — Свързване за преглед и https://github.com/hanford/next-offline — Свързване за преглед . Тези библиотеки са наистина нови и нямат много поддръжка от следващия js екип.
  • Постепенното генериране на статичен сайт наистина е добра функция за превръщане на статичен сайт в динамичен.
  • Зависимостта на node js сървъра: Next js ви позволява да експортирате приложението си в статичен HTML, който може да се изпълнява самостоятелно, без да е необходим Node.js сървър. Но това е предназначено за сценарии, при които никоя от нашите страници няма изисквания от страна на сървъра или допълнителни данни.

Моите препоръки:

Можем да препоръчаме Next JS само ако имаме валидни случаи на употреба както за генериране на статичен сайт, така и за генериране от страна на сървъра. Генерирането от страна на обслужване изисква възел js, работещ в сървъра. Страниците, генерирани от тази платформа, ще се зареждат бързо и по-малко време за първото рисуване на съдържание. Също така препоръчваме да създадете „хибридно“ приложение Next.js, като използвате Static Generation за няколко страници и използвате Server-side Rendering за други. Можем също да използваме изобразяване от страна на клиента заедно със статично генериране или изобразяване от страна на сървъра. Това означава, че някои части от страница могат да бъдат изобразени изцяло от клиентски JavaScript.

Приятно четене!