5-минутное руководство по выбору между Create React App и Next.js для ваших приложений

Если вы читаете это, вы, вероятно, разработчик React, который выбирает между Create React App (CRA) и Next.js для вашего нового проекта. Я активно использовал оба этих продукта в нескольких проектах и ​​полюбил Next.js за его простоту, легкость разработки и множество функций, которые он добавляет поверх React.

Давайте разберемся с основными преимуществами и предостережениями, чтобы принять решение.

CRA и Next.js

CRA - это официальный рекомендуемый метод для большинства людей, чтобы запустить новый проект React. Он избавляет от всех трудностей, связанных с подключением Webpack или Babel, и позволяет нам сразу же приступить к созданию нашего приложения.

Next.js - это фреймворк React от Vercel (ранее известный как Zeit). Он обладает мощными функциями, но лучшая из них - рендеринг на стороне сервера.

Основные преимущества Next.js

Рендеринг на стороне сервера (SSR)

При использовании SSR, когда ваше приложение загружается в браузере, сервер возвращает HTML-код страницы, которая будет отображаться. В отличие от этого с рендерингом на стороне клиента (CSR), сервер возвращает пустой HTML-код только с различными ссылками на файлы JavaScript, которые ему необходимо загрузить.

Это означает, что с SSR браузер может начать отображать HTML, в то время как файлы JavaScript загружаются и выполняются параллельно. С помощью CSR пользователю остается дольше смотреть на пустую страницу, прежде чем страница станет доступной и интерактивной. Следовательно, SSR может иметь огромные преимущества с точки зрения пользовательского опыта.

Более глубокий эксперимент, проведенный LogRocket, показывает эффективность SSR с точки зрения скорости и оценок Lighthouse.

Бесплатный хостинг на Vercel

Как разработчик у меня огромное количество побочных проектов, и что может быть лучше, чем возможность разместить их бесплатно? Vercel предлагает бесплатный хостинг проектов Next.js, где вы даже можете создавать приложения на основе API с бессерверными функциями.

На данный момент я разместил на Vercel 3 приложения с отличным временем безотказной работы и непрерывным развертыванием, подключившись к GitHub. Платформа просто великолепна для размещения приложений Next.js.

Предостережения Next.js

Ограничения бесплатного аккаунта на Vercel

Vercel - это рекомендуемый метод хостинга для всех приложений Next.js просто потому, что Next.js был создан Vercel и оптимизирован для размещения там.

Если вы создаете приложение, выходящее за рамки побочного проекта, вам следует остерегаться следующего многоуровневого подхода на Vercel. Это может наложить ограничения на ваше приложение.

Изюминкой является количество бессерверных функций, которое у вас может быть, которое ограничено 12. Для страниц, которые обрабатываются сервером, они будут созданы с помощью бессерверной функции. Если вы планируете иметь более 12 страниц с SSR, это будет ограничением.

Это ограничение можно преодолеть, статически отрисовывая некоторые страницы, сохраняя страницы SSR только там, где это необходимо, в зависимости от типа проекта.

Использование Redux

Redux - популярный легкий инструмент управления состоянием, и если вы создаете приложение React от среднего до большого, я предполагаю, что вы, вероятно, собираетесь внедрять Redux как часть своего решения. В Next.js наиболее распространенным способом реализации является использование модуля NPM next-redux-wrapper.

Проблема в том, что этот модуль требует от нас обновить _app.js корневую страницу нашего приложения Next.js следующим образом:

import React from 'react';
import {wrapper} from '../components/store';

const MyApp = ({Component, pageProps}) => (
    <Component {...pageProps} />
);

export default wrapper.withRedux(MyApp);

Если мы перейдем к объявлению метода withRedux, мы увидим, что он вызывает метод getInitialProps:

withRedux: (Component: any) => React.FunctionComponent<WrapperProps> & {
getInitialProps?(context: NextPageContext<any, AnyAction>): WrapperProps | Promise<WrapperProps>;
};

Вызывая getInitialProps на _app.js корневом уровне, все страницы теперь будут реализовывать SSR.

Проще говоря…

  1. Вам нужен бесплатный хостинг, предлагаемый Vercel?
    Для меня, как разработчика, имеющего множество сторонних проектов, это была прекрасная возможность разместить свои приложения бесплатно, не беспокоясь о дополнительных расходах.
  2. Вам нужен SSR?
    Next.js предлагает отличные функции поверх React, особенно SSR. Но во-первых, спросите себя, нуждается ли ваше приложение в SSR? Например, если большая часть вашего приложения находится за экранами аутентификации или входа в систему, вам может даже не понадобиться SSR.
  3. Достаточно ли вам бесплатного уровня Vercel?
    Если вы уверены, что вам нужен SSR, и любите многие функции Next.js, то следующий вопрос - спросить, подойдет ли вам бесплатный уровень Vercel. В противном случае, готовы ли вы перейти на следующий уровень, который является тарифным планом для группы, уровень Pro, начиная с 20 долларов в месяц за пользователя?

JavaScript на простом английском языке

Понравилась эта статья? Если да, то получите больше похожего контента, подписавшись на наш канал на YouTube в Decoded!