inreal.studioРазработка сайта для 3D-студии
Кейс разработки сайта для портфолио и услуг 3D-студии. Реализовал фронтенд с анимациями, админ-панель и интегрировал их с использованием ISR
Заказчик обратился за разработкой нового проекта - сайта 3D-студии. Изначально было 2 страницы - главная и портфолио (которое делится на 4 категории), а ещё несколько всплывающих окон.
Двумя главными требованиями заказчика были SEO и возможность удобно добавлять новые работы в портфолио.
Фронтенд
Поэтому для фронтенда был выбран Next.js, так как он идеально подходит под задачи - во первых, технически это SPA, поэтому все переходы по страницам - это просто изменение одной страницы. Посетитель этого не замечает, но это позволяет, к примеру, делать так, чтобы всплывающее окно было отдельной страницей, а это важно для SEO. Во вторых он умеет делать ISR - страницы будут генерироваться раз в какое-то время, мы снизим нагрузку и на сервер, и на браузер пользователя.
Бекенд
В качестве CMS был выбран WordPress. В целом - это не самая лучшая идея в 2026. Но веб-разработка сложилось так, что только PHP-хостинг стоит копейки, а с WordPress умеют работать абсолютно все. Если писать свой бекенд - это сильно ударит по бюджету разработки, если брать готовые CMS на Node.js - придется арендовать VPS, а это тоже значительно дороже, чем обычный файловый хостинг.
Получается, мы сэкономили и бюджет на разработку, и на хостинг. А WordPress используется как Headless CMS, благодаря чему любое звено можно в любой момент переделать без особых трудностей.
CMS на Node.js написана на JavaScript. Они современнее и быстрее, но под них меньше разработчиков, а для хостинга нужен VPS. Индустрия сложилась так, что это намного дороже, а для маленьких проектов не имеет особого смысла.
В обычной CMS верстка (то есть внешний вид сайта) и админ-панель находятся в одном месте. В таком случае, если заказчик захочет полностью переделать админ-панель (например, если посетителей резко станет больше и старая перестанет справляться, или если возможностей старой перестанет хватать), придется полностью переделывать тему.
В Headless CMS они полностью изолированы, и если заказчик решит переделать админ-панель, в шаблон будут внесены лишь незначительные изменения.
Главная
По ходу работы с анимацией, возникло несколько проблем. Во-первых, делать ее на чистом JS было фатальной ошибкой - изначально, как я думал, это упростит работу (так как анимация не очень сложная) и увеличит скорость загрузки сайта. На деле все вышло ровно наоборот. Но главное, на конечный результат это практически не повлияло.
Портфолио
Портфолио делится на категории, а каждая работа имеет теги. Как и говорил ранее, оно загружается из WordPress. Тут был реализован ISR - страница генерируется раз в 10 минут, а не при каждом заходе пользователя как обычно. Это сильно сокращает время загрузки и уменьшает нагрузку на сервер.
Благодаря app-роутеру Next.js, каждая категория - это отдельная страница, при этом общие элементы загружаются всего один раз, а не несколько, как это было бы при использовании других инструментов.
Кейсы (и новые категории) можно создавать, удалять и менять местами в админ-панели WordPress, затем Next.js генерирует готовую страницу, а не делает запросы каждый раз.
Услуги
Спустя некоторое время появилась необходимость добавить страницы с услугами. Элементы навигации там ровно такие же, как и на странице с кейсами. Но я предусмотрел и ситуацию, если услуг вдруг станет больше
Заключение
Какие выводы я сделал из этого проекта? На самом деле, их очень много. Из неправильных решений - как я и говорил - было решение делать анимации на чистом JS. Сейчас я бы использовал motion или GSAP. А вот WordPress, хотя и его интеграция не было беспроблемной, по моему мнению вписался сюда отлично - мы сэкономили и бюджет на разработку, и на хостинг.
В целом, как и из любого проекта, из этого я узнал много нового, и, думаю, даже самый опытный разработчик, может сказать это после очередного проекта.