Client-Side Rendering in Next.js
"use client" directive, se, MARK, kiye, gaye, COMPONENTS, BROWSER, mein, RENDER/HYDRATE, HOTE, HAIN — INTERACTIVE, FEATURES, (onClick, useState, useEffect) ke, liye, ZAROORI, hain, kyunki, SERVER, PAR, IN, EVENTS, ka, KOI, MATLAB, NAHI.
Next.js, mein, PUREE, CSR, (jaise, TRADITIONAL, SPA) EK, "NOT, FOUND" file, ke, saath, ACHIEVE, ki, ja, sakti, hai, YA, DYNAMIC, IMPORT, ke, saath, ssr: false, OPTION, USE, karके, EK, COMPONENT, ko, EXCLUSIVELY, CLIENT, PAR, RENDER, karvaya, ja, sakta hai.
"use client";
import { useState } from "react";
export default function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}- "use client" = component, browser, mein, render/hydrate, hota, hai
- Interactive, features, (onClick, useState) ke, liye, ZAROORI, hai
- Sparingly, use, karo — POORE, page, ko, client, component, MAT, banaо
Client, components, mein, DATA, fetch, karте, waqt, MANUALLY, useState, se, loading, error, aur, data, states, MANAGE, karne, PADТE, HAIN — jaise, TRADITIONAL, React, APPS, mein.
"use client";
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch("/api/data").then(r => r.json()).then(d => { setData(d); setLoading(false); });
}, []);SWR, aur, TanStack Query, JAISI, DATA-FETCHING, libraries, Client, Components, mein, USE, ki, ja, sakti, HAIN — CACHING, REVALIDATION, aur, OPTIMISTIC, UPDATES, ke, liye, ADVANCED, features, dete, HAIN, jo, PLAIN, useEffect, se, MISSING, HAIN.