반응형

- next 동작 형식 ssg, isr 방식으로 프리랜더되서 만들어지는 페이지는 프리렌더링 방식으로 구현되어 있는 페이지들은 이벤트가 발생하지 않더라도 라우터 설정되어 있는 메뉴에 호버하면 해당 데이터를 확인할걸로 예측해서 미리 prefetching 처리

- 해당 페이지 컴포넌트가 route명이 변경되서 unmount될때마다 이다음에 prefetch할 데이터 용량을 최소화하기 위해서 style노드를 제거

- Framer-motion AnimatePresence를 이용해서 모션이 끝날때까지 이전 컴포넌트의 언마운트 시점을 강제로 holding하고 있으면 이미 스타일 제거된 지저분한 페이지가 화면에 계속 출력이 되는 문제 발생

- 정적인 스타일은 상관없지만 자바스크립트 동적으로 제어하는 moudle.scss. style-component, tailwidnCSS에는 모두 위와 같은 문제 발생

＠해결방법
- 라우터가 변경되는 시점마다, unmount되서 스타일이 날아가기 직전에 해당 스타일 노드를 head에서부터 복사한 다음에 next 고유 속성명 제거
- 복사한 style node를 다시 강제로 head에 삽입
- 이렇게 복사가 된 style 노드는 next가 제거할 수 없으므로 router가 변경되더라도 복사된 style이 유지되므로 스타일도 유지
- transition이 끝나서 이전 페이지 컴포넌트가 언마운트 되는 시점에 강제 복사했던 스타일 노드를 다시 제거
- 해당 기능을 함수로 만들어서 루트 컴포넌트에서 라우트가 변경 될때마다 호출

저작자표시

'IT > NextJs' 카테고리의 다른 글

[NextJs] Swiper 사용 시 SwiperCore 사용하는 이유  (0) 2023.08.21
[NextJs] Atomic Design Pattern 컴포넌트 렌더링 흐름  (0) 2023.08.18
[NextJs] Atomic Design Pattern 정리  (0) 2023.08.16
[NextJs] CSR , SSG , SSR , ISR 예제  (0) 2023.08.04
[NextJs] CSR , SSG , SSR , ISR 이론 정리  (0) 2023.08.04
반응형

- Next에서는 Autoplay, Pagination, Navigation 기능을 활성화하기 위해 SwiperCore.use 사용 

SwiperCore.use([Autoplay]);

<Swiper
    className={clsx(styles.swiper)}
    modules={[Autoplay]}
    autoplay={{ delay: 2000, disableOnInteraction: true }}
    loop={true}
    grabCursor={true}
    slidesPerView={1}
    spaceBetween={100}
    centeredSlides={true}
    breakpoints={{
        1200: {
            slidesPerView: 3,
            spaceBetween: 50,
        },
    }}
>
저작자표시

'IT > NextJs' 카테고리의 다른 글

[NextJs] 페이지 전환 모션 적용시 스타일 제거되는 문제 및 해결 방법 정리  (0) 2023.08.24
[NextJs] Atomic Design Pattern 컴포넌트 렌더링 흐름  (0) 2023.08.18
[NextJs] Atomic Design Pattern 정리  (0) 2023.08.16
[NextJs] CSR , SSG , SSR , ISR 예제  (0) 2023.08.04
[NextJs] CSR , SSG , SSR , ISR 이론 정리  (0) 2023.08.04
반응형

※ 컴포넌트 렌더링 흐름

1. _app.js에서 공통의 layout 템플릿 컴포넌트를 가져와서 전체 Component를 Wrapping
2. _app.js에 있는 Component는 page 폴더 안쪽에 있는 각각의 페이지 컴포넌트를 의미
3. 모든 페이지 Component에는 Layout Component의 공통의 구조가 적용 됨
4. 각각의 페이지 컴포넌트에서 페이지별로 들어갈 컨텐츠 추가

 

_app.js

import Layout from '@/components/templete/Layout';
import '@/styles/globals.scss';
import axios from 'axios';

export default function App({ Component, pageProps }) {
	return (
		<Layout>
			<Component {...pageProps} />
		</Layout>
	);
}

 

Layout.jsx

import Head from 'next/head';
import Header from '../organisms/Header';
import styles from './Layout.module.scss';
import clsx from 'clsx';

function Layout({ children }) {
	return (
		<>
			<Head>
				<meta name='description' content='Generated by create next app' />
				<meta name='viewport' content='width=device-width, initial-scale=1' />
				<link rel='icon' href='/favicon.ico' />
			</Head>
			<main className={clsx(styles.main)}>
				<Header />
				{children}
			</main>
		</>
	);
}

export default Layout;

 

 

저작자표시

'IT > NextJs' 카테고리의 다른 글

