Смесь Next.js и React Native для веб-приложений и мобильных приложений

Для достижения своих целей рассмотрите следующую смесь библиотек и фреймворков:

Веб-приложение:

1. Next.js (v13+) для преимуществ SSR и нового подхода к маршрутизации
2. Tailwind CSS для стилизации и адаптивного дизайна
3. Shadcn для дополнительных классов полезности

Мобильное приложение:

1. React Native для естественного поведения мобильных устройств
2. Nativewind для использования Tailwind CSS с React Native
3. React Native Web для обмена кодом между Интернетом и мобильными устройствами

Общая кодовая база:

1. Используйте подход монорепозитория для обмена кодом между веб-приложениями и мобильными приложениями.
2. Используйте такие библиотеки, как Solito, чтобы упростить обмен кодом между Next.js и React Native.

Эта комбинация позволяет вам использовать преимущества SSR в Интернете, собственное мобильное поведение и совместно использовать код между обеими платформами, используя Tailwind CSS и Shadcn для стилизации.

И Tamagui, и React Native Web предлагают явные преимущества и компромиссы, когда речь идет о совместимости SSR и совместном использовании компонентов между Next.js (веб-приложение) и React Native (мобильное приложение). Давайте сравним их по этим критериям:

1. Совместимость ССР

Тамагуи

• Поддержка SSR: Тамагуи поддерживает SSR «из коробки». Он разработан для хорошей работы с Next.js, обеспечивая рендеринг ваших компонентов на стороне сервера.
• Согласованность: используя Tamagui, вы можете поддерживать единообразные стили и компоненты как в веб-приложениях, отображаемых на сервере, так и в мобильных приложениях, отображаемых на клиенте.

Реагировать на нативную сеть

• Ограниченный SSR: React Native Web имеет больше ограничений, когда дело касается SSR. Многие компоненты и стили полагаются на клиентский JavaScript, что затрудняет полную поддержку SSR без обходных путей, таких как отключение SSR для определенных компонентов.
• Проблемы с гидратацией. Могут возникнуть несоответствия и проблемы с гидратацией при рендеринге веб-компонентов React Native на сервере и их гидратации на клиенте.

2. Общий компонент для Next.js (веб-приложение) и React Native (мобильное приложение).

Тамагуи

• Унифицированный стиль: Tamagui обеспечивает единую систему стилей, которая без проблем работает как в Интернете, так и на мобильных устройствах. Это упрощает поддержку единой базы кода для компонентов пользовательского интерфейса.
• Совместимость с React Native: компоненты Tamagui разработаны таким образом, чтобы быть совместимыми как с React Native, так и с Интернетом, что упрощает создание общих компонентов.

Реагировать на нативную сеть

• Возможность повторного использования компонентов: React Native Web позволяет использовать компоненты React Native в Интернете, что отлично подходит для повторного использования. Однако для корректной работы некоторых компонентов на обеих платформах могут потребоваться изменения.
• Экосистема: он использует экосистему React Native, что позволяет легко повторно использовать широкий спектр библиотек и компонентов, доступных для React Native.

Заключение

1. Тамагуи:

• Плюсы: лучшая поддержка SSR, согласованная система стилей на всех платформах, проще поддерживать единую кодовую базу для компонентов пользовательского интерфейса.

• Минусы: Меньшая экосистема по сравнению с React Native Web.

2. React Native Web:

• Плюсы: более крупная экосистема, прямое использование компонентов React Native в Интернете, обширная поддержка библиотек.

• Минусы: ограниченная поддержка SSR, потенциальные проблемы с гидратацией, могут потребоваться обходные пути для некоторых компонентов.

Рекомендация

Если совместимость SSR является приоритетом и вам нужен беспрепятственный рендеринг на стороне сервера в Next.js, Tamagui — лучший выбор. Он обеспечивает последовательный и надежный подход к SSR, позволяя вам поддерживать общую библиотеку компонентов в Интернете и на мобильных устройствах.

Если вам нужно использовать большую экосистему компонентов и библиотек React Native и вы можете обойти ограничения SSR, React Native Web может подойти, особенно если ваше приложение поддерживает рендеринг на стороне клиента для определенных компонентов.

В конечном счете, выбор зависит от конкретных потребностей и приоритетов вашего проекта. Если SSR и единая система стилей имеют решающее значение, выбирайте Tamagui. Если вам нужна гибкость и экосистема React Native и вы можете справиться с ограничениями SSR, React Native Web — подходящий вариант.