SSR4 [next 14 공식문서 부시기] 2.2 Loading 페이지와 Streaming Loading UI loading.js 파일을 활용해 콘텐츠가 로드되는 동안 서버에서 로딩 상태를 표시할 수 있습니다 . 렌더링이 완료되면 새 콘텐츠가 자동으로 교체됩니다. ※ Instant Loading States 같은 폴더에서 loading.js 는 layout.js 안에 중첩됩니다. page.js 파일과 그 아래의 모든 하위 항목을 경계에 자동으로 래핑합니다. Streaming 기존 SSR 의 이해 먼저, 특정 페이지의 모든 데이터를 서버에서 가져옵니다. 그런 다음 서버는 페이지의 HTML을 렌더링합니다. 페이지의 HTML, CSS 및 JavaScript가 클라이언트로 전송됩니다. 상호작용은 없는 사용자 인터페이스는 생성된 HTML 및 CSS를 사용하여 표시됩니다. 마지막으로 React는 hydr.. 2024. 1. 15. nextjs 기본 및 페이지 개념 12 버전 기준으로 정리한 내용이므로 주의 13 버전은 일부 바뀐 내용이 있습니다. 개념만 참고 추천 Next.js 는 무엇인가 Next.js is a flexible React framework that gives you building blocks to create fast web applications - 공식문서 소개 부분 Next.js는 서버 사이트 렌더링, 정적 웹 페이지 생성 등 리액트 기반 웹 애플리케이션 기능들을 가능케 하는 Node.js 위에서 빌드된 오픈 소스 웹 개발 프레임워크이다. - [출처] 위키 백과 (https://ko.wikipedia.org/wiki/Next.js ) 정리: React 를 효율적인 사용하기 위한 프레임워크 이며 SSR 을 구현하는데 많이 사용함 설치 npx.. 2023. 2. 2. next-redux-wrapper 이해하기 nextjs 에서 redux 를 사용하기 위해서는 next-redux-wrapper 가 필수적으로 필요한 이유가 궁금했다. 본문 일부 내용 번역 정적 앱용 Redux 를 설정하는 것은 다소 간단하다 모든 페이지에 제공되는 단일 Redux 저장소를 만들어지기 때문에. Next.js static site generator or server side rendering 이 관련되면 Redux 연결 구성 요소를 렌더링하기 위해 서버에 다른 저장소 인스턴스가 필요하기 때문에 작업이 복잡해지기 시작합니다. 또한 초기 값 관련해서 redux 의 store 에 접근해야 할 수 도 있다. next-redux-wrapper 는 자동으로 스토어 인스턴스를 생성하고 모두 동일한 상태를 갖도록 합니다. 이해 과정 실제로 처음 n.. 2023. 2. 2. MPA 와 SPA , SSR 와 CSR MPA (multi page application) 여러 페이지로 구성된 웹 어플리케이션으로 사용자의 클릭과 같이 인터렉션이 발생할 때마다 서버로부터 새로운 html 을 받아와서 해당 링크로 이동하여 페이지 전체를 새로 렌더링하는 전통적인 웹 페이지 구성 방식 SSR 방식을 사용함 SPA (Single Page Application) 하나의 페이지로 구성된 웹 어플리케이션으로 브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식 SSR 과 CSR 그리고 SEO 간의 관계 SEO (search engine optimization) SEO 통칭(검색 엔진 최적화)는 검색엔진으로 부터 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정을 말한다. .. 2022. 8. 28. 이전 1 다음
