Ssr sadece verinin client'a iletme kısmında çalışır. Client kısımda hook ile en üste çıkmasını sağlayabilirsin.
useEffect(() => {
router.events.on("routeChangeComplete", () => {
console.log("route change routeChangeComplete");
if(typeof window !== "undefined")
window.scrollTo({ top:0 });
});
return () => {
router.events.off("routeChangeComplete", () => {
console.log("stoped");
});
};
}, [router.events]);
Bu kodu app.js ' e koyarsan her bir route değişimini kontrol edebilirsin. Her route değişiminde en üste scrollarsın
Global state yönetimi tamamen projenle alakalı şeylerdir.Ben genelde küçük - orta çaplı projelerde Zustand , büyük çaplı projede redux kullanma taraftarıyım. Context ise parent componentin state'ını childrenlara vermek için kullanıyorum. Örnek dropdown componenti
Not:Context global state için hiç sağlıklı ve uygun değildir.
pages'in içindeki app.js 'i Suspense ile kaplayıp dener misin
Opengraph tagları Html içerisinde gömülü bir şekilde olması gerek. Helmet bunu javascript ile yapıyor.Yani kısaca server side render yapman gerek.
Çözümler
-next.js ' e geçebilirsin
-public'in içindeki index.html içerisine kendin meta taglarını her sayfa için aynı gözükecek şekilde eklemen
eval back-end'de çalışan bir kod değildir. Zaten bu açıklar client tarafda oluşması muhtemel sorunlardır. Yani kullanıcının gördüğü html sayfasını (client'ı) manipüle etmesidir olay. Backend'e müdahele söz konusu bile olamaz (sunucuna sızmazsa).
Projen belirttiğin port ile çalışacağı için bir web server kurman gerek. Bu web serverlarında belirttiğin portu açarak projenin run etmesini sağlamalısın.
Daha sonra node.js ve ardından Pm2 paketini kurmalısın. Bu paket arka planda npm komutlarını yürütür. Package.json olduğu dizine gidip gerekli paketleri kur. Pm2 ile projeyi ayağa kaldır. Eğer start yaparken hata verirse npm run build yap. Daha sonra çalışmış olacaktır.
Eval kullanmaman bütün sitelerde yazar hatta "eval is evil" diye anılır, bunun sebebi çok uzun zaman önce JavaScript, çoğu şeyin yalnızca eval ile yapılabildiği, oldukça zayıf bir dildi. İnsanların halen bunu tercih etmesinin sebebi yenilikleri takip etmeyip eskiye takılı kalmalarıdır.
Web kısmında kullanıcılar "her şeyi" manipüle edebilir. Yani sen kullanıcıya bizzat yazdığın fonksiyonu teslim etmiş üstüne düzenlenebilir halde veriyorsun.
Eğer eval ile projen ilerliyorsa o kurduğun yapıyı tamamen bozman gerekir. Çok rahat bir kullanımı var ama insan o rahatlık konforundan çıkmazsa hiçbir şeyi kendisine katamaz
-useEffect'in 2. parametresi bağımlılıklardır. Yani neye göre çalışacağını belirtirsin. [] boş göndermek demek component'ın sayfa içerisinde gösterildiği an 1 kere çalışacaktır.
Eğer bir state verirsen o state'ın değeri değiştiğinde tekrar çalışacaktır. (Bağımlılıkları iyi belirtmen gerekir yoksa performans sıkıntıların çıkar)
-useEffect'ın kullanım amacı bir dom elementi oluşturmak değildir. Life-cycle aşamalarını yönetmektir. Araştırsan daha iyi olur
-Bu aşamaları direkt Tayfun abinin dediği gibi Component olarak yazman gerekir.
-React içerisinde document'ı çok kullanmamaya çalış zaten amacımız domu sürekli yeniden build etmesini engellemek.
-Bir component'ın dom'daki referansına useRef ile erişebilirsin. document.querySelector vs gerek yok
islem.php ' den dönen cevap json formatında değil gibi duruyor. Cevabın tam olarak ne döndürdüğünü bilmeden ilerlemek zor.
Parse yapmadan önce dönen cevabı stringe çevirip parse yapmayı dene
const veri= JSON.parse(JSON.stringify(data));
Javascript bilmeden ilerlemek çok zor olur ki zaten javascript yazıyorsun sonuçta.
Bilmen gereken en önemli şeyler Dizi, obje ve metotları, promise , callback , fonksiyonlar , operatörler
Bu konular içinde çok alt başlıklar var ve çoğu yeni alt içeriklere sahip oluyor.