Next.js princip funkce na řešené úloze

[registrovany123]

Řekněme jako příklad, že bych měl web:

• eRecepty.cz
  

Ten by měl 3 pages:

• Home (Landing page)
• Recepty
• Ingredience

Uživatel přijde na landing page a v menu si vybere Recepty. Zde bude chtít vyrábět nový Recept "Kůře s bazalkovou omáčkou". V průběhu tvorby bude přidávat ingredience a zjistí, že chybí v databázi ingredience "Bazalka". Klikne proto na page Ingredience, vyrobí novou ingredience "Bazalka", a jde zpět na page Recepty, kde pokračuje v rozpracovaném receptu "Kůře s bazalkovou omáčkou". Poté klikne na Uložit a nový Recept je vytvořen.

implementace v React.js

V Reactu můžu udělat klasickou SPA se Store, do kterého budou načtené Recepty i Ingredience, a přepínání mezi page Recepty a Ingredience tak proběhne bez ztráty Store. Uživatel díky tomu bude mít rychlé přechody, a taky může na stránce Recepty dál pokračovat v rozpracovaném receptu.

Implementace PHP (Nebo jiný SSR) a Alpine.js (nebo jQuery)

Pro lepší SEO můžu použít kombinaci výše evedeného, tedy Home, Recepty i Ingredience jsou vrácené jako SSR (z PHP), a ve "<script>" se nechází oživení webu přes Javascript pomocí Alpine.

Avšak bez implementaci nějakého "handmade" store ukládaného do LocalStorage browseru nebude mít user ten zážitek, že může mít rozpracovaný Recept "Kůře s bazalkovou omáčkou", kde následně do Ingredience něco přidá, klikne zpět na Recepty a může pokračovat kde předtím skončil. (Jako kdyby měl Excel a v něm kartu "Recepty" a "Ingredience")

Next.js

Tak a teď přijde ta pointa. Zkoumám právě ten Next.js, a nemůžu si pomoct, ale nevidím, jakou přidanou hodnotu dostanu oproti kombinaci "PHP + Alpine.js", nebo "Python Django + Alpine" atp. Resp. výhodu momentálně vidím zatím jen v těchto věcech:

• Můžu použít Tailwind, s PHP+Alpine bych nemohl
• Diskutabilní výhoda: Můžu mít na backendu Javascript - já však stáe preferuje na backendu jiný jazyk.

Tedu pro mě je teď jediné dilema a to je použití Tailwind. Mimochodem, je to odemě sice asi škaredé, ale ač je Tailwind krásný, sám jsem si zkusil, že jeho templates jdou 1:1 okopírovat a udělat v CSS. Ale je to dilema, protože Tailwind to samozřejmě zjednodušuje.

[Reklama]

[Filip Jirsák]

S Next.js to můžete udělat stejně jako s PHP, stejně jako s React.js SPA, a navíc ještě asi 20 dalšími způsoby, které kombinují vlastnosti obou přístupů.

Tailwind můžete použít i s PHP, akorát si možná budete muset některé věci kolem buildu zařídit sám. i Když mám takové tušení, že už jsem někde četl i o nějakém projektu, který řeší Tailwind pro PHP.

I když se tu zeptáte ještě osmkrát, nikdo ten technologický stack za vás nevybere. Neexistuje jeden technologický stack vhodný pro vše. Volbu ovlivňují i takové věci, jako s čím má tým zkušenosti, jaké technologie používá na jiné projekty nebo naopak že chce nějakou novou technologii vyzkoušet.

Pokud chcete použít PHP, tak použijte PHP.

Tedu pro mě je teď jediné dilema a to je použití Tailwind. Mimochodem, je to odemě sice asi škaredé, ale ač je Tailwind krásný, sám jsem si zkusil, že jeho templates jdou 1:1 okopírovat a udělat v CSS. Ale je to dilema, protože Tailwind to samozřejmě zjednodušuje.

Není to od vás škaredé, spíš to svědčí o tom, že jste konečně pochopil princip fungování CSS knihoven. Ty vskutku nedělají nic, co by nešlo udělat pomocí čistého CSS – akorát se používají jednodušeji. Ostatně to samé platí i o JavaScriptových knihovnách a frameworcích. To není žádná magie, je to jen JavaScriptový kód, který napsal někdo jiný.

[to_je_jedno]

Můžeš to krásně vyřešit v Drupalu- no code. Easy. Budeš se muset naučit tvorbu šablon.

Nebo si ho necháš jak CMS a fronted uděláš v Nextu a data z Drupalu. Next + Tailwind najdeš vývojáře na každým rohu.

Ma to výhody i nevýhody. Záleží kolik tomu chceš dat. Obojí je v pohodě dockerizovatelny, všude milion návodu.

