# 들어가면서

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

브라우저

프론트서버

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

### 방법 2가지

#### ssr방식

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

#### spa방식

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

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

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

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

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

#### 해결법

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

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

단, 관리자페이지나 

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

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

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

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://conrad-maker.gitbook.io/nodebird/master.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.