하나의 HTML 페이지 에서 새로운 페이지를 불러오지 않고 필요한 부분만 동적으로 컨텐츠를 바꾸는 어플리케이션
MPA(Multiple Page Application)
여러 개의 페이지로 이루어져 있으며, 사용자가 페이지를 요청할 때마다 서버에서 렌더링된 HTML를 받아와서 컨텐츠를 변경하는 어플리케이션
CSR vs SSR
CSR(Client Side Rendering)
렌더링이 클라이언트 측에서 일어나는 방식
첫 구동시 HTML , JS 파일을 받아오고 사용자의 상호작용에 따라 JS를 동적으로 렌더링
장점
사용자 경험 좋음, 서버의 부담 덜함
단점
첫화면 보기까지 오랜시간이 걸림
초기렌더링할 JS 파일이 크기 때문에 코드분할(code splitting)을 고려해야함
낮은 SEO 성능
빈 화면이기 때문에 크롤링에 어려움
SSR(Server Side Rendering)
서버측에서 렌더링을 담당하는 방식
새로운 페이지를 이동할 때 마다 서버에서 렌더링을 마친 HTML 파일을 받아와 렌더링을 한다.
장점
빠른 화면 로딩
빠른 TTI (Time To Interactive)
서버에서 사전 렌더링 후 js 파일을 보낼 필요가 없다.
향상된 SEO
단점
보이지만 작동 하지 않는 기능
실제로 동적인 기능을 수행하기 위해서는 JS 파일 다운 받아야함
서버 과부하 (페이지 요청시 마다 새로고침 -> 서버 요청)
느린 TTFB(Time to first byte) - 새로고침 -> 서버로 받는 첫번째 byte 오래걸림
NEXTJS SSR vsSSG vs ISR
Pre-Render (사전렌더링)
Next.js 기본적으로 pre-render이다.
서버단에서 DOM 요소들을 Build하여 HTML 문서를 렌더링 하는 것.
Hydration HTML을 미리 렌더링 하고, 이후 요청이 오면 chunk 단위로 js를 보내주어 이벤트가 작동하게 되는 것.
SSR
유저가 페이지를 요청할때마다 HTML 문서 생성
사용자가 요청마다 동적으로 페이지 생성해서 다른 내용을 보여주어야 할 경우 (웹페이지, 분석 차트)
CSR - useEffect 사용
SSR - getServerSideProps
export async function getServerSideProps(context) {
const res = await fetch(`https://.../data`);
const data = await res.json();
return {
props: {
listData: data,
},
};
}
const Main = ({ listData }) => {
{listData.map((item) => (
{item.title}
))}
;
};
```
### SSG(Static-Site-Generation)
SSR 보다 높은 성능을 가지고 있다.
- SSG는 빌드 시에 HTML이 생성되고 매 요청마다 HTML 재사용 한다.
- SSR 은 매 요청마다 HTML을 생성하기 때문에 응답속도 느리고, 서버 부담.
- next bulid 명령어를 사용할 때 생성되고 CDN으로 캐시가 되어지고 요청마다 HTML을 재사용한다.
- 정적으로 생성된 정보를 요청마다 동일한 정보로 반환하는 경우 (마케팅, 블로그 게시글)
- `getStaticProps`
```javascript
export async function getStaticProps() {
const res = await fetch(`https://.../data`);
const data = await res.json();
return {
props: {
listData: data,
},
};
}
const Main = ({ listData }) => {
{listData.map((item) => (
{item.title}
))}
;
};
```
### ISR (Incremental-Static-Regeneration)
설정한 시간마다 페이지를 새로 렌더링
- SSG : 빌드후 데이터 변경 -> 다시 빌드
- ISR : 데이터 변경 -> 일정시간마다 특정페이지만 다시 빌드
- 자주 변경되지 않는 사이트(블로그)
```javascript
export const getStaticProps = async ({ params }) => {
const id = params.id;
const res = await axios.get(`https://url/${id}`);
return {
props: {
list: res.data,
},
revalidate: 20,
};
};
const Detail = ({ list }) => {
young-02
commented
10 months ago
1. 렌더링
SPA vs MAP
SPA (Single Page Application)
하나의 HTML 페이지 에서 새로운 페이지를 불러오지 않고 필요한 부분만 동적으로 컨텐츠를 바꾸는 어플리케이션
MPA(Multiple Page Application)
여러 개의 페이지로 이루어져 있으며, 사용자가 페이지를 요청할 때마다 서버에서 렌더링된 HTML를 받아와서 컨텐츠를 변경하는 어플리케이션
CSR vs SSR
CSR(Client Side Rendering)
SSR(Server Side Rendering)
NEXTJS SSR vsSSG vs ISR
Pre-Render (사전렌더링)
Next.js 기본적으로 pre-render이다. 서버단에서 DOM 요소들을 Build하여 HTML 문서를 렌더링 하는 것.
HydrationHTML을 미리 렌더링 하고, 이후 요청이 오면 chunk 단위로 js를 보내주어 이벤트가 작동하게 되는 것.SSR
유저가 페이지를 요청할때마다 HTML 문서 생성
SSR -
getServerSidePropsconst Main = ({ listData }) => {
{listData.map((item) => (- {item.title}
))}
; }; ``` ### SSG(Static-Site-Generation) SSR 보다 높은 성능을 가지고 있다. - SSG는 빌드 시에 HTML이 생성되고 매 요청마다 HTML 재사용 한다. - SSR 은 매 요청마다 HTML을 생성하기 때문에 응답속도 느리고, 서버 부담. - next bulid 명령어를 사용할 때 생성되고 CDN으로 캐시가 되어지고 요청마다 HTML을 재사용한다. - 정적으로 생성된 정보를 요청마다 동일한 정보로 반환하는 경우 (마케팅, 블로그 게시글) - `getStaticProps` ```javascript export async function getStaticProps() { const res = await fetch(`https://.../data`); const data = await res.json(); return { props: { listData: data, }, }; } const Main = ({ listData }) => {{listData.map((item) => (- {item.title}
))}
; }; ``` ### ISR (Incremental-Static-Regeneration) 설정한 시간마다 페이지를 새로 렌더링 - SSG : 빌드후 데이터 변경 -> 다시 빌드 - ISR : 데이터 변경 -> 일정시간마다 특정페이지만 다시 빌드 - 자주 변경되지 않는 사이트(블로그) ```javascript export const getStaticProps = async ({ params }) => { const id = params.id; const res = await axios.get(`https://url/${id}`); return { props: { list: res.data, }, revalidate: 20, }; }; const Detail = ({ list }) => {{list.map((item) => (- {item.title}
))}
; }; ```