둥글게 둥글게

Next.js의 SSR과 SPA에 대해서 알아보고, 를 사용하면 좋은 점에 대해서 설명하고자 한다! 💁‍♀️ Next.js SSR(Server Side Rendering)이란? SSR(Server Side Rendering)은 서버 측에서 초기 로딩을 수행하고, 렌더링 된 완전한 HTML을 사용자에게 반환한다. ❗️ React의 경우, JavaScript로 페이지를 로드하기 때문에 Disabled javascript를 할 경우, 페이지가 렌더링 되지 않는다. ⭕️ 그러나 Next.js는 SSR을 지원하기 때문에 서버에서 초기 렌더링을 수행하며, SEO(Search Engine Optimization)를 개선할 수 있다. (SEO : 검색 엔진 최적화) 👀 Next.js SPA(Single Page App..

현재까지 사용자의 효율적인 페이지 이동을 위해 react-router-dom을 사용하여 라우팅 기능을 구현하였다. 라우팅 기능은 매우 중요하면서도 기본이 되는 기능이라고 생각한다. Next.js에서는 라우팅을 어떻게 구현하면 좋을지 강의를 통해 얻은 지식을 정리하고, 프로젝트에 적용해 보고자 한다 👀 💁‍♀️ (먼저!) 라우팅이란? * 웹 라우팅은 웹 애플리케이션에서 URL의 경로에 따라 특정 페이지나 리소스를 사용자에게 보여주는 것 👉🏻 즉, url의 path에 특정 페이지를 설정하고, 사용자가 해당 경로로 이동할 때, 설정한 페이지를 보여주는 것이다. 🙋🏻‍♀️ Next.js 라우팅 1️⃣ 페이지 생성 'pages' 디렉터리에 파일을 생성하면, 해당 파일의 경로와 이름에 따라 자동으로 라우트가 생성 ..

이번에 새로 시작한 프로젝트를 Next.js로 하기 때문에 생활코딩 강의를 부랴부랴 챙겨봤다. 이해하기 쉽게 설명이 되어 있어, 강의는 빨리 볼 수 있었다!! 강의를 보며 기록으로 남겨두고 싶은 부분들을 정리할 계획이다 ☺️ 💁‍♀️ Next.js란? : React를 기반으로 하는 SSR 및 SSG 프레임워크이며, 사용자에게 보다 빠르고 최적화된 웹 경험을 제공합니다. 👀 SSR : 서버 사이드 렌더링(Server Side Rendering)은 웹 애플리케이션에서 사용자가 웹 페이지에 접속할 때, 서버 측에서 해당 페이지의 초기 렌더링을 수행하는 방식이며, 완전한 HTML 페이지를 생성한 후 클라이언트에게 전달 👉🏻 장점 : 초기 콘텐츠 표시까지의 대기 시간이 줄어듦 👉🏻 단점 : 서버 자원을 사용하기 ..