Serverseitiges Rendering mit Spring Boot und React

Schritt-für-Schritt-Anleitung

In dieser Anleitung integrieren wir das serverseitige Rendering (SSR) von React-Komponenten in einer Spring-Boot-Anwendung mit GraalVM.

1. Richten Sie Ihre Spring-Boot-Anwendung ein

Stellen Sie sicher, dass Sie eine Spring-Boot-Anwendung eingerichtet haben. Sie können eine mit Spring Initializr oder Ihrer bevorzugten Methode erstellen.

spring init --dependencies=web my-springboot-react-ssr
cd my-springboot-react-ssr

2. Fügen Sie Abhängigkeiten zu pom.xml hinzu

Fügen Sie die GraalVM JavaScript-Abhängigkeit zu Ihrer pom.xml-Datei hinzu:

<dependency>
    <groupId>org.graalvm.js</groupId>
    <artifactId>js</artifactId>
    <version>21.1.0</version>
</dependency>

3. Erstellen Sie Ihre React-Anwendung und bündeln Sie sie

Erstellen Sie Ihre React-Anwendung mit Create React App oder einem ähnlichen Tool:

npx create-react-app my-react-app
cd my-react-app
npm run build

Dies erstellt einen Produktions-Build Ihrer React-Anwendung im build-Verzeichnis.

4. Konfigurieren Sie Spring Boot zur Verwendung von GraalVM

Erstellen Sie einen Dienst in Ihrer Spring-Boot-Anwendung, um React-Komponenten zu rendern:

package com.example.ssr;

import org.graalvm.polyglot.Context;
import org.graalvm.polyglot.Value;
import org.springframework.stereotype.Service;

import java.nio.file.Files;
import java.nio.file.Paths;

@Service
public class ReactRenderer {

    private static final String REACT_COMPONENT_PATH = "path/to/your/build/static/js/main.js";

    public String renderComponent(String componentName, String propsJson) throws Exception {
        String jsCode = new String(Files.readAllBytes(Paths.get(REACT_COMPONENT_PATH)));

        try (Context context = Context.create("js")) {
            context.eval("js", jsCode);

            Value renderFunction = context.getBindings("js").getMember("renderComponent");
            if (renderFunction == null || !renderFunction.canExecute()) {
                throw new IllegalStateException("Render function not found or not executable");
            }

            Value result = renderFunction.execute(componentName, propsJson);
            return result.asString();
        }
    }
}

Stellen Sie sicher, dass Ihr React-Build eine renderComponent-Funktion exportiert, die den Komponentennamen und das Props-JSON übernimmt.

5. Erstellen Sie einen Controller zum Rendern von React-Komponenten

package com.example.ssr;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class SsrController {

    @Autowired
    private ReactRenderer reactRenderer;

    @GetMapping("/render")
    public String render(@RequestParam String component, @RequestParam String props) {
        try {
            return reactRenderer.renderComponent(component, props);
        } catch (Exception e) {
            e.printStackTrace();
            return "Error rendering component: " + e.getMessage();
        }
    }
}

6. Konfigurieren Sie Ihre React-Anwendung für SSR

Stellen Sie sicher, dass Ihre React-Anwendung die renderComponent-Funktion exportiert. In src/index.js:

import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from './App';

// Funktion zum Rendern einer React-Komponente auf dem Server
export function renderComponent(componentName, propsJson) {
    const props = JSON.parse(propsJson);
    let Component;
    switch (componentName) {
        case 'App':
            Component = App;
            break;
        // Fügen Sie hier weitere Komponenten hinzu
        default:
            throw new Error(`Unknown component: ${componentName}`);
    }
    return ReactDOMServer.renderToString(<Component {...props} />);
}

7. Erstellen Sie Ihre React-Anwendung

Erstellen Sie Ihre React-Anwendung nach der Änderung von src/index.js neu:

npm run build

Jetzt sollte Ihre Spring-Boot-Anwendung in der Lage sein, React-Komponenten auf dem Server mit dem /render-Endpunkt zu rendern.

Zusammenfassung

Durch die Befolgung dieser Schritte integrieren Sie das serverseitige Rendering von React-Komponenten in eine Spring-Boot-Anwendung mit GraalVM. Diese Konfiguration trägt zur Verbesserung der Leistung und SEO Ihrer Webanwendung bei. Stellen Sie sicher, dass Sie alle potenziellen Fehler und Randfälle für eine robuste Implementierung behandeln.