[NextJs] 페이지 전환 모션 적용시 스타일 제거되는 문제 및 해결 방법 정리  (0) 2023.08.24
[NextJs] Swiper 사용 시 SwiperCore 사용하는 이유  (0) 2023.08.21
[NextJs] Atomic Design Pattern 정리  (0) 2023.08.16
[NextJs] CSR , SSG , SSR , ISR 예제  (0) 2023.08.04
[NextJs] CSR , SSG , SSR , ISR 이론 정리  (0) 2023.08.04
반응형

※ Atomic Design Pattern

- 컴포넌트를 원자처럼 최소 단위로 쪼개서 재활용 가능하게 처리
- 단점 : 컴포넌트 간에 의존성이 생김, 특정 원자단위의 컴포넌트에서 문제가 발생하면 상위 컴포넌트까지 다 에러가 발생 소지

Atoms (원자)
     - 버튼, 메뉴, 제목, 글자, 폼요소, 썸네일
Molecules (분자)
     - 검색바 (폼,버튼), 메뉴(버튼)
Organisms (유기체)
     - GNB (메뉴를 그룹화)
Templates (템플릿)
     - 유기체들이 모여있는 기능 덩어리
Pages (페이지)
     - 템플릿들로 구성되어 있는 하나에 페이지

저작자표시

'IT > NextJs' 카테고리의 다른 글

[NextJs] Swiper 사용 시 SwiperCore 사용하는 이유  (0) 2023.08.21
[NextJs] Atomic Design Pattern 컴포넌트 렌더링 흐름  (0) 2023.08.18
[NextJs] CSR , SSG , SSR , ISR 예제  (0) 2023.08.04
[NextJs] CSR , SSG , SSR , ISR 이론 정리  (0) 2023.08.04
[NextJs] Next.js 작업방식 정리 (Pre Rendering)  (0) 2023.08.03
반응형

※ CSR (Client Side Rendering)

import SubLayout from '@/components/SubLayout';
import { useState, useEffect } from 'react';

function Csr() {
	console.log('csr');
	const [Now, setNow] = useState('');

	useEffect(() => {
		//데이터가 연산 되는 시점은 클라이언트단에서 컴포넌트가 재 실행 될 때 마다
		setNow(performance.now());
	}, []);

	return (
		<SubLayout name={'CSR'}>
			<p>CSR 방식 테스트 페이지 입니다.</p>
			<h1>{Now}</h1>
		</SubLayout>
	);
}

export default Csr;

 

 

※ SSG (Static-Site-Generation)

import SubLayout from '@/components/SubLayout';

function Ssg(props) {
	return (
		<SubLayout name={'SSG'}>
			<p>SSG 방식 테스트 페이지 입니다.</p>
			<h1>{props.now}</h1>
		</SubLayout>
	);
}

export async function getStaticProps() {
	//해당 프로젝트를 빌드시에 한번만 호출
	console.log('ssg');
	return {
		props: { now: performance.now() },
	};
}

export default Ssg;

 

※ SSR (Server Side Randering)

import SubLayout from '@/components/SubLayout';

function Ssr(props) {
	return (
		<SubLayout name={'SSR'}>
			<p>SSR 방식 테스트 페이지 입니다.</p>
			<h1>{props.now}</h1>
		</SubLayout>
	);
}

export async function getServerSideProps() {
	/*
		- 페이지 접속시 마다 호출 (서버단에서 동작)
		- full load 되는 것이 아닌 정적인 페이지는 재활용하고 동적으로 서버에서 fetching 한 데이터만 hydration
		- build 타임에 실행되는 것이 아닌 페이지가 랜더링 될때마다 실행
	*/
	console.log('ssr');
	return {
		props: { now: performance.now() },
	};
}

export default Ssr;

 

※ ISR (Incremental Static Regeneration)

import SubLayout from '@/components/SubLayout';

function Isr(props) {
	return (
		<SubLayout name={'ISR'}>
			<p>ISR 방식 테스트 페이지 입니다.</p>
			<h1>{props.now}</h1>
		</SubLayout>
	);
}

export async function getStaticProps() {
	/*
		해당 프로젝트를 빌드 시 호출
		revalidate에 지정한 시간 마다 새로 revalidate해서 새로운 pre-render-page로 재빌드 (현재 5초)	
	*/
	console.log('isr');
	return {
		props: { now: performance.now() },
		revalidate: 5,
	};
}

export default Isr;
저작자표시

'IT > NextJs' 카테고리의 다른 글

[NextJs] Swiper 사용 시 SwiperCore 사용하는 이유  (0) 2023.08.21
[NextJs] Atomic Design Pattern 컴포넌트 렌더링 흐름  (0) 2023.08.18
[NextJs] Atomic Design Pattern 정리  (0) 2023.08.16
[NextJs] CSR , SSG , SSR , ISR 이론 정리  (0) 2023.08.04
[NextJs] Next.js 작업방식 정리 (Pre Rendering)  (0) 2023.08.03
반응형

※ CSR (Client Side Rendering)

- 초기에 빈 HTML 파일을 가져오고 화면에 출력 될 모든 정보데이터를 Chunk단위로 구성된 파일을 모두 가져옴

