SPA, SSR, CSR

✅ SPA

Single Page Application
Once page is loaded, only change content(no page loading)

✅ CSR, SSR

rendering: 정보를 보여주기
정보를 누가 보기 쉽게 뿌려주는가?

☑️ CSR

Client Side Rendering

클라이언트(웹)이 주도적으로 렌더링
👍🏻 클라이언트가 자원 할당 가능
👍🏻 프론트엔드, 백엔드 업무 분리 가능
👍🏻 read only the needed data(instead of reading the whole page)
👍🏻 faster than SSR
👍🏻 reduce traffic
👍🏻 user experience: no need to refresh page
👎🏻 difficult for search croller to collect serach data

☑️ SSR

Server Side Rendering

서버가 주도적으로 렌더링을 해서 페이지를 보여줌
👍🏻 처음 로딩속도가 빠름
👍🏻 일관된 렌더링이 가능하다
👍🏻 search engine

✅ thymeleaf로 SSR 구현

@Controller
public class SampleSSRController {
    @GetMapping("/sample")
    public String samplePage(Model model){
        List<SampleData> sampleDataList = new ArrayList<>();
        sampleDataList.add(new SampleData(1, "sample item1"));
        sampleDataList.add(new SampleData(2, "sample item2"));
        sampleDataList.add(new SampleData(3, "sample item3"));
        sampleDataList.add(new SampleData(4, "sample item4"));
        sampleDataList.add(new SampleData(5, "jack"));

        //model에다가 dataList를 추가할 것이다.
        model.addAttribute("dataList", sampleDataList);
        return "samplePage";
    }
}

✅ JS fetch로 Restful API CSR 구현

//CSR은 rest controller
@RestController
@RequestMapping("/api")
public class SampleCSRController {
    @GetMapping("/sample")
    public List<SampleData> getSamplelist(){
        List<SampleData> sampleDataList= new ArrayList<>();
        sampleDataList.add(new SampleData(1, "sample item1"));
        sampleDataList.add(new SampleData(2, "sample item2"));
        sampleDataList.add(new SampleData(3, "sample item3"));
        sampleDataList.add(new SampleData(4, "sample item4"));
        sampleDataList.add(new SampleData(5, "client"));

        return sampleDataList;
    }

}