С тех пор, как я услышал слова «это компилятор, а не среда выполнения», я понял, что должны быть некоторые последствия, когда дело доходит до рендеринга на стороне сервера, особенно в мире JVM.

Что ж, я здесь, чтобы сказать вам, что можно рендерить приложения Svelte на сервере Java Spring Boot, и я написал небольшую базу кода, которая позволяет вам делать это с помощью нескольких строк кода, но есть загвоздка: нам нужно настроить подходящую среду, чтобы он работал.

В этом посте я сначала расскажу, как настроить среду, а затем мы напишем простое SSR-приложение.

Получите шаблон

Первым делом нам нужно клонировать шаблон, реализующий базу кода для рендеринга Svelte.

git clone https://github.com/tncrazvan/java-springboot-svelte3-ssr-template ProjectName

or

npx degit tncrazvan/java-springboot-svelte3-ssr-template ProjectName

теперь cd в свой проект и установите зависимости javascript

cd ProjectName
npm i

Получить GraalVM

Затем вам необходимо загрузить GraalVM.
Официальный сайт предлагает бесплатную версию сообщества с открытым исходным кодом: https://www.graalvm.org/downloads

Целевой GraalVM JDK

ПРИМЕЧАНИЕ: вы можете пропустить этот шаг, просто установив GraalVM в качестве JDK по умолчанию.

В этом руководстве я собираюсь использовать NetBeans в качестве IDE, и я собираюсь настроить свой проект шаблона на GraalVM JDK.

Эта часть явно специфична для NetBeans.

  • Щелкните правой кнопкой мыши свой проект и откройте его свойства.

  • Проверьте конфигурацию Сборка → Компиляция.

  • Изучите Управление платформами Java…

  • Теперь Добавить платформу… и выберите Java Standard Edition.

  • И, наконец, найдите свой каталог GraalVM и завершите настройку.

Как только вы закончите, вы заметите, что NetBeans обнаружил новый JDK 11 (это версия, которую GraalVM предлагает на эту дату), обязательно настройте таргетинг на эту недавно добавленную версию Graal JDK 11.

Установить зависимости NPM

Выполните в корне вашего проекта следующее:

npm install

Это установит ваши зависимости npm.

Теперь вы можете запустить свой сервер Spring Boot с помощью GraalVM и отображать стройные страницы на стороне сервера.

Рендеринг

Создайте новый контроллер отдыха и внедрите службу Svelte3SSRService, она предлагает несколько методов, с которыми вы можете поиграть, но основным методом является .page(...)

Вот как вы бы это использовали:

package com.github.tncrazvan.svelte3ssr.template.api;
import com.github.tncrazvan.svelte3ssr.template.services.Svelte3SSRService;
import java.io.IOException;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class Home {
    
    @Autowired
    Svelte3SSRService ssr;
    
    @RequestMapping("/")
    public String home() throws IOException{
        return ssr.page("./www/App.svelte","UTF-8");
    }
}

Вы также можете передать реквизит своей стройной странице:

package com.github.tncrazvan.svelte3ssr.template.api;
import com.github.tncrazvan.svelte3ssr.template.services.Svelte3SSRService;
import java.io.IOException;
import java.util.HashMap;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class Home {
    
    @Autowired
    Svelte3SSRService ssr;
    
    @RequestMapping("/")
    public String home() throws IOException{
        return ssr.page("./www/App.svelte","UTF-8",new HashMap<>(){{
            put("myFirstProp","value");
            put("mySecondProp",1);
        }});
    }
}

и в вашем изящном компоненте вы должны экспортировать эти реквизиты, чтобы получить к ним доступ, например:

<script>
   export let myFirstProp;
   export let mySecondProp;
</script>
This is my first prop: {myFirstProp}<br />
and this is my second prop: {mySecondProp}

Вот результат этого примера

Надеюсь, вам понравится, берегитесь!