1. ?? ??? ?? ??? ? HTML? React? ?? ???? ?? ????? ?? ???? ???? ?? ?? ?? UI ??? ??? ? ?????. ?? ??? ??? ????? ?? ??? ???? ???? ????. 2. ????? ? ???? ???? ?? ????? ?? ???? ???? ?? usestate ? useffect? ???? ??? ???? ???? Window ?? LocalStorage? ?? ????? ?? ???? ???? ??? ???? ?????. 3. ??? ?????? ??? ?? ???? ?? ? ? ??? ?? ? ??? ?? ???? ???? ??? ???? ???? ?????. 4. ??? ?? ?? ??? ?? ???? ?? ?? ?? ????? ????? ? ??? ?? ? ?????? ?? ?? ?? ?? ??? ??????. 5. ??? ???? SSR ?? ??? ??? ???? ???? ???? ???? ?? DOM ??? ????? ??? HTML ??? ?????. 6. ???? ???? ????? ?? ?? ???? ?? ??? ??? ???? ??? ?? DOM ????? ?????. 7. ?? ??? ????? : ??? ?? ??, ?? UI ??? ?? ???? ???, ?? ??? ????, ?? ?? ?? JavaScript?? CSS? ????, ?? ??? ???? ?? ?? ???? ??? ??????. ??? ?????? ?? ? ??? ??? ?????? ????? ?? ???? ?? ??? ???? ?? ??? ??? ? ????.

SSR (Server-Side rendered) ?? ???? (Next.js, Nuxt.js? ?? ? ?? ?? SSR) ?? ????? ?? ??? ? ?? SEO? ?????. ??? ??? ???? gotcha : ?? ?? ? ?? ?????. ?? ?? ??? ? HTML? React (?? VUE ?) ?? ???? ?????? ???? ?? ???? ?? ? ?????. ??? DEV? ??, ??? UI ?? ?? ?? ?? ?? ??.

?? ???? ??? ??? ??? ?????.

?? ? ???? ? ??????

??? ????? ? JavaScript ??? ??? ???? ?? ? ?? HTML? "?? ??"? ???? ???????. React? ?? ??? ? DOM ??? ?????? ??? ? ??? ???? ?? ?????. ?????? ??, ??? ??? ?? ??? ????? ?????.

?? : ??? ??? ???? ?????. ?? : "?? ..."????? : "?????, ???"

? ???? SSR? ???? ??? ???? ?? ?? ?? ??? ??? ? ????.

???? ??? ??? ??

1. ????? ?? ???? ???? ??? ???

?? ??? ?? ? ??? ???? ? API ( window , localStorage ?? navigator )? ?? ?? ? ?????? ?? ???? ????? ????.

 ?? myComponent () {
  const [ismobile, setismobile] = usestate (false);

  useeffect (() => {
    setismobile (Window.innerWidth <768);
  }, []);

  <div> {ismobile? &#39;?????&#39;: &#39;??????&#39;} </div>;
}

?? : ????? window ???? ???? isMobile false ? ?????. ??? ???????? useEffect ?? ? ??? true ? ? ???? → ?? ???.

??? : ??? ??? ???? ?? ???? 2 ?? ???? ??????.

 ?? myComponent () {
  const [isclient, setisclient] = usestate (false);

  useeffect (() => {
    setisclient (true);
  }, []);

  if (! isclient) {
    <div> ?? ... </div>; // ?? null ?? ?? ?? ?? ?
  }

  ?? <div> {window.innerWidth <768? &#39;???&#39;: &#39;????&#39;} </div>;
}

?? JS ?? ??? ??? ??? ?? useEffect ?? ?? ?? ?? ??? ??? (CSS ??? ??)? ?? ???? ??????.

2. ?? ?? ???? ??? ???

?? ??? ???? ???? ?? (? :?? ??) ?? ???? ?????? ??? ?? ??? ???? ??????? ??? ???? ?????.

 ?? userProfile ({userId}) {
  const [user, setUser] = usestate (null);

  useeffect (() => {
    FetchUser (userId).
  }, [userId]);

  ?? ???? <h1> {user.name} </h1> : <p>?? ... </p>;
}

?? : ??? "?? ..."? ??? ? ? ??? ????? ??? null ? ???? React? "?? ..."? ??? ? ???? ?? ? ? ???? . ??? ????? ? ??? ???? ?? ???? ?? → ???? ??? ? ????.

? ?? ?? ?? : ??? ??? ?? ??? ?? ( getServerSideProps , load ?)? ???? ??? ???? ??? ???? ?????.

 // next.js ??
Async ?? ???? GetServersideProps () {
  const user = wetchuser ()? ?????.
  return {props : {user}};
}

function userProfile ({user}) {
  ?? <h1> {user.name} </h1>;
}

?? ??? ????? ?? ????? ??? ?? ??????.

3. ?? ?? ???? ?? ?? ???

 ?? ?? () {
  const time = new date (). tolocaletimestring ();
  ?? <div> {time} </div>;
}

?? : ??? ??? ????? ?????? ?? ?? → ???? ??????.

??? : ???? ?? ???? ????? ??? ??? ??????.

 ?? ?? () {
  const [time, settime] = usestate (new date (). tolocaletimestring ());

  useeffect (() => {
    const interval = setInterval (() => {
      settime (? ?? (). tolocaletimestring ());
    }, 1000);
    return () => clearinterval (??);
  }, []);

  ?? <div> {time} </div>;
}

??? ?? : ?? ??? ??? ??? ????? ???? ???? new Date() ?????. ???? ?? ??? ?? ?? ? ? ????. ??? ???? ?? ?? ?? ??? ??? ????? Mount??? ????????.

 const [time, settime] = usestate ( '...');

4. ??? ? HTML ??

?? ?? ?? ????? ??? ??? ? ????.

 {user && <p> ??, {user.name} </p>}

user ????? null ??? ????? (?? ? ??)??? ??? ?? DOM ??? ????.

?? : SSR ?? ??? ???? ???? ???? ??? ? ??? ??????. ??? ?? ??? ???? ???? ??? ??? ??????.

?? ???? ?? ? ??? ?? ?? ?? ??? ????? ????.

5. ?? ???? ?? ??

??? (??, ??, ??)? ???? ?????? ?? ?? ? DOM? ???? ???? ????.

??? : ?????? ?? ?? ? ?? ??????????.

 useeffect (() => {
  const script = document.createElement ( '????');
  script.src = 'https://example.com/widget.js';
  document.body.appendChild (????);
}, []);

SSR ???? ???? ?? useClient ?? isClient ??? ?? ??? ?????.

?? ??? ????? ?? ??

• ? ???? ???? ???? ????? (SSR ??? ? ?????).
• eivise ??? UI? ???? ?? ??? ??? useEffect ????? .
• ? useEffect ???? "?? ?"???? ?? ?? ???? ????? ?? ???? ???????.
• Server ?? ? ?????? ?? ??? ????? . ??? ?? ???? API? ???? ????.
• JS ?? ??? ?? CSS? ?? ? ??? ????? .
• suppressHydrationWarning={true} ??? ?????? (??? ??? ?? ??? ?).

 <div suppresshydrationwarning>
  {math.random ()}
</div>

??? ??? ????? ???? ??? ????? ????. ???? ??????.

?? ??? ?? ???? ??-????? ?? ?????. ??? ??? ? ?? ????? ?? ? ???? ???? ?????? ???? ??? ?? ? ? ????.

????? : ???? ?? ? ??? ?? ?? ??? ??? ??? ???? .

? ??? ?? ? ??? ? ?? ?????? ?? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!