Next.js는 SSR이 가능한 특징을 가진 React 프레임워크이다. Next의 ServerSide Cycle Server가 GET 요청을 받는다. 요청에 맞는 Page를 찾는다. _app.js에 getInitialProps가 있다면 실행한다. 하위 Component의 getInitialProps가 있다면 실행하고 pageProps를 받아온다. 모든 props를 구성하고, _app.js => Component 순서로 렌더링을 한다. Content를 구성하면 _document.js를 실행해 html 형태로 출력한다. 여기서, 모든 페이지에서 공통적인 데이터 패칭이 필요하면, _app.js에서 데이터 패칭을 하고, 페이지마다 다른 데이터가 필요하면 각 페이지에서 데이터 패칭을 해주면 된다. Next.js ..

Next.js는 페이지에서 Server Side Rendering을 할 수 있게 지원해준다. API 데이터 혹은 서버로부터 정보를 가지고 올 때, 데이터를 가지고 오는 동안 Loading 화면을 띄운 적이 있을 것이다. 하지만 Server Side Render 기능을 사용하면 프론트엔드 화면이 나오기 전에 미리 데이터를 불러와서 Loading 화면이 필요없이 데이터를 나오게 할 수 있다. get server side props import Seo from "../components/Head"; const Home = () => { return ( Home ); }; export default Home; export async function getServerSideProps() { const { resu..