# pre-rendering

[Next.js] Pre-rendering, hydration
Next.js를 사용하면서 자주 듣게 되는 단어 중 하나가, Pre-rendering과 Hydration이다. Next.js와 관련된 오류를 접하면서 개념에 대해서 모호하다보니 오류를 해결하기가 어려웠는데 이번에 좀 더 알게된 겸해서 정리해본다.Next.js는 기본적으
[Next.js] Pages와 Pre-rendering
Next.js에서 page는 pages 디렉터리의 .js, .jsx, .ts, .tsx 파일로부터 생성된 리액트 컴포넌트다. 각 page는 pages 디렉터리 안의 파일 이름을 기반으로 라우팅이 된다.만약, pages/home.tsx 파일의 경우 /home path로

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

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

[Next]Next.js 파헤쳐 보기(1)
프로젝트 생성url = http://localhost:3000/posts/first-posturl로 갔을 때 first post를 확인할 수 있는 방법은pages 폴더 안에 posts 폴더 생성 후 first-post.js파일을 생성하면 error 뜨지 않는
React Next.js
React는 <span style="background-color:때문에 SEO(Search Engine Optimization, 검색 엔진 최적화)에 불리하다.그래서 SEO를 원활하게 하기 위해서는 첫 페이지의 경우, React로 구현한 Javascript 코드

NextJS pre-rendering (Static Generation / Server-side Rendering)
react 는 pre-rendering 지원 안됨 검포넌트가 렌더링 되고 나서 서버로 api 요청을 한다 검색엔진이 인덱싱하기 어렵다(블로그, 쇼핑몰 등 필요할 시) 따라서 nextJS 를 사용해서 pre-rendering을 적용한다. pre-rendering 두
[Next.js] Pages
https://nextjs.org/docs/basic-features/pages Next.js에서 page란 .js, .jsx, .ts, .tsx 파일에서 export 된 리액트 컴포넌트이다. 각 페이지는 파일 이름으로 라우팅된다. 예) pages/about.js라는
Next.js의 대표적인 기능
pre-rendering next.js에서 기본적으로 모든 페이지를 프리 렌더링 함. 클라이언트 사이드에서 모든 작업을 수행하는 대신 미리 각 페이지에 대해서 HTML 파일을 미리 만들어서 성능과 SEO 측면에서 도움을 줌. 최소한의 자바스크립트 코드를 사용해 HTML 화면을 미리 생성하고 자바스크립트가 로드되면 그때 컴포넌트와 앱 화면이 완전히 활성화 되...

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

27일) 언제까지 Input type="text"쓸꺼야! 예쁜 웹에디터를 쓰자 ! /react-quill/ dynamic import/ XSS 크로스사이드스크립트 / 제가 개발자인데도 무서워요 잘 막아볼게요 OWASP TOP 10 / Code Camp FE 6기 / 코드캠프
웹에디터 이해크로스사이드스크립트(XSS)OWASP TOP 10
pre-rendering
미리 화면을 그릴지 vs 모두 다 준비되었을 때 그릴지기본적으로 Pre-rendering 방식을 제공하는 Next.js는 우선 HTML 파일을 통해 정적인 화면을 먼저 보여준다.이후 JS 파일을 로드해와서 화면에서의 클릭 등의 이벤트 처리가 이뤄질 수 있는 반응하는 화
NextJS 공식 문서 정리 (12버전 기준)
공식 문서: Next.js by Vercel - The React FrameworkLearn | Next.js렌더링: 리액트에서 작성한 코드를 HTML 로 변환하는 것SSR 과 정적 사이트는 Pre-Rendering 이라고도 부른다.외부 데이터를 fetch해서 리액트의
[Web template] Next.js 정적 생성(Static Generation)_ getStaticProps, getStaticPaths(6)
정적 생성(Static Generation)_ getStaticProps, getStaticPaths pre-rendering(사전 렌더링) Next.js는 1) 모든 페이지를 pre-render(사전 렌더) 한다 클라이언트에서 모든 작업
Advanced Course 주특기 5강 - React
React.memo, meta tag, pre-rendering, seo, 개선작업, 배포, 사이트 성능 지표
.png)
TIL 93 | Next.js의 Pre-rendering과 Data Fetch 방법
Next.js에 존재하는 두가지 종류의 Pre-rendering 방법과, 데이터는 어떻게 불러오는지에 대해 알아보자.

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