HTML 조각

See equivalent in the Reactive stack

HTMX and Hotwire Turbo는 클라이언트가 JSON이 아닌 HTML로 서버 업데이트를 받는 HTML-over-the-wire 접근 방식을 강조합니다. 이는 많은 JavaScript를 작성하지 않거나 전혀 작성하지 않고도 SPA (single page app)의 이점을 누릴 수 있게 해줍니다. 좋은 개요와 더 많은 내용을 학습하려면 각자의 웹사이트를 방문하십시오.

Spring MVC에서 뷰 렌더링은 일반적으로 하나의 뷰와 하나의 모델을 지정하는 것을 포함합니다. 그러나 HTML-over-the-wire에서는 브라우저가 페이지의 서로 다른 부분을 업데이트하는 데 사용할 수 있는 여러 HTML 조각을 보내는 것이 일반적인 기능입니다. 이를 위해 컨트롤러 메서드는 Collection<ModelAndView>를 반환할 수 있습니다. 예를 들면 다음과 같습니다:

1@GetMapping
2List<ModelAndView> handle() {
3    return List.of(new ModelAndView("posts"), new ModelAndView("comments"));
4}

1@GetMapping
2fun handle(): List<ModelAndView> {
3    return listOf(ModelAndView("posts"), ModelAndView("comments"))
4}

동일한 작업은 전용 타입인 FragmentsRendering을 반환함으로써도 수행할 수 있습니다:

1@GetMapping
2FragmentsRendering handle() {
3    return FragmentsRendering.fragment("posts").fragment("comments").build();
4}

1@GetMapping
2fun handle(): FragmentsRendering {
3    return FragmentsRendering.fragment("posts").fragment("comments").build()
4}

각 조각은 독립적인 모델을 가질 수 있으며, 해당 모델은 요청에 대한 공유 모델로부터 속성을 상속합니다.

HTMX와 Hotwire Turbo는 SSE (server-sent events)를 통한 스트리밍 업데이트를 지원합니다. 컨트롤러는 SseEmitter를 사용하여 이벤트마다 조각을 렌더링하기 위한 ModelAndView를 전송할 수 있습니다:

1@GetMapping
2SseEmitter handle() {
3    SseEmitter emitter = new SseEmitter();
4    startWorkerThread(() -> {
5        try {
6            emitter.send(SseEmitter.event().data(new ModelAndView("posts")));
7            emitter.send(SseEmitter.event().data(new ModelAndView("comments")));
8            // ...
9        }
10        catch (IOException ex) {
11            // Cancel sending
12        }
13    });
14    return emitter;
15}

1@GetMapping
2fun handle(): SseEmitter {
3    val emitter = SseEmitter()
4    startWorkerThread {
5        try {
6            emitter.send(SseEmitter.event().data(ModelAndView("posts")))
7            emitter.send(SseEmitter.event().data(ModelAndView("comments")))
8            // ...
9        }
10        catch (ex: IOException) {
11            // Cancel sending
12        }
13    }
14    return emitter
15}

동일한 작업은 Flux<ModelAndView> 또는 ReactiveAdapterRegistry를 통해 Reactive Streams Publisher에 적응 가능한 다른 타입을 반환함으로써도 수행할 수 있습니다.