Тюнинг производительности Next.js-приложений

Бен Шварц поделился рекомендациями по улучшению производительности Next.js-приложений — "Next.js Performance: Making a Fast Framework Even Faster".

Для загрузки сторонних скриптов рекомендуется использовать компонент next/script со стратегией lazyOnload, чтобы код начинал грузиться тогда, когда завершается загрузка основного кода приложения. Для вставки изображений рекомендуется использовать компонент next/image. Он берёт на себя конвертацию изображений, генерацию плейсхолдеров и поддержку ленивой загрузки. Для уменьшения размера основного бандла приложения можно использовать динамическую загрузку кода с помощью import(). Для динамической загрузки React-компонентов — хелпер next/dynamic.

Полезная статья. Рекомендую почитать, если работаете с Next.js.

#jsframeworks #performance #react

https://calibreapp.com/blog/nextjs-performance

🛠 Tramvai — Фреймворк для создания универсальных react-приложений с модульной структурой и упором на производительность.

🌍 Сайт

Daily Coding #инструменты #React

🛠 React Credit Cards - cовременный и красивый компонент для кредитных карт, который можно использовать для оплаты. В него встроен валидатор кредитных карт, который проверяет номер карты и распознает тип карты. Он поддерживает все типы кредитных карт, доступные для оплаты.

🌍 Сайт

Daily Coding #инструменты #React

🛠 redocx - библиотека React для создания документов word. Она позволяет создавать текстовые документы с помощью компонентов React, а затем отображать их в Word с помощью командной строки. В ней есть компоненты для таблиц, изображений, верхних и нижних колонтитулов и всего остального, что вам может понадобиться.

🌍 Сайт

Daily Coding #инструменты #React

🛠 react-imgpro - компонент React для обработки изображений. Он позволяет изменять изображение с помощью фильтров, а затем экспортировать его в формат base64. Он очень прост в использовании, вам просто нужно указать URL-адрес вашего изображения, фильтры, которые вы хотите применить, а также размер и формат вывода.

🌍 Сайт

Daily Coding #инструменты #React

🛠 React Simple Maps - библиотека компонентов React для создания карт на основе SVG. В ней есть компоненты для добавления всевозможных деталей карты, таких как текстовые аннотации, маркеры и пользовательские цвета для каждого региона. Поскольку карты основаны на SVG, их можно увеличивать и уменьшать с большой эффективностью.

🌍 Сайт

Daily Coding #инструменты #React

🛠 Nexting - это статический генератор веб-сайтов и блогов, работающий на базе серверной библиотеки рендеринга React Next.js. Установка и настройка относительно просты, поскольку контент написан в Markdown и организован с использованием компонентов React.

🌍 Сайт

Daily Coding #инструменты #React

🛠 Цель Ink - обеспечить тот же процесс создания пользовательского интерфейса на основе компонентов, что и в React, но для приложений командной строки. Он реализует минимально необходимую функциональность React с помощью Redux, доступного в качестве дополнительного дополнения.

🌍 Сайт

Daily Coding #инструменты #React

📖Advanced Data Fetching Patterns in React
🖋Juntao Qiu | 2024

Если вы разрабатываете приложения React с богатой интеграцией API, вы, возможно, заметили тенденцию: чем сложнее становится ваше приложение, тем медленнее и громоздче оно кажется. Эта проблема слишком распространена в современной среде веб-разработки, где интеграция многочисленных функций и источников данных может привести к снижению производительности и усложнению кода. Кроме того, область асинхронного программирования добавляет еще один уровень сложности, из-за чего отладка часто напоминает блуждание по лабиринту в кромешной тьме.

💾 Скачать книгу

Daily Coding #книги #React

📖Building Micro Frontends with React 18
🖋Vinci J Rufus | 2023

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

💾 Скачать книгу

Daily Coding #книги #React

📖Large Scale Apps with React and TypeScript
🖋Damiano Fusco | 2023

Эта книга - руководство для разработчиков, которые хотят создавать крупномасштабные интерфейсные приложения с помощью React и TypeScript. С развитием веб-разработки и разработки мобильных приложений растет спрос на надежные, масштабируемые и поддерживаемые интерфейсные решения. В этой книге представлен комплексный подход к созданию крупномасштабных баз кода, использующих React и TypeScript.

💾 Скачать книгу

Daily Coding #книги #React #TypeScript

📖Master React in 5 Days
🖋Eric Sarrion | 2023

Вы мечтаете освоить React, не тратя месяцы на бесконечные обучающие программы? Тогда эта книга для вас! Всего за пять дней вы приобретете фундаментальные навыки, необходимые для того, чтобы приступить к разработке исключительных приложений с использованием этой революционной технологии. Независимо от того, предпочитаете ли вы читать книгу самостоятельно или вместе с другими онлайн-ресурсами, она послужит вам прочной основой для использования всего потенциала React.

💾 Скачать книгу

Daily Coding #книги #React

📖React 18 Design Patterns and Best Practices
🖋Карлос Сантана Рольдан | 2023

Погрузитесь в процесс и узнайте, как создавать потрясающие веб-приложения React, которые можно масштабировать и поддерживать, используя шаблоны проектирования и новейшие отраслевые разработки.

💾 Скачать книгу

Daily Coding #книги #React

📖React. Сборник рецептов
🖋Дэвид Гриффитс | 2023

Книга посвящена практическому применению фреймворка React. Описано создание простых приложений и приложений со сложным интерфейсом, рассмотрены вопросы маршрутизации в приложениях и управление их состоянием. Даны примеры реализации интерактивного взаимодействия с пользователем,подключения к различным службам бэкенда, таким как REST и GraphQL, описана работа с библиотеками компонентов. Подробно рассматривается безопасность приложений, процесс их тестирования, даны советы по обеспечению доступности. Приводятся практические рекомендации по повышению производительности и созданию прогрессивных веб-приложений.

💾 Скачать книгу

Daily Coding #книги #React

📖Full Stack Django and React
🖋Kolawole Mangabo | 2023

Создавайте профессиональные веб-приложения, готовые к работе в облаке, от интерфейса до серверной части, используя новейшие возможности Django и React

💾 Скачать книгу

Daily Coding #книги #Python #React

📖ReactJS for Jobseekers
🖋Каифи Хан | 2023

Создавайте высокопроизводительные, динамичные одностраничные приложения, используя самый популярный интерфейсный фреймворк - ReactJS

💾 Скачать книгу

Daily Coding #книги #React

🛠 Griddle - это полезный грид-компонент, использующий React. Благодаря множеству мощных функций, таких как фильтрация, подкачка по страницам, бесконечная прокрутка и дополнительные сетки, вы можете легко настроить его под свой проект. Рендеринг оптимизирован таким образом, что генерируется только текущая страница результатов.

🌍 Сайт

Daily Coding #инструменты #React

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

🌍 Сайт

Daily Coding #инструменты #React

🛠 React Static - фреймворк для статического сайта React, созданный компанией Nozzle.io. Он обладает невероятно быстрым временем запуска и производительностью сборки и предлагает потрясающий пользовательский опыт. При создании полностью используется React, он поддерживает всю экосистему React, включая библиотеки CSS-in-JS, GraphQL и Redux.

🌍 Сайт

Daily Coding #инструменты #React

🛠 Smooth UI — библиотека компонентов с открытым исходным кодом, созданная на основе React и стилизованных компонентов. Она обеспечивает удобство и доступность для разработчиков и предлагает простой способ создания красивых веб-сайтов и приложений. Ее можно расширить или настроить с помощью пользовательских тем.

🌍 Сайт

Daily Coding #инструменты #React