Позволете ми да започна с факта, че и двете рамки са невероятни и решават много от съществуващите проблеми или ограничения, които React има. Изненадващо, и двете споделят много подобни функции на OOTB, които ни позволяват като разработчици да създаваме производителни уеб приложения. Това обаче не беше така до съвсем скоро.
Само няколко актуализации/версии назад, и двете рамки имаха някои значителни разлики, които улесниха разработчиците да изберат една от двете, която има смисъл за техния случай на употреба. Но с последните актуализации двете рамки се доближиха много повече.
В тази статия ще се потопим в приликите и разликите между двете рамки и до края й съм сигурен, че ще можете да изберете една пред друга според вашия собствен случай на употреба.
Гетсби срещу NextJS Прилики
Преди да се потопим в разликите между двете рамки, нека оценим няколко прилики между тях:
- И Gatsby, и NextJS са базирани на React рамки с много функции, които React не поддържа първоначално.
- Тъй като и двете предоставят предварително изобразен HTML, уебсайтовете са удобни за SEO.
- Разделянето на кода и оптимизирането на кода се грижат незабавно от двете рамки с вградено маршрутизиране.
- Скоростта на зареждане на страницата е бърза както в NextJS, така и в Gatsby, тъй като те предварително извличат връзките, преди да се покажат в прозореца за изглед на потребителя.
- И двете рамки поддържат генериране на статичен сайт (SSG), изобразяване от страна на сървъра (SSR) и изобразяване от страна на клиента (CSR).
Гетсби срещу NextJS Разлики
1. Извличане на данни:
Gatsby: Въпреки че Gatsby поддържа извличане на данни без използване на GraphQL, той силно се застъпва против това. Той предпочита и препоръчва извличане на данни чрез GraphQL.
NextJS: Позволява ви да приложите извличане на данни чрез REST API, GraphQL или нещо друго. Основно е агностик относно метода за извличане на данни, който искате да използвате.
Заключение: Ако искате да се придържате към GraphQL или искате да използвате това като страхотна възможност да го научите, тогава Gatsby е за вас. Въпреки това, ако не харесвате GraphQL, тогава NextJS може да ви подхожда повече.
2. Приставки и стартови шаблони
Приставките са голямо разнообразие от често срещани функции на уебсайтове, които можете да включите в уебсайта си. Можете да мислите за тях като за npm package, за да добавите определена функционалност или да избегнете преоткриването на колелото.
Gatsby: Предоставя управлявана от общността плъгин екосистема, която ви позволява да започнете бързо и да използвате някои страхотни функции. Например, ако искате да добавите Facebook Analytics към уебсайта си, може да намерите или да не намерите възлов пакет за това, но можете да го получите лесно като плъгин чрез Gatsby.
NextJS: NextJS няма екосистема на плъгини като Gatsby и разработчиците трябва сами да свършат цялата тази работа.
Заключение: Ако искате да имате пълен контрол върху вашия проект и система за данни, тогава NextJS ще бъде най-добрият подход. Ако обаче искате да избегнете преоткриването на колелото и да използвате страхотни функции на приставките, тогава Gatsby е за вас.
3. Подход за рендинга
Въпреки че това не беше така доскоро, и двете рамки вече поддържат генериране на статичен сайт (SSG), изобразяване от страна на сървъра (SSR) и изобразяване от страна на клиента (CSR). Единствената разлика е в начина, по който тези рамки обработват отложеното изобразяване, което ще обсъдим тук. Да приемем, че имате уебсайт за блогове, който има 1000 страници или блогове. Почти 400 от тях са остарели или некритични и не желаете да ги създавате предварително. Сега нека видим как тези две рамки се справят с този сценарий.
Gatsby: Използва нещо, наречено Отложено статично генериране или DSG. Това, което можете да постигнете с DSG е, че можете предварително да визуализирате критичните 600 страници по време на изграждането и да отложите генерирането на некритична страница при поискване от потребителя. Това ускорява процеса на изграждане. Въпреки това, съдържанието, което се показва на тези 400 отложени страници, не е най-новите данни, а данните от предишната пълна компилация. Независимо от това, когато данните се актуализират, можете да използвате уеб кукичка, за да обезсилите кеша и да изградите/разположите отново актуално съдържание.
NextJS: Използва нещо, наречено Incremental Static Regeneration или ISR. Това ви позволява да актуализирате или създавате статични страници, след като сте изградили и внедрили вашето уеб приложение. Когато потребител поиска отложена страница, можете да създадете страницата при поискване с най-новите данни. Това ви помага да избегнете проблема със застояли данни във вашето приложение.
Заключение: В зависимост от това колко често се променят данните ви, можете да използвате двата подхода. Когато Gatsby предоставя по-стабилно състояние на данните, NextJS предоставя актуални данни при поискване от потребителя. В NextJS обаче се уверете, че поддържате паритет на данните между отложени и неотложени (предварително изградени) страници.
4. Оптимизация на изображението
Гетсби: Изящен плъгин на Гетсби, наречен gatsby-image, преоразмерява изображенията ви по време на изграждане, което означава, че устройства с по-малък екран, като смартфони, вече не трябва да изтеглят изображения с размер на настолен компютър. Като бонус той лениво зарежда изображения, което означава допълнително увеличаване на скоростта на мрежата. Същото изображение, което е 2Mb за настолен изглед, ще бъде да кажем 300Kb за мобилен изглед. Всичко благодарение на Gatsby Image.
NextJS: Осигурява маркер за автоматично оптимизиране на изображението за преобразуване на изображенията в модерния формат на изображението WebP, който осигурява най-високо качество и най-добър размер.
5. Сигурността
Gatsby:Поради факта, че Gatsby компилира вашите файлове в предварително изобразени файлове, вместо да ги изгражда в реално време на сървър, това намалява всички шансове за атака. Освен това Гетсби добавя слой от индиректност, който замъглява вашия CMS — така че дори ако вашият CMS е уязвим, лошите актьори нямат представа къде да го намерят. И накрая, с Gatsby обслужвате вашия сайт от глобална CDN, което ефективно елиминира риска от DDoS атаки.
NextJS: Уеб приложенията, направени с NextJS, също са защитени, с подходящи методи за удостоверяване, използвани за извличане и актуализиране на данни. Въпреки това, тъй като е пряко свързан със сървър или база данни, все още има място за уязвимости и атаки.
6. Система за управление на съдържанието— CMS
Gatsby: Gatsby разделя данните и уебсайта, което означава, че членовете на вашия екип, различни от разработчиците, също могат да редактират данни на уеб страницата, които след това могат да бъдат компилирани. Свързването към CMS чрез плъгин и възможността за актуализиране на данни без познания по програмиране означава, че Gatsby е предпочитаната рамка за създаване на статични уебсайтове.
NextJS: Както знаем, NextJS няма екосистема на плъгини, което прави извличането на данни от CMS малко тромаво. Може да се наложи да намерим техния SDK или API и след това да ги интегрираме в нашата система. Освен това би било препоръчително да запомните за инверсията на зависимостта, докато създавате такава система за многократна употреба.
Гетсби срещу NextJS Резюме
Заключение
Сега, след като сте избрали една рамка пред друга, ще измисля няколко последващи статии за създаване на Gatsby и NextJS проект от нулата. Моля, Следвайте и Абонирайте се тук в Mediumза това иако смятате, че тази статия е добавила стойност за вас !
Want to Connect? LinkedIn : https://www.linkedin.com/in/abhayganjoo/
Малко: Почувствайте силата на разработката, управлявана от компоненти
Кажете здравей на Bit. Това е инструмент №1 за разработване на приложения, управлявани от компоненти.
С Bit можете да създадете всяка част от приложението си като „компонент“, който може да се съставя и използва повторно. Вие и вашият екип можете да споделяте инструментариум от компоненти, за да създавате повече приложения по-бързо и последователно заедно.
- Създавайте и съставяйте „блокове за изграждане на приложения“: UI елементи, пълни функции, страници, приложения, безсървърни или микроуслуги. С всеки JS стек.
- Лесно споделяйте и използвайте повторно компоненти като екип.
- Бързо актуализирайте компонентите в проектите.
- Направете трудните неща прости: Monorepos, системи за проектиране и микро-интерфейси.
Опитайте Bit с отворен код и безплатно→
