SSR

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에 자바스크립트를 넣을 수 있다. 단점: 페이지 로드가 ..

Next.js

Next.js를 쓰는 이유?

CSR(client-side rendering) => 브라우저에서 html을 실시간으로 만드는 방법 React, Vue.js는 이에 해당함. 장점: 1. 페이지 전환이 부드러움 2. 이쁜 사이트를 만들 수 있음. 단점: 1. 구글 검색 노출이 낮음 2. 페이지 로딩속도가 낮음 => 투자대비 수입지표가 낮아짐 SSR(server-side rendering) => 서버에서 html을 미리 만들어서 보내주는 방법 Next.js, nuxt, sveltekit, remix 등이 해당함. 장점: 1. 조금 가벼운 편 2. 구글 검색 노출이 잘 됨. 3. 일부 선택적인 CSR이 가능 4. 최적화된 HTML 랜더링 단점: 1. 폴더 기반 라우팅으로 인해 예약파일이 많아져 복잡함. 2. 리액트의 미완성 기능을 도입해서 ..

www.seok.com
'SSR' 태그의 글 목록