# pre-rendering

20개의 포스트
post-thumbnail

[Next.js] Pre-rendering, hydration

Next.js를 사용하면서 자주 듣게 되는 단어 중 하나가, Pre-rendering과 Hydration이다. Next.js와 관련된 오류를 접하면서 개념에 대해서 모호하다보니 오류를 해결하기가 어려웠는데 이번에 좀 더 알게된 겸해서 정리해본다.Next.js는 기본적으

1일 전
·
0개의 댓글
·

[Next.js] Pages와 Pre-rendering

Next.js에서 page는 pages 디렉터리의 .js, .jsx, .ts, .tsx 파일로부터 생성된 리액트 컴포넌트다. 각 page는 pages 디렉터리 안의 파일 이름을 기반으로 라우팅이 된다.만약, pages/home.tsx 파일의 경우 /home path로

5일 전
·
0개의 댓글
·
post-thumbnail

Error:Text content does not match server-rendered HTML

문제상황 > Error: Text content does not match server-rendered HTML 프로젝트 환경 MonoRepo Next.js 12.3.1 React 18.2.0 M1 Macbook Pro 원인 Next.js의 getServerSid

2023년 2월 12일
·
0개의 댓글
·
post-thumbnail

next JS 강의 정리 - 2 (Layouts & Image Component & Routing )

pages/index.js => /pages/ssg.js => /ssgpages/products/slug.js => /products/slugPre-rendering : next.js 는 모든 페이지를 Pre-rendering 함 ( \* Pre-renders : HT

2023년 1월 11일
·
0개의 댓글
·
post-thumbnail

[Next]Next.js 파헤쳐 보기(1)

프로젝트 생성url = http://localhost:3000/posts/first-posturl로 갔을 때 first post를 확인할 수 있는 방법은pages 폴더 안에 posts 폴더 생성 후 first-post.js파일을 생성하면 error 뜨지 않는

2022년 12월 28일
·
0개의 댓글
·

React Next.js

React는 <span style="background-color:때문에 SEO(Search Engine Optimization, 검색 엔진 최적화)에 불리하다.그래서 SEO를 원활하게 하기 위해서는 첫 페이지의 경우, React로 구현한 Javascript 코드

2022년 11월 15일
·
0개의 댓글
·
post-thumbnail

NextJS pre-rendering (Static Generation / Server-side Rendering)

react 는 pre-rendering 지원 안됨 검포넌트가 렌더링 되고 나서 서버로 api 요청을 한다 검색엔진이 인덱싱하기 어렵다(블로그, 쇼핑몰 등 필요할 시) 따라서 nextJS 를 사용해서 pre-rendering을 적용한다. pre-rendering 두

2022년 11월 2일
·
0개의 댓글
·

[Next.js] Pages

https://nextjs.org/docs/basic-features/pages Next.js에서 page란 .js, .jsx, .ts, .tsx 파일에서 export 된 리액트 컴포넌트이다. 각 페이지는 파일 이름으로 라우팅된다. 예) pages/about.js라는

2022년 9월 27일
·
0개의 댓글
·
post-thumbnail

[Next.js] 개념 정리

Next.js 공식 문서와 코딩앙마 강좌를 참고해 정리한 내용입니다.

2022년 7월 14일
·
0개의 댓글
·
post-thumbnail

[Study] Hydrate

웹 페이지에 수분을 보충(?)한다고..?

2022년 7월 7일
·
0개의 댓글
·

Next.js의 대표적인 기능

pre-rendering next.js에서 기본적으로 모든 페이지를 프리 렌더링 함. 클라이언트 사이드에서 모든 작업을 수행하는 대신 미리 각 페이지에 대해서 HTML 파일을 미리 만들어서 성능과 SEO 측면에서 도움을 줌. 최소한의 자바스크립트 코드를 사용해 HTML 화면을 미리 생성하고 자바스크립트가 로드되면 그때 컴포넌트와 앱 화면이 완전히 활성화 되...

2022년 7월 5일
·
0개의 댓글
·
post-thumbnail

pre-rendering 체크리스트: CSR SSR SSG ISR

페이지마다의 특징을 이해하고 렌더링 방식을 구분하는 것은 매우 중요합니다. 도대체 어떤 기준으로 선정해야할지 체크리스트와 함께 알아봅시다 ;) 개노답 3대장 CSR, SSR, SSG!! - 사견입니다

2022년 5월 13일
·
0개의 댓글
·

pre-rendering

미리 화면을 그릴지 vs 모두 다 준비되었을 때 그릴지기본적으로 Pre-rendering 방식을 제공하는 Next.js는 우선 HTML 파일을 통해 정적인 화면을 먼저 보여준다.이후 JS 파일을 로드해와서 화면에서의 클릭 등의 이벤트 처리가 이뤄질 수 있는 반응하는 화

2022년 4월 7일
·
0개의 댓글
·
post-thumbnail

NextJS 공식 문서 정리 (12버전 기준)

공식 문서: Next.js by Vercel - The React FrameworkLearn | Next.js렌더링: 리액트에서 작성한 코드를 HTML 로 변환하는 것SSR 과 정적 사이트는 Pre-Rendering 이라고도 부른다.외부 데이터를 fetch해서 리액트의

2022년 4월 4일
·
0개의 댓글
·

[Web template] Next.js 정적 생성(Static Generation)_ getStaticProps, getStaticPaths(6)

정적 생성(Static Generation)_ getStaticProps, getStaticPaths pre-rendering(사전 렌더링) Next.js는 1) 모든 페이지를 pre-render(사전 렌더) 한다 클라이언트에서 모든 작업

2021년 12월 2일
·
0개의 댓글
·

Advanced Course 주특기 5강 - React

React.memo, meta tag, pre-rendering, seo, 개선작업, 배포, 사이트 성능 지표

2021년 7월 6일
·
0개의 댓글
·
post-thumbnail

TIL 94 | Next.js 동적라우팅과 API 라우팅 방법

Next.js에서는 어떻게 라우팅을 구현할까? 공식문서 튜토리얼을 따라가보자

2020년 12월 30일
·
0개의 댓글
·
post-thumbnail

TIL 93 | Next.js의 Pre-rendering과 Data Fetch 방법

Next.js에 존재하는 두가지 종류의 Pre-rendering 방법과, 데이터는 어떻게 불러오는지에 대해 알아보자.

2020년 12월 21일
·
3개의 댓글
·
post-thumbnail

[번역] Next.js 시작하기 4. 사전 렌더링과 데이터 가져오기

1. 우리는 블로그를 만들고 싶습니다. (여기 원하는 결과가 있습니다), 그러나 지금까지 우리는 블로그에 아무런 컨텐츠를 추가하지 않았습니다. 이 레슨에서, 우리는 외부 블로그의 데이터를 우리의 앱으로 데이터를 가져오는 방법에 대해서 알아볼 것입니다. 우리는 블로그 컨

2020년 5월 11일
·
0개의 댓글
·