SEO ( Search Engine Optimisation )에 대해서 알아보자! 우선 영어 그대로 해석해보면 검색 엔진 최적화이다. 검색 엔진에는 어떤게 있을까? ( Search Engine ) ? ▶ 구글 검색 엔진 ▶ 덕덕고 ▶ 네이버 검색 엔진 ... 등등등 이러한 검색 엔진은 어떻게 동작할까? ▶ 크롤러가 공개된 IP의 데이터를 전부 긁어 온다 ▶ 긁어온 데이터를 가공해서 화면에 노출시킨다. ▶ 여기서 어떤 데이터를 먼저 노출 시킬 지를 결정한다. => 여기서 SEO를 통해서 최상단에 나오게 하려는 노오력을 하게된다. 즉, SEO는 검색 결과로 내가 상단에 나오게 하기 위해서 하는 노오력이다. SEO는 어떻게 해야할까? 흔히 아는 방식으론 ▶ HTML 잘 사용하기 ▶ 웹 접근성 개선하기 ▶ 메타..

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..

1. Next.js? Next.js는 React를 사용한 서버사이드 렌더링 프레임워크다. 따로 설정을 해주지 않아도 SSR, SEO와 TypeScript 등 생산에 필요한 많은 기능을 제공하는 프레임워크다. 2. 사용하는 이유 1. SSR Next.js를 사용하는 가장 큰 이유로 SSR이 있다. React는 SPA 즉, Single Page Application로 필요한 정적 리소스를 최초 한 번만 다운로드하고 이후 변경이 필요한 경우 전체를 Reload하지 않고 필요한 변경된 부분만 갱신된다. SPA 방식을 사용하는 이유는 React가 CSR 방식으로 작동되기 때문이다. CSR은 Client Side Rendering이고 작동 순서는 서버에서 브라우저로 응답을 보낸다. 브라우저에서 JS를 다운로드한다...