inreal.studio3D-студия сайтын әзірлеу
3D-студия сайтының кейсі. Next.js ISR арқылы интеграцияланған админ панелі мен анимациясы бар жоғары өнімді frontend құрылды.
Тапсырыс беруші жаңа жоба — 3D-студияға арналған веб-сайт әзірлеуді сұрады. Бастапқыда тек 2 бет қана болды — басты бет және портфолио (ол 4 санатқа бөлінеді), сондай-ақ бірнеше қалқымалы (pop-up) терезелер қарастырылды.
Клиенттің екі басты талабы — SEO және портфолиоға жаңа жұмыстарды оңай қосу мүмкіндігі болды.
Frontend
Сол себепті frontend үшін Next.js таңдалды, өйткені ол бұл тапсырмаларға өте мінсіз сәйкес келеді. Біріншіден, техникалық тұрғыдан бұл SPA, сондықтан беттер арасындағы барлық ауысулар тек бір беттің ішіндегі өзгерістер болып табылады. Қолданушылар бұны байқамайды, бірақ бұл, мысалы, қалқымалы терезені жеке бетке айналдыруға мүмкіндік береді, ал бұл SEO үшін өте маңызды. Екіншіден, ол ISR технологиясын қолдайды — беттер белгілі бір уақыт аралығында қайта генерацияланып тұрады, бұл серверге де, пайдаланушының браузеріне де түсетін жүктемені азайтады.
Backend
CMS ретінде WordPress таңдалды. Жалпы алғанда, бұл 2026 жылы ең үздік идея сияқты көрінбеуі мүмкін. Дегенмен, веб-әзірлеу нарығында қазіргі уақытта тек PHP-хостинг қана өте арзан тұрады және WordPress-пен жұмыс істеуді мүлдем бәрі біледі. Жеке backend жазу әзірлеу бюджетіне қатты әсер етер еді, ал Node.js негізіндегі дайын CMS таңдау VPS жалдауды талап етеді, ал бұл да кәдімгі файлдық хостингке қарағанда айтарлықтай қымбатырақ.
Нәтижесінде біз әзірлеу бюджетін де, хостинг бюджетін дә үнемдедік. Бұл ретте WordPress құралы Headless CMS ретінде қолданылады, бұл кез келген уақытта кез келген компонентті үлкен қиындықсыз қайта жинауға мүмкіндік береді.
Node.js CMS JavaScript тілінде жазылған. Олар заманауи әрі жылдамырақ, бірақ оларға арналған әзірлеушілер саны аз және хостинг үшін VPS қажет. Индустрияның даму бағыты мұны әлдеқайда қымбат қылды, бұл шағын жобалар үшін аса тиімді емес.
Дәстүрлі CMS жүйесінде лейаут (сайттың сыртқы көрінісі) пен админ панелі бір жерде орналасады. Бұл жағдайда, егер клиент админ панелін толық өзгерткісі келсе (мысалы, трафик күрт өсіп, ескі панель төтеп бере алмаса немесе оның мүмкіндіктері жеткіліксіз болса), бүкіл тақырыпты (theme) қайта құруға тура келеді.
Ал Headless CMS-те олар бір-бірінен толық оқшауланған. Егер клиент админ панелін жаңартқысы келсе, шаблонға тек шағын ғана өзгерістер енгізу қажет болады.
Басты бет
Анимациямен жұмыс істеу барысында бірнеше мәселелер туындады. Біріншіден, оны таза JS-пен құрастыру үлкен қателік болды — бастапқыда мен бұл процесті жеңілдетеді (өйткені анимация аса күрделі емес) және сайттың жүктелу жылдамдығын арттырады деп ойладым. Тәжірибеде бәрі керісінше болып шықты. Бірақ ең бастысы, бұл соңғы нәтижеге дерлік ешқандай әсер еткен жоқ.
Портфолио
Портфолио санаттарға бөлінген және әр жобаның өз тегтері бар. Жоғарыда айтылғандай, ол WordPress-тен жүктеледі. Мұнда ISR енгізілді — бет әдеттегідей әр пайдаланушы сұранысы сайын емес, әр 10 минут сайын қайта генерацияланады. Бұл жүктеу уақытын айтарлықтай қысқартады және серверге түсетін күшті азайтады.
Next.js құралының app router жүйесінің арқасында әрбір санат жеке бет болып табылады, ал ортақ элементтер басқа құралдардағыдай бірнеше рет емес, тек бір-ақ рет жүктеледі.
Кейстерді (және жаңа санаттарды) WordPress админ панелінде жасауға, өшіруге және ретін өзгертуге болады, содан кейін Next.js әр уақыт сайын сұраныс жасамай-ақ, дайын бетті генерациялайды.
Қызметтер
Біраз уақыттан кейін қызмет көрсету беттерін қосу қажеттілігі туындады. Ондағы навигация элементтері кейстер бетіндегімен бірдей. Бірақ мен қызметтер саны өсуі мүмкін сценарийді де алдын ала ескердім
Қорытынды
Бұл жобадан мен қандай қорытынды жасадым? Шын мәнінде, өте көп. Қате шешімдердің ішінде, жоғарыда атап өткенімдей, анимацияларды таза JS арқылы жасау таңдауы болды. Қазір мен motion немесе GSAP қолданар едім. Екінші жағынан, WordPress интеграциясы кезінде кейбір кедергілер болғанымен, менің ойымша, ол өте жақсы үйлесті — біз әзірлеу бюджетін де, хостинг бюджетін де үнемдедік.
Жалпы алғанда, кез келген жобадағыдай, мен бұл жобадан да көптеген жаңа нәрселерді үйрендім және тіпті ең тәжірибелі әзірлеуші де кезекті жобаны аяқтағаннан кейін осылай айта алады деп сенемін.