장점 : 같은 페이지 안에서 서로 다른 컨텐츠를 실시간으로 변경 하면서 출력 하므로 동적인 컨텐츠 화면 변경이 자유롭고 페이지간 로딩이 없음 (사용성좋음)
단점 : 한번에 모든 데이터를 불러와야 되기 때문에 초기 로딩속도가 SSR 방식에 비해선 느림, 검색엔진에 비 최적화

 

※ SSG (Static-Site-Generation)

- Next프로젝트를 빌드시 pre-render

장점 : 미리빌드 시점에 페이지가 완성되기 때문에 초기 로딩속도가 빠름
단점 : 요청 전에 미리 프리렌더되기 때문에 정적인 페이지만 적용 가능 


※ SSR (Server Side Randering)

- 서버에 요청이 들어오면 서버단에서 data-fetching후 pre-render

장점 : CSR방식에 비해서는 초기로딩속도가 빠르고 요청시마다 새로운 데이터 갱신 가능
단점 : 서버 호출시에 pre-render 되기 때문에 SSG 방식보다는 느림

 


※ ISR (Incremental Static Regeneration)

- Next 프로젝트 빌드 시 pre-render


장점 
1) SSG와 마찬가지로 빌드시에 미리 페이지가 만들어지기 때문에 초기로딩속도가 빠름
2) 일정시간마다 새롭게 갠신된 데이터로 정기적으로 revalidation 처리


단점
초기에 이동할 떄만 조금 시간이 걸린다. (기존에 있는 SSR보다는 빠름)

 

 

저작자표시

'IT > NextJs' 카테고리의 다른 글

[NextJs] Swiper 사용 시 SwiperCore 사용하는 이유  (0) 2023.08.21
[NextJs] Atomic Design Pattern 컴포넌트 렌더링 흐름  (0) 2023.08.18
[NextJs] Atomic Design Pattern 정리  (0) 2023.08.16
[NextJs] CSR , SSG , SSR , ISR 예제  (0) 2023.08.04
[NextJs] Next.js 작업방식 정리 (Pre Rendering)  (0) 2023.08.03
반응형

※ Pre Rendering (Next.js 작업방식)

    - Next는 초기에 서버단에서 미리 만들어진 page 폴더 안쪽에 있는 정적인 컨텐츠를 html로 미리 Randering 상태에서 초기 로딩 처리 (SEO에 좋음)
    - 이후에 동적으로 데이터 연동을 위한 리액트 컴포넌트가 로드 완료 되면 Static한 페이지에 해당 내용을 결합 (Hydration)
    - 기존에 리액트는 초기에 모든 서브페이지에 해당하는 파일들을 모두 가져온 다음에 Randering하기 때문에 초기 로딩속도가 늦음 
    - 초기 메인 페이지만 pre-render된 상태로 가져오고 서브페이지에 해당하는 파일들은 json 형태로만 미리 로드 시켜서 초기에 로드시켜야되는 파일의 갯수와 용량을 줄임
    - 다른페이지의 데이터 구분 next 전용의 Link 컴포넌트에 연결되어 있는 라우터명을 통해서 json 형태로 데이터만 미리 로드

 

※ SSG (Static-Site-Generation)

- Next프로젝트를 빌드시 pre-render
    장점 : 미리빌드 시점에 페이지가 완성되기 때문에 초기 로딩속도가 빠름
    단점 : 요청 전에 미리 프리렌더되기 때문에 정적인 페이지만 적용 가능 


※ SSR (Server Side Randering)

- 서버에 요청이 들어오면 서버단에서 data-fetching후 pre-render
    장점 : CSR방식에 비해서는 초기로딩속도가 빠르고 요청시마다 새로운 데이터 갱신 가능
    단점 : 서버 호출시에 pre-render 되기 때문에 SSG 방식보다는 느림

 

※ ISR (Incremental Static Regeneration)

- Next 프로젝트 빌드 시 pre-render
    장점 
        1) SSG와 마찬가지로 빌드시에 미리 페이지가 만들어지기 때문에 초기로딩속도가 빠름
        2) 일정시간마다 새롭게 갠신된 데이터로 정기적으로 revalidation 처리

    단점
        1) 초기에 이동할 떄만 조금 시간이 걸린다. (기존에 있는 SSR보다는 빠름)

저작자표시

'IT > NextJs' 카테고리의 다른 글

[NextJs] Swiper 사용 시 SwiperCore 사용하는 이유  (0) 2023.08.21
[NextJs] Atomic Design Pattern 컴포넌트 렌더링 흐름  (0) 2023.08.18
[NextJs] Atomic Design Pattern 정리  (0) 2023.08.16
[NextJs] CSR , SSG , SSR , ISR 예제  (0) 2023.08.04
[NextJs] CSR , SSG , SSR , ISR 이론 정리  (0) 2023.08.04

+ Recent posts

티스토리툴바