Dzięki Artur za wyjaśnienie tematu. Akurat jeszcze nic nie pisze w next, ale jak zawsze zobrazowales to tak, że laik to zrozumie :). Warsztaty zakupione, czekamy :)!
Brawo Artur, bardzo fajny materiał - podoba mi się podejście teoria / praktyka, czasem tak się skupiamy na syntaxie że gubimy całościoy obraz i co kiedy użyć. Jeżeli chciałbyś poprawić jakieś rzeczy to myślę, że używanie prawdziwych przykładów fajnie się sprawdza (szkołą Wes Bosa) - np nie param: req.query.param tylko req.query.name. Druga rzecz to polecam skróty klawiszowe - kopiowanie linijki czy usunięcie bez myszki fajnie przyśpiesza pracę. Piona!
Wygląda super! Artur do kiedy będzie można się zapisywać na warsztaty? Właśnie robię prostą stronkę + backend i myślę że mógłbym zastąpić to Next'em. Spadłeś z tym jak z nieba :)
Jeśli mam załóżmy 10000 produktów lub czegokolwiek innego i chce je mieć w formie listy na stronie głównej, mogę użyć getStaticProps, żeby serwer zwracał html ul z 10000 li i nie będzie muliło czy jednak w getServerSideProps zaimplementować paginację lub dynamic scroll? Skoro next wzraca statyczną stronę, wydaje mi się że można pokusić się o pierwszy sposób, bez pytania api o kolejne produkty, bo są już na sztywno w html, jak myślisz? Zrobisz krótki film z eksperymentem? :)
Szczeczaczoszczeczek trochę akademicki przykład dałeś :p rzadko wyświetlanie na raz 10000 produktów ma sens. Możesz to wrzucić na pałę do html, ale ktoś na wolnym/słabym urządzeniu i tak będzie miał problemy w załadowaniu tego do przeglądarki. O filtracji/wyszuwaniu nie wspominając. Nawet jak się to statycznie wygeneruje nie wiele to zmieni. Będę robił coś o paginacji to pokażę sposób getStaticProps + getStaticPaths. Wtedy możesz na etapie buildu produkować podstronę dla każdej strony wyników. Można też zrobić paginacje dla pierwszych 10 stron a resztę dobudować dynamicznie
Czy małe strony bez backend'u napisane w Next.js są równie wydajne jak strony zrobione w Gatsby.js ? Pytam, ponieważ od momentu aktualizacji po której w Next.js można też budować strony SSG chciałbym się skupić tylko na tym jednym framework'u. Na internecie czytam, że powinno się używać Next.js jeżeli strona będzie się rozrastać. Czy to oznacza, że gdy nie będzie się rozrastać, tylko będzie to mała strona albo strona bez backendu to Gatsby.js jest pod jakimś względem lepszy ?
Dawid Mroczkowski te narzędzia są pod względem SEO identyczne bo umożliwiają generowanie statycznych stron. Ja personalnie wolę Nexta. Moim zdaniem jest bardziej elastyczny zarówno do małych i dużych projektów. Uważam też że łatwiej w niego wdrożyć inne osoby
A co w przypadku gdy masz sklep + panel admina w którym admini przykładowo zmieniają sobie dane/ceny produktów itp? Raczej sklep powinien dbać o SEO więc powinny być wyrenderowane strony produktów, jednak z drugiej strony admini zmieniają cenę która musi się od razu aktualizować na sklepie. Co w takim przypadku?
Jest kilka rozwiązań: 1. Zmiana ceny = przebudowa (dla małych sklepików spoko) 2. Dodanie invalidate, że np. Strony przebudowują się co 1h 3. Napisanie logiki która przy dodawaniu do koszyka upewnia się że cena jest odpowiednia i informuje usera o zmianie (to raczej rozwiązanie dla kantorów albo innych branż gdzie cena może być ustawiana automatycznie lub przez jakieś boty) 4. Całą stronę budujesz statycznie za wyjątkiem komponentu dodaj do koszyka (on za każdym razem odpytuje serwer po aktualna cenę). Oczywiście w zależności od potrzeb powyższe rozwiązania można łączyć 😊
@@ArturChmaro Tu właśnie dosyć większy problem gdyż dosłownie wszystko podlega edycji poczynając od nazwy produktu, zdjęć na cenie kończąc :D Czyli kontynuując pytanie, z tego co widzę całym sklepie jest stosowane getInitialProps, tzn że to rozwiązanie jest niezbyt pod SEO?
jak zabezpieczyć kod backendu przed wyciekaniem do kodu klienta UI? Wystarczy że utworzysz jakąś metodę prywatną w plikach /api.... metody te lądują na froncie.
Cały kod który umieścisz w folderze api jest wykonywany po stronie serwera i nie ma możliwości by został dołączony do builda UI. Skąd pomysł że te metody lądują na froncie?🤔
@@ArturChmaro niestety kod jest dołączany. przejrzyj zgłoszoną dyskusję github "Security: Backend details are too easy to leak" (dałbym linka ale YT usuwa komentarze).
@@Prim12398 o cholera wygląda faktycznie na to, że jest jakiś bug. Nie doświadczyłem tego bo w api korzystam po prostu z funkcji a z nimi nie ma problemu. Odpowiadając na Twoje pytanie póki Vercel się nie ogarnie jedynym zabezpieczeniem jest: nie używanie klas w /api, trzymanie tokenów/sekretów w envach
@@ArturChmaro tak ale nawet "ENV" nie ochroni nas przed wystawianiem implementacji hakerom do przejrzenia i znalezienia luk w systemie. Niestety pracownik Vercel utrzymuje, że to taki design. :(
✅ Zapisz się na Warsztat z Next.js:
fullstak.pl/warsztaty-next
Dzięki Artur za wyjaśnienie tematu. Akurat jeszcze nic nie pisze w next, ale jak zawsze zobrazowales to tak, że laik to zrozumie :). Warsztaty zakupione, czekamy :)!
Brawo Artur, bardzo fajny materiał - podoba mi się podejście teoria / praktyka, czasem tak się skupiamy na syntaxie że gubimy całościoy obraz i co kiedy użyć. Jeżeli chciałbyś poprawić jakieś rzeczy to myślę, że używanie prawdziwych przykładów fajnie się sprawdza (szkołą Wes Bosa) - np nie param: req.query.param tylko req.query.name. Druga rzecz to polecam skróty klawiszowe - kopiowanie linijki czy usunięcie bez myszki fajnie przyśpiesza pracę. Piona!
Dzięki za konstruktywny feedback! Postaram się więcej korzystać ze skrótów i jeszcze lepszych prawdziwych przykładów 😇
Wygląda super! Artur do kiedy będzie można się zapisywać na warsztaty? Właśnie robię prostą stronkę + backend i myślę że mógłbym zastąpić to Next'em. Spadłeś z tym jak z nieba :)
Bartłomiej Mazur do 18 października są zapisy 😊
Jeśli mam załóżmy 10000 produktów lub czegokolwiek innego i chce je mieć w formie listy na stronie głównej, mogę użyć getStaticProps, żeby serwer zwracał html ul z 10000 li i nie będzie muliło czy jednak w getServerSideProps zaimplementować paginację lub dynamic scroll? Skoro next wzraca statyczną stronę, wydaje mi się że można pokusić się o pierwszy sposób, bez pytania api o kolejne produkty, bo są już na sztywno w html, jak myślisz? Zrobisz krótki film z eksperymentem? :)
Szczeczaczoszczeczek trochę akademicki przykład dałeś :p rzadko wyświetlanie na raz 10000 produktów ma sens. Możesz to wrzucić na pałę do html, ale ktoś na wolnym/słabym urządzeniu i tak będzie miał problemy w załadowaniu tego do przeglądarki. O filtracji/wyszuwaniu nie wspominając. Nawet jak się to statycznie wygeneruje nie wiele to zmieni.
Będę robił coś o paginacji to pokażę sposób getStaticProps + getStaticPaths. Wtedy możesz na etapie buildu produkować podstronę dla każdej strony wyników. Można też zrobić paginacje dla pierwszych 10 stron a resztę dobudować dynamicznie
Czy małe strony bez backend'u napisane w Next.js są równie wydajne jak strony zrobione w Gatsby.js ? Pytam, ponieważ od momentu aktualizacji po której w Next.js można też budować strony SSG chciałbym się skupić tylko na tym jednym framework'u. Na internecie czytam, że powinno się używać Next.js jeżeli strona będzie się rozrastać. Czy to oznacza, że gdy nie będzie się rozrastać, tylko będzie to mała strona albo strona bez backendu to Gatsby.js jest pod jakimś względem lepszy ?
Dawid Mroczkowski te narzędzia są pod względem SEO identyczne bo umożliwiają generowanie statycznych stron. Ja personalnie wolę Nexta. Moim zdaniem jest bardziej elastyczny zarówno do małych i dużych projektów. Uważam też że łatwiej w niego wdrożyć inne osoby
Łapsko w górę !! 😅
ISR rozwiąże problem z getStaticProps?
GoodJob!
A co w przypadku gdy masz sklep + panel admina w którym admini przykładowo zmieniają sobie dane/ceny produktów itp?
Raczej sklep powinien dbać o SEO więc powinny być wyrenderowane strony produktów, jednak z drugiej strony admini zmieniają cenę która musi się od razu aktualizować na sklepie.
Co w takim przypadku?
Jest kilka rozwiązań:
1. Zmiana ceny = przebudowa (dla małych sklepików spoko)
2. Dodanie invalidate, że np. Strony przebudowują się co 1h
3. Napisanie logiki która przy dodawaniu do koszyka upewnia się że cena jest odpowiednia i informuje usera o zmianie (to raczej rozwiązanie dla kantorów albo innych branż gdzie cena może być ustawiana automatycznie lub przez jakieś boty)
4. Całą stronę budujesz statycznie za wyjątkiem komponentu dodaj do koszyka (on za każdym razem odpytuje serwer po aktualna cenę).
Oczywiście w zależności od potrzeb powyższe rozwiązania można łączyć 😊
@@ArturChmaro Tu właśnie dosyć większy problem gdyż dosłownie wszystko podlega edycji poczynając od nazwy produktu, zdjęć na cenie kończąc :D
Czyli kontynuując pytanie, z tego co widzę całym sklepie jest stosowane getInitialProps, tzn że to rozwiązanie jest niezbyt pod SEO?
@@pawejadach2640 getinitialprops generuje stronę w trakcie builda (teraz ta metoda się nazywa getStaticProps) więc z punktu widzenia seo nie jest źle
Zachęciłeś mnie do nexta ;d
jak zabezpieczyć kod backendu przed wyciekaniem do kodu klienta UI? Wystarczy że utworzysz jakąś metodę prywatną w plikach /api.... metody te lądują na froncie.
Cały kod który umieścisz w folderze api jest wykonywany po stronie serwera i nie ma możliwości by został dołączony do builda UI. Skąd pomysł że te metody lądują na froncie?🤔
@@ArturChmaro niestety kod jest dołączany. przejrzyj zgłoszoną dyskusję github "Security: Backend details are too easy to leak" (dałbym linka ale YT usuwa komentarze).
@@Prim12398 o cholera wygląda faktycznie na to, że jest jakiś bug. Nie doświadczyłem tego bo w api korzystam po prostu z funkcji a z nimi nie ma problemu. Odpowiadając na Twoje pytanie póki Vercel się nie ogarnie jedynym zabezpieczeniem jest: nie używanie klas w /api, trzymanie tokenów/sekretów w envach
@@ArturChmaro tak ale nawet "ENV" nie ochroni nas przed wystawianiem implementacji hakerom do przejrzenia i znalezienia luk w systemie. Niestety pracownik Vercel utrzymuje, że to taki design. :(