автор Дженнифер Оро-Огене Этегбеке
Сложно идти в ногу со скоростью, с которой развивается экосистема JavaScript с выпуском новых фреймворков каждый год. Понимание различных фреймворков JavaScript жизненно важно, особенно если вы новичок, которому требуется более простой подход.
Современная интерфейсная веб-разработка не обходится без фреймворков JavaScript, которые предоставляют программистам проверенные инструменты для создания масштабируемых динамических веб-приложений. Сегодня знакомство с фреймворками часто требуется для профессий, занимающихся фронтенд-разработкой, потому что многие современные компании используют их в качестве основного компонента инструментов. Я надеюсь, что эта статья послужит хорошей отправной точкой для изучения различных фреймворков.
Начинающим фронтенд-разработчикам может быть сложно решить, с чего начать при изучении фреймворков, потому что существует так много вариантов, постоянно создаются новые, они в основном работают одинаково, но выполняют некоторые задачи по-разному, и есть некоторые вещи, на которые следует обратить внимание. при использовании фреймворков.
В конце этой статьи вы будете знакомы с компонентами Next.js и NuxtJS, будете иметь общее представление об обоих фреймворках и сможете выбрать то, что вам подходит.
Что такое NuxtJS?
NuxtJS — это бесплатная среда JavaScript с открытым исходным кодом, используемая для создания приложений Vue.js. Его цель — сделать его простым, быстрым и организованным, чтобы разработчики Vue могли пользоваться передовыми технологиями. На NuxtJS повлиял Next.js, фреймворк, построенный на React.js с аналогичной целью.
Основой вашего проекта Vue.js является NuxtJS, который обеспечивает структуру и гибкость, поэтому вы можете уверенно его создавать. Сосредоточившись на предоставлении фантастических возможностей для разработчиков, NuxtJS стремится сделать веб-разработку простой и эффективной. С его помощью вы можете сконцентрироваться на том, что важно — на создании своего приложения.
Новые функции публичной бета-версии NuxtJS 3, выпущенной в октябре, дали разработчикам больше времени, чтобы сосредоточиться на создании замечательных пользовательских интерфейсов. В результате рост сообщества NuxtJS резко увеличился.
Экосистема модулей
Чтобы расширить базу фреймворка и упростить интеграцию, NuxtJS предлагает модульную систему. Модульная система более высокого порядка, предлагаемая NuxtJS, позволяет расширять ядро. Когда NuxtJS загружается, модули — это функции, которые вызываются по порядку. Если для него существует модуль NuxtJS, вам не нужно создавать его с нуля или поддерживать шаблон. «Nuxt.config» можно использовать для добавления модулей NuxtJS.
Плагины и параметры конфигурации могут быть добавлены в NuxtJS, но управление этими настройками в различных проектах может быть трудоемким, повторяющимся и занимать много времени. Однако, если бы NuxtJS отвечал требованиям каждого проекта из коробки, он был бы слишком сложным и сложным в использовании.
Это одна из причин, по которой NuxtJS предлагает модульную архитектуру, позволяющую расширять ядро. В дополнение ко многим другим полезным действиям они могут настраивать загрузчики веб-пакетов, устанавливать библиотеки CSS и изменять файлы шаблонов.
Распространение модулей NuxtJS в пакетах npm — лучшая часть.
Чтобы узнать больше о модулях NuxtJS , нажмите здесь и здесь.
Автоимпорт компонентов
Чтобы выполнить выборку данных, получить доступ к контексту приложения и конфигурации среды выполнения, управлять состоянием или создавать компоненты и плагины, NuxtJS автоматически импортирует функции и составные элементы. NuxtJS немедленно импортирует любые компоненты в вашем каталоге components/ (вместе с компонентами, зарегистрированными любыми модулями, которые вы можете использовать).
1| components/ 2--| TheHeader.vue 3--| TheFooter.vue
layouts/default.vue:
1<template> 2 <div> 3 <TheHeader /> 4 <slot /> 5 <TheFooter /> 6 </div> 7</template>
В NuxtJS 3 мы получаем новую дополнительную папку с именем composables/, которая будет автоматически импортировать написанную вами функцию Composition API. Компоненты автоматически импортируются в папку components/, а маршрутизация на основе файлов — в папку pages/.
Нажмите здесь, чтобы узнать больше об автоимпорте NuxtJS.
Режимы рендеринга
Рендеринг — это процесс, посредством которого браузер и сервер переводят компоненты Vue.js в элементы HTML, читая код JavaScript.
NuxtJS поддерживает отрисовку на стороне клиента и глобальную отрисовку.
Сложный динамический пользовательский интерфейс (UI) с плавным переходом между страницами можно создать с помощью методов отрисовки на стороне клиента.
При сохранении преимуществ клиент- боковой рендеринг, универсальный рендеринг позволяет приложениям NuxtJS предлагать быструю загрузку страниц. Кроме того, поскольку содержимое уже включено в текст HTML, поисковые роботы могут индексировать его без дополнительных усилий.
В дополнение к определению того, как сервер должен реагировать на новый запрос по определенному URL-адресу, гибридный рендеринг допускает различные правила кэширования для каждого маршрута.
Приложения JavaScript часто сталкиваются с трудностями при работе с SEO и метатегами. Это связано с тем, что страница изначально пуста, когда мы полагаемся на JavaScript для получения наших данных, таких как контент и метаописания. Кроме того, нет материалов для индексации или обработки перед выполнением JavaScript. Кроме того, многие сканеры не поддерживают JavaScript. В результате, если вы поделитесь статьей из своего JavaScript-блога на Facebook, она может появиться с заголовком «undefined», а не с оригинальным заголовком статьи.
Рендеринг на стороне сервера (SSR) может спасти нас в этой ситуации. Целью SSR является размещение сервера, который будет генерировать HTML-ответ и передавать его сканеру или клиенту.
В результате в приведенном выше примере сервер будет обрабатывать вызов API, после чего метаданные будут установлены, и последняя страница будет доставлена. Когда сканеры будут анализировать страницу, будет присутствовать вся мета- и SEO-информация.
С NuxtJS 3 теперь возможен гибридный рендеринг. Это позволит вам использовать такие функции, как добавочная статическая генерация, которая сочетает в себе рендеринг на стороне сервера (SSR) и генерацию статического сайта (SSG), а также другие сложные режимы.
Режимы рендеринга также можно найти «здесь " и здесь".
Маршрутизация файловой системы
Для каждой страницы NuxtJS предлагает автоматическую маршрутизацию и разделение кода. NuxtJS автоматически создает конфигурацию Vue-маршрутизатора на основе дерева файлов Vue внутри каталога pages. Вам не нужно выполнять какую-либо дополнительную настройку после создания файла .vue в каталоге ваших страниц, чтобы заработала базовая маршрутизация.
Это файловое дерево:
1 pages/ 2--| user/ 3-----| index.vue 4-----| one.vue 5--| index.vue
автоматически сгенерирует:
1router: {
2 routes: [
3 {
4 name: 'index',
5 path: '/',
6 component: 'pages/index.vue'
7 },
8 {
9 name: 'user',
10 path: '/user',
11 component: 'pages/user/index.vue'
12 },
13 {
14 name: 'user-one',
15 path: '/user/one',
16 component: 'pages/user/one.vue'
17 }
18 ]
19}
Используя Vue Router в качестве серверной части, маршрутизацию на основе файлов можно использовать для создания маршрутов в онлайн-приложении.
Если вы используете только app.vue, vue-router не будет включен, поскольку этот каталог является необязательным, что снижает размер пакета вашего приложения.
Во всем вашем приложении NuxtJS предлагает настраиваемую платформу промежуточного программного обеспечения маршрута, которая идеально подходит для извлечения кода, который вы хотите выполнить, прежде чем перейти к определенному маршруту.
Запустите в компоненте Vue вашего приложения NuxtJS промежуточное ПО маршрута. Несмотря на схожее название, они не совпадают с промежуточным программным обеспечением сервера, которое работает на сервере Nitro вашего приложения.
Подробнее о маршрутизации файлов NuxtJS можно найти здесь.
Нулевая конфигурация
Конфигурация NuxtJS по умолчанию охватывает большинство вариантов использования. Файл nuxt.config.js позволяет заменить конфигурацию по умолчанию.
Вы можете использовать NuxtJS, чтобы указать глобальные файлы CSS, модули и библиотеки, которые вы хотите использовать (включены на каждую страницу).
Добавьте эти ресурсы CSS в nuxt.config.js:
1 export default {
2 css: [
3 // Load a Node.js module directly (here it's a Sass file)
4 'bulma',
5 // CSS file in the project
6 '~/assets/css/main.css',
7 // SCSS file in the project
8 '~/assets/css/main.scss'
9 ]
10}
NuxtJS автоматически определяет тип файла на основе его расширения и использует соответствующий загрузчик препроцессора для веб-пакета. Вы все равно должны установить необходимый загрузчик, если хотите их использовать.
Вы можете опустить расширение файла для файлов, указанных в массиве CSS в вашем файле конфигурации NuxtJS, таких как CSS, SCSS, Postcss, Less, Stylus и т. д. .
1 export default {
2 css: ['~/assets/css/main', '~/assets/css/animations']
3}
NuxtJS позаботится обо всем остальном, когда вы приступите непосредственно к работе над кодом своего приложения.
Вот дополнительная информация о конфигурации NuxtJS.
Получение данных
Вы можете использовать NuxtJS для получения контента из любого источника в компоненты Vue с поддержкой SSR.
NuxtJS предлагает метод Fetch и метод asyncData в виде двух (2) ) методы получения данных из API.
После того, как экземпляр компонента установлен, Fetch представляет собой ловушку, вызываемую как на клиенте во время навигации, так и на стороне сервера. Ловушка fetch должна (явно или неявно через async/await) возвращать обещание, которое будет выполнено:
до того, как первая страница будет отрисована на сервере, и после того, как компонент будет смонтирован на клиенте.
При использовании статического хостинга перехватчик выборки используется только при создании страниц, а вывод затем кэшируется для использования клиентом. Может быть важно предоставить вашему компоненту имя или, в противном случае, предложить специальную реализацию fetchKey для предотвращения конфликтов кеша.
Другой хук для глобального извлечения данных — asyncData. В отличие от Fetch, который требует выполнения действий Vuex или изменения свойств экземпляра компонента для сохранения асинхронного состояния, asyncData просто объединяет возвращаемое значение с локальным состоянием вашего компонента. Используя библиотеку @nuxt/http, рассмотрим следующий пример:
1<template>
2 <div>
3 <h1>{{ post.title }}</h1>
4 <p>{{ post.description }}</p>
5 </div>
6</template>
7
8<script>
9 export default {
10 async asyncData({ params, $http }) {
11 const post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
12 return { post }
13 }
14 }
15</script>
N/B: asyncData доступен только для страниц; хук не имеет к нему доступа.
Более подробную информацию о выборке данных можно найти в этом руководстве.
SEO-оптимизация
У вас есть три варианта с NuxtJS для включения метаданных в ваше приложение:
- Глобальное использование nuxt.config.js
- Локальное использование головы как объекта
- Локальное использование головы в качестве функции для извлечения данных и вычисляемых свойств
NuxtJS предлагает управление метатегами и более быстрое получение контента для отличной индексации.
Вот дополнительное руководство по метатегам и SEO.
Плюсы NuxtJS
NuxtJS является расширяемым и позволяет легко интегрировать ваши любимые конечные точки REST или GraphQL, CMS, CSS-фреймворки и многое другое благодаря надежной экосистеме модулей и движку хуков. Ниже приведены некоторые из многих преимуществ использования NuxtJS:
- Вы можете развернуть полнофункциональные приложения Vue, которые будут быстрыми и оптимизированными для SEO, с помощью NuxtJS, который также предоставляет убедительное решение и отличную экосистему.
- Благодаря инновационному подходу NuxtJS ускоряет создание и функциональность вашего будущего веб-сайта или приложения, объединяя превосходный опыт разработчика с многоразовыми, полностью интегрированными функциями.
- Простота NuxtJS и постепенная кривая обучения делают его фантастическим вариантом.
- Между рендерингом на стороне сервера (SSR) и созданием статического сайта NuxtJS обеспечивает универсальность (SSG).
- В дополнение к продуманной настройке и структуре, NuxtJS предлагает автоматическое разделение кода, эффективную командную работу, надежную структуру каталогов и соглашения.
Минусы NuxtJS
Каждое преимущество имеет соответствующий недостаток. Недостатки использования NuxtJS перечислены ниже:
- Для NuxtJS доступно меньше ресурсов и, возможно, менее подробная документация по продукту из-за небольшого сообщества.
- На вашем сервере высокий трафик может быть особенно обременительным.
- Только определенные хуки позволяют вам взаимодействовать с DOM и запрашивать его.
- Получить настроенные библиотеки для работы с NuxtJS может быть непросто.
- Несомненно, есть популярные, надежные плагины или отсутствующие элементы, такие как Календарь, Карты Google, векторные карты и т. д. Хотя есть дополнительные компоненты, они, как правило, плохо поддерживаются.
Повтор сеанса с открытым исходным кодом
OpenReplay – это пакет для воспроизведения сеансов с открытым исходным кодом, который позволяет вам видеть, что пользователи делают в вашем веб-приложении, помогая вам быстрее устранять неполадки. OpenReplay размещается на собственном сервере для полного контроля над вашими данными.
Начните получать удовольствие от отладки — начните использовать OpenReplay бесплатно.
Что такое Next.js?
Next.js — лучший инструмент для любого разработчика React, чтобы изучать и улучшать свои проекты. Это среда веб-разработки с открытым исходным кодом, построенная на основе Node.js и облегчающая рендеринг на стороне сервера и развертывание статических веб-сайтов для веб-приложений на основе React.
Next.js предлагает лучший опыт для разработчиков, который обладает всеми возможностями, необходимыми для производства, включая поддержку TypeScript, интеллектуальное объединение, предварительную выборку маршрута и гибридный статический и серверный рендеринг. Настраивать не нужно.
Несколько передовых возможностей, предлагаемых Next.js, усовершенствуют ваше онлайн-приложение. Особенности Next.js заключаются в следующем:
Маршрутизация файловой системы
Используя идею страниц в качестве основы, Next.js имеет маршрутизатор на основе файловой системы. Маршрут становится автоматически доступным, когда файл добавляется в каталог pages. Вы можете определить большинство шаблонов, используя файлы в каталоге pages.
Сегменты для индексного маршрута, вложенного маршрута и динамического маршрута доступны здесь.
Маршрутизатор будет автоматически направлять файлы с именем index в корень каталога при использовании этого индексного маршрута.
1'pages/index.js' → '/' 2'pages/blog/index.js' → '/blog'
Маршрутизатор совместим с вложенными файлами в маршруте Nested, и структура вложенных папок по-прежнему будет автоматически передавать файлы аналогичным образом.
1'pages/blog/first-post.js' → '/blog/first-post' 2'pages/dashboard/settings/username.js' → '/dashboard/settings/username'
Кроме того, вы можете использовать синтаксис скобок в сегментах динамического маршрута. Теперь вы можете сопоставлять именованные параметры благодаря этому.
1'pages/blog/[slug].js' → '/blog/:slug' ('/blog/hello-world')
2'pages/[username]/settings.js' → '/:username/settings' ('/foo/settings')
3'pages/post/[...all].js' → '/post/*' ('/post/2020/id/title')
Ознакомьтесь с документацией по маршрутам, чтобы узнать больше о том, как они работают.
Рендеринг на стороне сервера
В зависимости от варианта использования вашего приложения выборка данных в Next.js позволяет отображать информацию различными способами. К ним относятся предварительный рендеринг с использованием статического создания сайта (SSG) или рендеринга на стороне сервера (SSR), а также динамическое создание или обновление контента с использованием добавочной статической регенерации. Next.js будет предварительно отображать страницу, используя информацию, предоставленную функцией getServerSideProps (рендеринг на стороне сервера), если вы экспортируете ее со страницы.
1 export async function getServerSideProps(context) {
2 return {
3 props: {}, // will be passed to the page component as props
4 }
5}
Каждое «предложение» будет отправлено компоненту страницы независимо от метода рендеринга, и первый HTML-код может быть прочитан на стороне клиента. Это необходимо для правильного увлажнения страницы.
Генерация статического сайта
Список путей, которые должны создаваться статически, должен быть определен, если страница использует getStaticProps и содержит динамические маршруты.
Любые пути, предоставленные функцией getStaticPaths (генерация статического сайта), экспортированные со страницы, использующей динамические Маршруты будут статически предварительно обработаны Next.js.
1 export async function getStaticPaths() {
2 return {
3 paths: [
4 { params: { ... } }
5 ],
6 fallback: true // false or 'blocking'
7 };
8}
Справочник по API охватывает все параметры и свойства, которые можно использовать с getStaticPaths.
Next.js выполняет предварительную визуализацию страниц во время сборки (SSG) или во время запроса (SSR) в одном проекте.
Оптимизация изображения
HTML-элемент img был расширен для современной сети с помощью компонента next/image из Next.js. Вы можете получить хорошие показатели Core Web Vitals с помощью ряда встроенных улучшений производительности. Эти рейтинги являются важным показателем того, насколько хорошо пользователи реагируют на ваш веб-сайт, и учитываются Google при определении результатов поиска.
Next.js автоматически рассчитает ширину и высоту изображения, используя импортированный файл в качестве основы. Пока ваше изображение загружается, эти настройки используются для остановки кумулятивного смещения макета.
1import Image from 'next/image'
2import profilePic from '../public/me.png'
3
4function Home() {
5 return (
6 <>
7 <h1>My Homepage</h1>
8 <Image
9 src={profilePic}
10 alt= "Picture of the author"
11 // width={500} automatically provided
12 // height={500} automatically provided
13 // blurDataURL="data:..." automatically provided
14 // placeholder="blur" // Optional blur-up while loading
15 />
16 <p>Welcome to my homepage!</p>
17 </>
18 )
19}
Автоматическое разделение кода
Используются только те JavaScript и библиотеки, которые необходимы для отображения страниц. Вместо создания одного файла JavaScript, содержащего весь код приложения, Next.js автоматически делит приложение на несколько ресурсов. При загрузке страницы загружается только тот JavaScript, который требуется для этой конкретной страницы. Для этого Next.js проверяет импортированные ресурсы.
Существует одно примечательное исключение. Если импорт используется как минимум на 50% страниц сайта, он перемещается в основной пакет JavaScript.
Поддержка машинописного текста
Next.js имеет сильную поддержку TypeScript, потому что он написан на TypeScript. Не требуя настройки конфигурации и встроенных типов для страниц, API и т. д., Next.js предлагает интегрированный интерфейс TypeScript.
Используя флаг «-ts, -typescript», вы можете использовать «create-next-app». ' для создания проекта TypeScript следующим образом:
1npx create-next-app@latest --ts 2# or 3yarn create next-app --typescript 4# or 5pnpm create next-app --ts
Проверка типов — стандартная функция следующей сборки Next.js. Чтобы узнать больше о машинописном тексте Next.js, нажмите здесь.
Маршрут API
Одной из революционных функций Next.js является универсальный подход к созданию полнофункциональных приложений React, позволяющий писать серверный код с использованием маршрутов API.
Маршруты API Next.js предлагают способ создания API.
Любой файл в папке «pages/api» сопоставляется с «/api/*» и обрабатывается скорее как конечная точка API, чем как «страница». Они не увеличивают размер вашего пакета на стороне клиента, поскольку являются пакетами только на стороне сервера.
Плюсы Next.js
Next.js часто используют крупнейшие и наиболее известные компании по всему миру. Он считается одним из фреймворков React с одним из самых высоких темпов роста и отлично подходит для использования со статическими сайтами. Преимущества использования Next заключаются в следующем:
- Для SEO Next.js является фантастическим. Он позволяет создавать веб-приложения со всеми необходимыми возможностями и интерактивностью, сохраняя при этом SEO-преимущества статической текстовой веб-страницы. Благодаря этому вы можете создать мощное присутствие в Интернете.
- Пользовательский опыт с Next.js превосходен. Вы не обязаны придерживаться каких-либо плагинов, шаблонов или других ограничений, налагаемых платформами электронной коммерции или CMS. У вас есть полная свобода изменять интерфейс так, как вы считаете нужным, и вы также можете творчески редактировать вещи без каких-либо ограничений.
- Производительность вашего веб-сайта или веб-приложения повышается с помощью Next.js. Хотя одновременная загрузка и запуск значительного объема кода JavaScript не приводит к остановке браузера, это может значительно улучшить такие показатели, как общее время блокировки (TBT). Всегда стремитесь к времени менее 300 мс. Чем быстрее растет ваш TBT, тем быстрее люди найдут ценность в вашем онлайн-приложении.
- Ваш веб-сайт или приложение будут в безопасности, если вы используете Next.js. Статические веб-сайты Next.js не имеют прямых подключений к базе данных, зависимостям, пользовательским данным или любым другим личным данным, потому что у них нет ничего из этого. Таким образом гарантируется безопасность данных.
- Webpack, компонент Next.js, предоставляет готовую помощь в компиляции ресурсов, горячей перезагрузке и разделении кода, что может ускорить разработку. По мере того, как React и Next.js становятся все более популярными, растет и сообщество разработчиков, которые их используют. Будет просто найти компанию или независимого подрядчика для внесения изменений. Наилучшую поддержку для компиляции ресурсов, разделения кода и горячей перезагрузки разработчики постоянно находят в Next.js.
Минусы Next.js
Хотя Next.js предлагает фантастический опыт разработки, всегда есть ограничения. Команда Next.js усердно работает над устранением проблем. Таким образом, ограничений с каждым днем становится все меньше и меньше. Ниже приведены некоторые ограничения на использование Next.js:
- Для Next.js существует слабая экосистема плагинов. Простые в адаптации плагины ограничены в своем использовании.
- Внутреннего менеджера состояния также нет. Это означает, что вы должны включить в свое приложение Redux, MobX или другой менеджер состояния, если он вам нужен.
- У универсальности, которую предлагает Next.js, есть недостаток — постоянное обслуживание. Вам потребуется целеустремленный человек с необходимыми знаниями для успешного внедрения любых запрошенных корректировок.
- Next.js может использовать только один маршрутизатор. Другими словами, метод, использующий маршруты, нельзя изменить. Если в вашем проекте используются динамические маршруты, вы должны использовать сервер Node.js.
Сравнение Next.js и NuxtJS
Next.js — это первый выбор для разработчиков при создании сложных веб-приложений из-за его способности быстро создавать сложные веб-сайты. Разработчики Next.js продвигают его как однокомандную цепочку инструментов без настройки для проектов React. Это платформа React, которая прозрачно управляет рендерингом на стороне сервера для вас и предлагает общую архитектуру, упрощающую создание интерфейсного приложения React. Когда Next.js замечает изменение, сохраненное на диске, страница перезагружается. Он хорошо работает с другими компонентами JavaScript, Node и React. Перед передачей HTML клиенту вы можете визуализировать компоненты React на стороне сервера с помощью Next.js.
Популярный фреймворк Vue.js — NuxtJS. Это упрощает создание одностраничных или глобальных программ Vue.js для Интернета. Фреймворк NuxtJS стремится быть достаточно универсальным, чтобы служить основной базой проектов для веб-разработчиков. Благодаря NuxtJS вы можете сконцентрироваться на логике своего веб-приложения, разделяя один и тот же код между сервером и клиентом. NuxtJS позволяет вам получить доступ к многочисленным свойствам ваших компонентов, таким как «isClient» и «isServer», поэтому вы можете быстро определить, рендерите ли вы что-то на сервере или на клиенте. Это лишь начало обширного списка преимуществ NuxtJS для разработки универсальных веб-приложений.
Next.js лучше, чем NuxtJS?
Высшей структуры нет. Это зависит от того, что вы считаете эффективным, и от его различных качеств.
По сути, Next.js — это фреймворк React, который можно использовать, когда пользователю требуется быстрый рендеринг в сложных условиях.
С другой стороны, NuxtJS — это фреймворк Vue, который помогает упростить и ускорить процесс веб-разработки.
Лучшие варианты использования NuxtJS
NuxtJS был создан для решения проблем, связанных с созданием одностраничных приложений (SPA), которые находятся в центре внимания многих современных фреймворков JavaScript.
Принуждение к соглашению, а не стратегии конфигурации — наиболее характерное применение NuxtJS. Вам не нужно создавать много файлов конфигурации при использовании NuxtJS. Вместо этого вы настраиваете структуру папок, чтобы NuxtJS мог ее понять, а затем после этого создает окончательный пакет приложения.
Высокооптимизированный пакет вашего приложения создается с помощью NuxtJS.
Примером использования являются сайты Storyblok и Pentest Tools.
Лучшие варианты использования Next.js
Одной из лучших особенностей Next.js является то, что вы можете создавать статические страницы, которые, тем не менее, функционируют как динамические. Это идеально, когда: (а) содержимое будет регулярно меняться или должно быть постоянно актуальным. (b) Возможности публикации в режиме реального времени требуются, например, для многопользовательских сайтов. © Перестройка всего веб-сайта займет много времени (и денег) с использованием SSG и не будет подвергаться риску. Хорошим примером является значительный веб-сайт электронной коммерции.
Next.js помогает программистам избежать типичных проблем. Next.js предотвращает случайное добавление разработчиками проблем, таких как чрезмерная выборка глубоко в дереве компонентов, предоставляя единую абстракцию для выполнения сложных задач пользовательского интерфейса. Разработчики точно понимали, где искать новые данные в случае необходимости. Сложные базовые API никому не нужно было изучать.
Неплохими кейсами являются сайты Hulu и Typeform.
Заключение
Преимущества и недостатки фреймворков Next.js и NuxtJS могут быть вам ясны после прочтения всего текста. Мы не можем не подчеркнуть, насколько широко распространен Javascript и как почти все современные мобильные и онлайн-приложения создаются с его использованием, что делает необходимым использование таких фреймворков, как Next.js и NuxtJS. Поэтому нужно выбрать и использовать наиболее эффективный фреймворк для своих нужд.
Я надеюсь, что этот пост поможет вам сделать выбор между Next.js и NuxtJS для вашего будущего проекта.
Цель этой статьи не в том, чтобы научить вас всему; скорее, это постепенно знакомит вас с полным потенциалом Next.js и NuxtJS.
Чтобы узнать больше обо всех возможностях и функциях, которые я не включил, некоторые из которых очень хороши, я предлагаю внимательно прочитать официальную документацию Next.js и NuxtJS.
Наконец, позвольте мне сказать, что вы ничего не потеряете, если начнете изучать любой из них для своего призвания или знаний.
Кодирование — это весело!
СОВЕТ ОТ РЕДАКТОРА. Чтобы сравнить обе платформы для решения одной и той же задачи, ознакомьтесь с нашими статьями Создание блога Markdown на базе Next.js менее чем за час и Как создать блог на основе CMS с помощью Nuxt. .
Первоначально опубликовано на https://dev.to 11 августа 2022 г.