[registrovany123]

Takže mini-prjekt v Next.js hotov, funguje to velice dobře, a jediné, co mi na tom vadí, že dlouho trvá na hosting serveru build, takže nemůžu jen tak něco jenom upravit a udělat redeploy.

Na stranu druhou, má to až velice vysoké SEO, podle pagespeed.web.dev jsou všechny metriky skoro na 100%.

Výhoda teda je, že to má naprosto elegantně vyřešenou integraci s Reactem, takže jenom píšu jak jsem zvyklýu v Reactu, a Next.js to magicky zkompiluje do SSR page kterou vrátí.

V podstatě to udělá to, že to zkompilje React page do javascripotových příkazů, které se na stránce nacházejí ve <script>.

Je to jako kdybyuch použil třeba PHP a k tomu do script psal něco v jQuery, tak přesně takhle vypadá zkompilovaný výstup z toho Next.js.

[to_je_jedno]

Build dneska trva nejaky cas i pri pouziti PHP (a treba i bez FW) kdyz to mas v pipeline atd.

Zalezi co myslis tim, ze musis pokazde delat redeploy, to mas data v souborech v projektu nebo tim myslis zmenu vizualna? Ja normalne z CMS poslu webhook na /api/revalidate (prikladu je vsude mraky) a nemusim nic deployovat. Deploy delam jen pri code change, data jsou jinde. Ale to zalezi jak si to postavis no.

[Reklama]

[Filip Jirsák]

Takže mini-prjekt v Next.js hotov, funguje to velice dobře, a jediné, co mi na tom vadí, že dlouho trvá na hosting serveru build, takže nemůžu jen tak něco jenom upravit a udělat redeploy.

Jestli máte Vercel zdarma, tak se nedivte – přednost mají platící zákazníci. Pokud nemáte velkou aplikace se stovkami stránek, nebo nemáte něco špatně, je build během pár vteřin. Ale obvykle si nějakou dobu počkáte, než na vás přijde řada.

A teda za mne je pořád nesrovnatelně pohodlnější udělat push na GitHub a dál se o to nestarat a vědět, že za minutu či dvě bude nasazená nová verze (a když něco selže, přijde mi e-mail), než přes FTP ručně nebo nějakým vlastním skriptem nahrávat novou verzi PHP aplikace.

[registrovany123]

Když udělám projekt Python Bottle + Vue.js, nebo React.js, tak provedu změnu kdekoliv, BE nebo FE, a potom jenom udělám:

Kód: [Vybrat]

rsync -arv -v -e "ssh -p 12339" --exclude .git --exclude data --exclude='web/asset/*chart*.png' ../$project_name $remote_server:$target_folder

A je to hotovo, za 1 vteřinu mám změnu aplikovanou. Technicky vzato můžu dělat development přímo na hosting serveru. Na druhou stranu, profesionální web běžící v produkci asi těžko někdo bude jen tak jak se mu zlíbí modifikovat, aniž by to neotestoval u sebe na localhostu.

Vercel nepoužívám, ani žádnou jinou věc od nich.

[to_je_jedno]

Kdyz udelam zmenu v Nextu (ale stejne tak v PHP backendu) tak udelam git commit && git push a je hotovo, nekde se neco pres GitLabu pošolicha na VPS, nasadi se mi dev environment k nahledu, kdyz projdou testy tak mergnu MR, nasadi se staging... vsak to znas.

Delat neco jako deploy do bezici sluzby rucne? Ses pos*al v kině? A to myslim i u zakladnich hobby projektu. Na cem jinym se to chces naucit delat lepe?

[Filip Jirsák]

Když udělám projekt Python Bottle + Vue.js, nebo React.js, tak provedu změnu kdekoliv, BE nebo FE, a potom jenom udělám:

Kód: [Vybrat]

rsync -arv -v -e "ssh -p 12339" --exclude .git --exclude data --exclude='web/asset/*chart*.png' ../$project_name $remote_server:$target_folder

A je to hotovo, za 1 vteřinu mám změnu aplikovanou. Technicky vzato můžu dělat development přímo na hosting serveru. Na druhou stranu, profesionální web běžící v produkci asi těžko někdo bude jen tak jak se mu zlíbí modifikovat, aniž by to neotestoval u sebe na localhostu.

Vercel nepoužívám, ani žádnou jinou věc od nich.

Nic vám nebrání stejně to udělat i pro projekt v Next.js. Akorát že ten váš způsob vám ten projekt po dobu synchronizace rozbije a uživatelům to bude způsobovat chyby – ať už je ten projekt napsaný v PHP, v JavaScriptu, Pythonu nebo v čemkoli jiném.