HTML フラグメント

HTMX (英語) ホットワイヤーターボ (英語) は、クライアントがサーバーの更新を JSON ではなく HTML で受信する HTML over the wire アプローチを重視しています。これにより、JavaScript をほとんどまたはまったく記述しなくても、SPA (シングルページアプリ) の利点を活用できます。概要と詳細については、それぞれの Web サイトにアクセスしてください。

Spring MVC では、ビューのレンダリングには通常、1 つのビューと 1 つのモデルを指定することが含まれます。ただし、HTML over the wire では、ブラウザーがページのさまざまな部分を更新するために使用できる複数の HTML フラグメントを送信することが一般的な機能です。このため、コントローラーメソッドは Collection<ModelAndView> を返すことができます。例:

  • Java

  • Kotlin

@GetMapping
List<ModelAndView> handle() {
	return List.of(new ModelAndView("posts"), new ModelAndView("comments"));
}
@GetMapping
fun handle(): List<ModelAndView> {
	return listOf(ModelAndView("posts"), ModelAndView("comments"))
}

専用の型 FragmentsRendering を返すことでも同じことができます。

  • Java

  • Kotlin

@GetMapping
FragmentsRendering handle() {
	return FragmentsRendering.with("posts").fragment("comments").build();
}
@GetMapping
fun handle(): FragmentsRendering {
	return FragmentsRendering.with("posts").fragment("comments").build()
}

各フラグメントは独立したモデルを持つことができ、そのモデルはリクエストの共有モデルから属性を継承します。

HTMX と Hotwire Turbo は、SSE (サーバー送信イベント) 経由のストリーミング更新をサポートしています。コントローラーは SseEmitter を使用して ModelAndView を送信し、イベントごとにフラグメントをレンダリングできます。

  • Java

  • Kotlin

@GetMapping
SseEmitter handle() {
	SseEmitter emitter = new SseEmitter();
	startWorkerThread(() -> {
		try {
			emitter.send(SseEmitter.event().data(new ModelAndView("posts")));
			emitter.send(SseEmitter.event().data(new ModelAndView("comments")));
			// ...
		}
		catch (IOException ex) {
			// Cancel sending
		}
	});
	return emitter;
}
@GetMapping
fun handle(): SseEmitter {
	val emitter = SseEmitter()
	startWorkerThread{
		try {
			emitter.send(SseEmitter.event().data(ModelAndView("posts")))
			emitter.send(SseEmitter.event().data(ModelAndView("comments")))
			// ...
		}
		catch (ex: IOException) {
			// Cancel sending
		}
	}
	return emitter
}

同じことは、Flux<ModelAndView> を返すことによっても、または ReactiveAdapterRegistry を介して Reactive Streams Publisher に適応可能な他の型を返すことによっても実行できます。