> For the complete documentation index, see [llms.txt](https://conrad-maker.gitbook.io/nodebird/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://conrad-maker.gitbook.io/nodebird/master.md).

# 들어가면서

### 웹개발의 3가지 요소

브라우저

프론트서버

백엔드 서버    (+ 데이터 베이스)

### 방법 2가지

#### ssr방식

전통적인 방식으로는 브라우저 -> 프론트 -> 백앤드 -> 데이터베이스의 과정을 왕복한다.

#### spa방식

리액트와 같은 singlepage에서는 하나의 페이지에서 컴포넌트만 바꿔주기 때문에

브라우저와 프론트가 하나가되어 브라우저에서 화면을 먼저 보여주고 백앤드서버에 요청을 보낼수 있다.

그렇기 때문에 이 흐름은 매우 중요하다.

단, spa방식이 오히려 시간은 더 걸릴 수 있지만, 화면에 loading창이라도 보여줄 수 있기 때문에 react나 vue.js를 선호하는 것이다.

또한 검색엔진이 이 페이지는 로딩창밖에 없는줄 알고 검색엔진에 보여지지 않는 경우가 있다.

#### 해결법

1. 서버사이트 랜더링 / 프리랜더 (첫방식은 전통 / 그외는 리액트)
2. 코드스플릿팅기술   

검색엔진의 노출과 속도를 위해서는 규모가 커지면 모두 사용해야만 한다.

단, 관리자페이지나 

이러한 이유로 조금더 쉽게 하기 위해 Next.js를 사용해 볼 것이다. 

또한 고객들이 접하는 페이지에는 React.js를 사용한다.

{% hint style="info" %}
브라우저를 통해 첫 방문을 할때에만 페이지의 모든 정보를 받아오는 것을 서버사이드 랜더링,

그 이외의 상황에는 데이터만 받아오는 것 (특정 주소를 들어가면 로딩X)
{% endhint %}