✅ getServerSideProps를 사용하면 생기는 장점과 단점장점: 페이지가 모든 데이터를 갖고 완성되기 전까지 렌더링을 하지 않기 때문에 로딩 상태를 안 봐도 된다.단점: useSWR에서 페이지 전환 시 자동으로 api를 호출해 최신 데이터를 유지해주는 기능을 쓸 수 없게 된다.(static optimization이나 cache 같은 걸 사용할 수 없음)또, getServerSideProps를 이용해서 데이터를 불러왔다가 에러가 나면 에러가 나는 과정에서 유저는 페이지에서 아무것도 볼 수 없게 된다. ✅ SSR(getServerSideProps)와 SWR을 같이 사용하는 법그냥 getServerSideProps에서 SWR을 사용하면 된다. 하지만 그냥 사용하는 것이 아니라 getServerSid..

⚫ getServerSideProps- getServerSideProps라는 function을 export하면 Server Side Rendering이 된다. 이 function에 어떤 코드를 쓰든, 그 코드는 server에서 돌아가게 된다. (client 쪽이 아니라 server 쪽에서만 작동한다. 이걸 이용해서 API key를 숨길 수도 있다.) [index.js]import Seo from "../components/Seo";export default function Home({ results }) { return ( {results?.map((movie) => ( {movie.title} ))} ..

⚫ Static Pre Rendering이란?- 앱에 있는 페이지들이 미리 렌더링 되는 것(Next.JS의 가장 좋은 기능 중 하나) 정적(static)으로 생성된다. Create-React-App VS Next.JS- Create-React-App: Client-Side-Rendering(CSR), render 되는 것들이 HTML 소스코드에 포함되어 있지 않다. (noscript 태그는 브라우저에서 자바스크립트가 비활성화 되었을 때만 나온다)- Next.JS: Server-Side-Rendering(SSR), render 되는 것들이 HTML 소스코드에 포함되어 있다. ⚫ Hydration이란?- 먼저 초기 상태의 HTML 소스코드를 render하고, React.JS가 클라이언트로 전송됐을 때, ..