Flaskista Flask+Reactiin

[bonekuukkeli]

Ajattelin sitten kokeilla NextJS:ää. Etusivun siirto ja sen generointi SSR:llä ei ollut kovin kummoinen homma (toki tyylit ym puuttuu vielä), mutta sitten kävin ahneeksi ja ajattelin lisätä seuraavaksi tRPC:n ja Drizzlen.

Saattaa olla, että tRPC on tällä hetkellä tekemätön paikka, kun ohjeita NextJS:n kanssa toimimiseen ei ole hetkeen päivitetty. Sain ehkä tunkattua tuon siltä osin kuntoon, että kun ohjeet on vanhalle PageRouterille ja NextJS:ssähän käytetään nykyään AppRouteria, niin tuo kuitenkin yrittää lähteä käyntiin. Mutta jostain syystä, vaikka olen enabloinut tRPC:ssä SSR:n niin softa silti kaatuu käynnistyksessä ja valittaa, että jostain tRPC:n komponentista puuttuu 'use client':

Error: useState only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/react-client-hook-in-server-component

Call Stack
WithTRPC
(rsc)/node_modules/@trpc/next/dist/withTRPC.mjs (12:43)

Pitänee kokeilla vielä noita Server-Side Helpereitä, jotka ohjeiden mukaan mahdollistavat SSR:n ja SSG:n ilman että tRPC on siinä moodissa.

Taisi uudemmassa NextJS:ssä olla tuo useClient vaatimus erottelemaan client komponentit:

Rendering: Client Components | Next.js

Learn how to use Client Components to render parts of your application on the client.

nextjs.org

 

[Makis]

Jaahas, alkaa vaikuttaa että tRPC:tä ei välttämättä kannata käyttää NextJS:n kanssa. Discordissa on pitkä lista kysymyksiä liittyen ties mihin ongelmiin, eikä mihinkään ole vastattu. Eli ilmeisesti mitään tukea tuolle ei ole luvassa.

 

[Makis]

Taisi uudemmassa NextJS:ssä olla tuo useClient vaatimus erottelemaan client komponentit:

Rendering: Client Components | Next.js

Learn how to use Client Components to render parts of your application on the client.

nextjs.org

Juu, mutta kun pointti olisi nimenomaan tehdä server-side renderingiä niin tuo 'use client' vähän niin kuin pilaa sen. Tuo tarkoittaisi tässä tapauksessa että joka ikinen komponentti, joka hakee dataa on clientilla kuten nytkin. Eipä siinä paljon jää serverille. Enkä minä tuota oikein voi tRPC:n sisälle laittaa muutenkaan.

Tuo 'use client' siis vaaditaan jos komponentissa on käytetty tiettyjä hookeja (useEffect, useState jne).

 

[Makis]

En kyllä tosiaan tiedä, miten tuon tRPC:n voi systeemiä tuntematon saada tällä hetkellä toimimaan järjellisessä ajassa. Joku laittoi linkin projektiin, jossa se on käytössä uuden NextJS:n kanssa, mutta kappas vaan, ovat rikkoneet tRPC:n taaksepäin yhteensopivuuden hiljattain, joten tuokaan esimerkki ei toimi. Pitäisi antaa jotain lisäparametereja alustuksen aikana, mutta missään ei sanota mitä ja dokumentaatio on täysi vitsi. En oikein tiedä, mitä hyötyä on edes laittaa esille dokumentaatiota, jossa yhtään mitään ei ole selitetty. API on siis pelkkä lista funktioita ja luokkia ilman selityksiä saati esimerkkejä. Saan saman dokumentaation editorissa esille code completionilla. Paitsi tietysti siltä osin, että ne toisaalla olevat esimerkit on siis ties miten vanhat, eli täysin virheelliset.

 

[Makis]

Hm, tämä SSR on itselle niin uusi konsepti että aloin miettimään että onkohan tuollainen systeemi välttämättä edes tarpeen? Etuhan tuossa on e2e-tyypitys, eli IDE osaa tarjota kaikki rajapintafunktiot code completionissa. Mutta onkohan pelkästään tuo vaivan väärtiä?

 

[Makis]

Tulipas muuten sopivasti elämää helpottava parannus Codeen. Siinähän on sellainen semisti hölmö ominaisuus, että jokainen routen pään sisältävä tiedosto on nimeltään page.[jsx|tsx]. Siis tiedostopolku on se polku millä tuohon viitataan tuo ja tiedosto renderöidään.

Kun kokeilin NextJS:ää syksyllä, niin editorissa oli helposti joku 10 page.tsx:ää auki yhtä aikaa. Löydäpä sieltä se haluamasi. Ajattelin jo kiertää tämän tekemällä page-tiedostoon funktion joka vain palauttaa sen varsinaisen komponentin - se ei siis sisältäisi muuta kuin return <SeKomponenttiJossaActionitOnOikeasti />.

Mutta just uusimmassa Coden päivityksessä tuli mahdollisuus määritellä noiden tiedostotabien otsikot haluamallaan tavalla. Kun määrittelee avaimeksi **/page.tsx ja arvoksi ${dirnama} - ${filename} niin otsikko onkin esimerkiksi "app - page". Problem solved.

 

[Makis]

Koitin vaihtaa systeemin Viteen kun löytyi parit ohjeet, jotka vaikuttivat siltä että homma olisi helppo. No, eihän homma mennyt minkään ohjeen mukaan, ensi töikseen piti siivoilla pois moduleita, joiden kanssa Vite ei suostunut millekään.

Mutta nyt tuli sitten erikoinen juttu. Sain toimimaan lokaalisti, mutta kun buildasin ja kopsasin serverille, niin etusivu aukeaa, mutta näyttää siltä että bäkkäri ei toimi ollenkaan ja kaikkiin linkkeihin on tullut teksti "undefined" linkin osoitteseen (siis serverin nimen jälkeen). Tuossa ei pitäisi olla mitään muuttujaa. Ei ainakaan äkkiseltään löydy mitään vinkkiä että mikä mättää, piti palauttaa vanha versio takaisin toistaiseksi.

Karkeasti stepit oli siis:

1. npm uninstall react-scripts
2. npm install vite @vitejs/plugin-react --save-dev
3. Fiksaa package.json:sta scriptsit paikalleen ("start": "vite" ja sitä rataa)
4. Luo vite.config.js ja lisää sinne conffit.
5. Muokkaa tsconfig.json:ia, pitää vaihtaa target ESNext:ksi ja typesiin "vite/client"
6. Siirrä public/index.html juureen.
7. Lisää <script type="module" src="/src/index.jsx"></script> index.html:n bodyyn.

Jännä muuten että vite on asennettu, mutta kun yrittää ajaa sen komentorivillä, niin ei löydy. Siis tästä devauskoneestakaan. Viten ohjeet muuten väittävät, että buildin pitäisi tulla dist-kansioon, vaan ei ainakaan minulla. Buildiin tuntuvat ilmaantuvan.

Yksi mitä en hiffaa on se, että pitääkö serverille asentaa vielä jotain paketteja vai riittääkö että kopioi build-kansion vanhaan tapaan?

Ei kun taisi tuohon ongelmaan löytyä syy: jostain syystä vaikka olen tuon index.html:n kopioinut ja muokannut, niin build-kansiossa oleva index.html ei sisällä tuota muokkausta. Toisin sanoen koko sovellus on vain tuo index.html ja kuvat. Mutta ei kyllä hajuakaan mistä tuo voisi johtua.

 

[Makis]

8. Muista päivittää _myös_ .env.production ja yllättäen ongelma poistuu.