springboot + thymeleaf 환경에서의 ajax

Question

안녕하세요, 현재 진행중인 프로젝트는 springboot + thymeleaf + jquery 환경에서 진행되고있습니다.게시글 리스트나 정보 리스트를 불러올때 ajax로 처리하고있는데요restcontroller 에서 ajax에서 json 형식으로 데이터를 받아서 데이터를 받아 태그로 뿌리는 방식과 ex) $.ajax({ type: "get", url: "findAllProductList", success: function (productList) { let productInfo = ""; for (let i = 0; i < productList.length; i++) { productInfo += ""; productInfo += "" + productList[i].id + ""; productInfo += "" + productList[i].name + ""; productInfo += "" + productList[i].maker + ""; productInfo += "" + productList[i].price + ""; productInfo += ""; } $("#productList").html(productInfo); controller에서 model로 받은 페이지를 타임리프 th 를 이용해서 페이지자체를 ajax 리턴에 넣어 뿌려주는 방식 ex) model.addAttribute("productList", list); return "index::#productTbody"; 두가지 방식중에 고민중입니다. 뭐가더 편하거나 그런게 딱히없어서 각방식의 장단점을 찾아보려고해도 딱히나오지도않고요 질문이좀 두서가없지만 두방법중에 뭐가 보편적이고 뭐가 효율적인지 알고싶습니다

kenu,전독시 · Accepted Answer

SEO 필요 없으면, ajax아니면 Controller 통해서 서버 렌더링 추천합니다.

메로나한입만 · Answer

굳이 게시글 리스트 조회를 비동기로 해야되나 싶긴하네요

Clickin · Answer

HTML 페이지 자체를 뿌려주실거면 htmx로 렌더링하면 편리하겠죠회사에서 작은 프로젝트에 써봤는데 템플릿 엔진이랑 조합하기 괜찮았습니다.

kenu,전독시 · Answer

SEO가 필요하지 않은 경우에는 AJAX를 사용하는 것이 적합합니다. AJAX는 페이지의 일부분만 업데이트할 수 있어, 사용자 경험을 향상시키고 서버 부하를 줄일 수 있습니다. 반면, SEO가 중요한 경우에는 서버 렌더링을 통해 컨트롤러를 사용하는 것이 추천됩니다. 서버 렌더링은 초기 페이지 로딩 시 모든 콘텐츠가 이미 준비되어 있어, 검색 엔진이 콘텐츠를 더 잘 크롤링할 수 있습니다. 이는 사용자 경험과 SEO 성능 모두에 이점을 제공합니다.컨트롤러를 통한 서버 렌더링은 HTTP 요청을 받아 처리하고, 모델 계층을 호출하여 요청을 수행한 후 결과를 돌려주는 역할을 합니다. 이 과정에서 뷰/템플릿을 고려하여 사용자에게 적절한 HTML을 제공합니다. 이는 특히 단일(monolithic) 애플리케이션에서 중요한 역할을 합니다. 여러 작은 애플리케이션이 통신하는 아키텍처(SOA/마이크로서비스)에서는 다른 전략이 필요할 수 있습니다 4.또한, 컨트롤러를 사용하면 테스트 작성이 용이해집니다. 컨트롤러를 테스트하면 모델 계층도 거의 테스트되므로, 통합 테스트만 작성하는 것이 효율적일 수 있습니다. 컨트롤러 테스트는 컨트롤러 객체/함수를 직접 호출하는 방법과 HTTP 클라이언트를 사용하는 방법 두 가지가 있습니다. 사용자가 HTTP를 통해 API에 접근할 것이므로, URL 라우팅이나 미들웨어까지 포함해 테스트하기 위해서는 HTTP 클라이언트를 사용하는 것이 좋습니다 4.따라서, SEO가 필요하지 않은 경우에는 AJAX를 사용하고, SEO가 중요한 경우에는 컨트롤러를 통한 서버 렌더링을 사용하는 것이 적합합니다. 이는 각 상황에 맞는 최적의 접근 방식을 제공하며, 사용자 경험과 SEO 성능을 모두 고려한 개발을 가능하게 합니다.from: https://www.phind.com/search?cache=vg41vhsmh8j7u64v9ozvzc1d

kenu,전독시 · Answer

컬럼 뷰 UI 예입니다.

초무쿤 · Answer

저같으면공통이고 만들어진 API가 있다면 1번해당 페이지만 사용하면 2번일듯 합니다.

springboot + thymeleaf 환경에서의 ajax

6개의 답변

#thymeleaf 목록