server component

Next.js

SEO (검색엔진 최적화)

SEO란? 웹사이트의 구조를 작업하여 검색 엔진 상위에 노출될 수 있도록 최적화하는 과정 HTML과 자바스크립트의 관계 # 자바스크립트 문법 => useEffect를 예를 들자면 html이 로드가 된 후, 안에 있는 코드가 실행되는 로직을 가지고 있다. => 즉 데이터가 없는 html이 먼저 보이고, 데이터가 천천히 채워지는 셈. 그래서 페이지로드가 느린 것이고, 사람입장에서도 답답할 수 있지 않은가? 자. 그럼, 검색엔진 봇 입장에서 생각을 해보자. 필요한 자료를 수집하러 온 검색 봇이 우리 사이트에 방문을 했다. 하지만, html에는 아무런 정보가 없다. 왜냐하면 useEffect를 실행하기 전이기 때문이다. 이는 큰 문제로 연결된다. 왜냐하면 봇은 빠르게 정보가 없음을 판단하고 떠나버린다. => 쉽..

Next.js

client/server component

server component export default function Home() { return ( test ); } 평소처럼 사용하는 컴포넌트들은 server component이다. 장점: 페이지 로드가 빠르다. 단점: 리액트문법처럼 html안에 { }를 사용해 자바스크립트 문법을 사용하지 못한다. => useState, useEffect, onClick 불가능 client component 'use client' export default function Home() { return ( test ); } 차이가 없어 보이지만 상단에 'use client'를 붙이면 client component가 된다. 장점: 리액트 문법과 동일하게 html에 자바스크립트를 넣을 수 있다. 단점: 페이지 로드가 ..

www.seok.com
'server component' 태그의 글 목록