Next.js ile Loading animasyonu nasil yapilir?

lastik

Next.js v15 de sitemin ana sayfasi yuklenirken yukleniyor animasyonu eklemek istiyorum.Fakat suspense veya useEffect kullanarak bir Loading componentimi sayfada gosterebilmem icin client side rendering 'use client' kullanmam gerekiyor.O zaman da daha en ana componentden 'use client' kullanmaya basladigim icin next.js kullanmamin bir anlami kalmiyor.

Next.js de Loading animasyonu kullanma yontemi nedir?

Ayrica sadec async islemler gerektiren componentlerde calissin istemiyorum tum componentlerim icin loading animasyon yapmak istiyorum.

KerimCETINBAS

Merhaba
Suspense componentini server componentinde de kullanabilirsin.

Soyle bir misconception var. Client componentinin içine dolaylı yoldan server componenti yerleştirebilirsin. Eğer client componentine server componenti doğrudan import etmiyorsan server componenti olarak kabul edilir.

"use client"
import ServerComponent from "...."

export default () => {
   return  <ServerComponent /> // bu artık client componenti sayılıyor
}

"use client"
export const ClientComponent({children}) => {
   return <> {children } </> // children server componenti olmaya devam edecek
}

import ServerComponent from "..."
import ClientComponent from "..."

export default () => {
  return (
       <ClientComponent>
            <ServerComponent /> // halen server componenti
       </ClientComponent> 
  )
}

Sizin sorunuza gelirsek

loading.tsx

export default () => {
    return (
        <h1>Loading</h1>
    )
}

layout.tsx

import { Suspense } from "react";
import { Loading } from "./loading";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <Suspense fallback={<Loading />}>
          {children}
        </Suspense>
      </body>
    </html>
  );
}

page.tsx


export default async function  Home() {
  await (()=> {
    return new Promise<void>((res) => {
      setTimeout(()=> {
        res()
      }, 5000)
    })
  })()

  return (
   <h1>Home page</h1>
  );
}

bu durumda page tsx halen server tarafinda render edilir.
https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense

lastik

KerimCETINBAS Tesekkurler biraz da olsa next.js kafamda canlandirdim.Ancak hala next.js de cok eksigim var
next.js icindeki degisik veri cekme islemleri ve SSR VE CSR gibi konularda.Next.js v15 resmi dokumantasyonu da cok kafa karistirici geliyor.Acaba bu konulari guncel (v15) e gore ogrenebilecegim bir kaynak oneriniz var mi?

KerimCETINBAS

lastik next dokümantasyonu aslında gayet sade.

CSR ve SSR konularına cok takılmanıza gerek yok bence. Next ve React bu işi senin için hallediyor. Bilmen gereken nokta şu. Aksini belirtmediğin sürece bütün komponentler server componenti. Eğer "use client" ile süslenmişse client componenti. Eğer bir client componenti server componenti import ediyorsa oda client componenti oluyor.

server componentlerini şöyle düşün. bu node serverinda plain html olarak render ediliyor ve response içinde bu html dönüyor. yani burda window objesi yok. Dolayısı ile client javascriptide yok. Bundan dolayı event listeners ve useEffect useState gibi client side hooklarıda server componentlerin de çalışmıyor.

Eğer component use client ile süslenmiş ise. bu component serverdan dönen htlm'e yerleştirilmek yerine yerleşiceği yer işaretleniyor. js kodları browsera gidince bu component browser tarafında render edilip bu belirlenen yere yerleştiriliyor.

Veri çekme konusuna gelince

server tarafında direk istediğiniz veriyi çekebilirsiniz. Client tarafında ise fetch api veya yeni gelen server actions kullanabililirsiniz. Actionları client componentlerine props olarak gecebiliyoruz bu arada

En basit yol olarak server componentlerinde dogrudan herhangi serverside resource çağırabilirsin


export default async function Page() {
    const data = await database.find(....) // bu satir hic bir zaman client tarafinda expose olmaz
    return (
      <>
      {data}
      ...server side html...
      </>
    )
}

next ile iki çeşit endpoint oluşturulabiliyor;

bunlardan birincisi bildiğin üzere page.{tsx|jsx}
ikincisi ise route.{ts|js} burdada rest metodlarina karsilik gelen handlerlari (get, post, put, patch ...) export edebiliyorsun.

örnek .../src/app/api/users/route.ts

export async function GET(request: Request) {}

Mesela bu endpoint'e herhangi bir client componentinde fetch isteği atabilirsiniz.fetch("/api/users")
https://nextjs.org/docs/app/building-your-application/routing/route-handlers

not: yalnız her dizinde bunlardan sadece biri olabilir. Bunun sebebi next app router dizine göre route oluşturuyor.

asıl kullanılması gereken yöntem ise ( next bu şekilde öneriyor ) server actions. Burda next'in RPC (Remote Procedure Calling) bazlı bir yaklaşımı var. Serverdaki action olarak belirlenmiş bir metodu client tarafında çağırmanıza olanak ( kısmen ) tanıyor.

iki şekilde server action oluşturabiliyoruz.

birincisi layout veya page içinde herhangi bir asenkron methodu "use server" ile süsleyerek

page.tsx


export default async function Page() {
     async function HelloWorldAction() {
        "use server"
         console.log("Hello world")   
     }

     return (
        <> <ClientComponent action={HelloWorldAction} /> </>
     )
}

clientComponent.tsx

export default function ClientComponent({helloWorldAction}: { helloWorldAction: ()=> void }) {

    return (
        <button onClick={() => helloWorldAction()}> Tikla </button>
    )
}

burdaki butona tıklandığında Hello world cıktısını browser consolu yerine server consolunda görüyor olman lazım. Bu durumu o metodun server tarafında çalıştığının kanıtı olarak görebilirsin.

ikinci yöntem ise. herhangi ts veya js dosyasının en başını "use server" ile süslemek. Burdan export edilen asenkron metodlar next tarafından server action olarak ele alınacak.

ister bunu componentlere props olarak geç ister doğrudan import et. iki şekildede kullanabilirsin.

Server actionlari kullanmanın diğer avantajlarından biride. Client side js olmadanda, native form submission olarak çalışabiliyor olması. Buda server componentlerinde kullanabilmemiz anlamına geliyor.

"use server"

export const LoginAction = async (form: FormData) => {
    const { email, password }= object.fromEntries(form)

    // email ve password ile bir şeyler yap
    ....
}

loginForm.tsx

import { LoginAction } from "./loginAction" 

export default function LoginForm() {
   return (
        <form action={LoginAction}>
            <input type="email" name="email" id="" />
            <input type="password" name="password" id="" />
            <button type="submit">Giriş</button>
        </form>
   )
}

edit: suspense ve server actionlarin ile verdiğim örneklerin kodları

https://github.com/KerimCETINBAS/nextExample