SSR 하이드레이션을 구현하다 보면 데이터를 바인딩해야 할 때가 있습니다. 이전까지는 데이터를 서버측에서 DB를 참조하고, 클라이언트측에서 서버를 거쳐 DB를 참조하는 방식으로 데이터를 바인딩하는데 DB참조가 2번 일어나서 비용이 많이 들어가는 것 같습니다.

• 서버에서 DB조회해서 렌더링

• 클라이언트에서 DB조회해서 렌더링…이라기보다는

• 클릭했을 떄 해당 데이터에 맞는 추가적인 것을 하기 위해(팝업을 띄운다거나 삭제하거나)

그러니까 상황을 정리하자면…

게시판 목록의 각 항목을 클릭하면 해당하는 게시글이 팝업으로 띄워지는 게시판을 만들고 싶다.

1. 각 항목을 클릭할 때 어떻게 그 항목의 게시글을 띄워줄 수 있지? 이 컴포넌트가 참조하는 실제 데이터 id값을 모른다!

2. 해당 컴포넌트에 실제 데이터의 id 같은 걸 저장하자

3. 그 id는 어떻게 부착할 수 있을까?

4. CSR의 경우 데이터를 불러오고 렌더링하는 과정에서 각 컴포넌트에 id를 내려줘서 저장해 줄 수 있음

5. SSR의 경우 4번과 같은 걸 하려면 원본 데이터가 필요함.

6. 근데 원본 데이터가 서버에 있고 클라이언트에서 받은 건 렌더링된 html 파일과 그냥 js 파일밖에 없음. 또 DB참조를 해야하나?

7. 그냥 html파일에 script 추가해서 원본데이터도 같이 넘겨주는 방식으로 동작을 시켜보자