مهندس برمجيات & مطور ويب
  1. مدونتي
  2. سيرفر ريندر باستخدام Spring Boot و React

سيرفر ريندر باستخدام Spring Boot و React

26 حزيران 2024
الناشر أحمد عثمان

دليل خطوة بخطوة

في هذا الدليل، سنتكامل عرض جانب الخادم (SSR) لمكونات React في تطبيق Spring Boot باستخدام GraalVM.

1. إعداد تطبيق Spring Boot الخاص بك

تأكد من إعداد تطبيق Spring Boot. يمكنك إنشاء واحد باستخدام Spring Initializr أو طريقتك المفضلة.

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

2. إضافة الاعتماديات إلى pom.xml

أضف اعتماد GraalVM JavaScript إلى ملف pom.xml الخاص بك:

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

3. إنشاء تطبيق React الخاص بك وتغليفه

قم بإنشاء تطبيق React الخاص بك باستخدام Create React App أو ما شابه:

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

سيقوم هذا بإنشاء بناء إنتاجي لتطبيق React الخاص بك في دليل build.

4. تكوين Spring Boot لاستخدام GraalVM

قم بإنشاء خدمة في تطبيق Spring Boot الخاص بك لعرض مكونات React:

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();
        }
    }
}

تأكد من أن بناء React الخاص بك يصدر دالة renderComponent التي تأخذ اسم المكون و JSON الخاص بالخصائص.

5. إنشاء وحدة تحكم لعرض مكونات React

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. تكوين تطبيق React الخاص بك لـ SSR

تأكد من أن تطبيق React الخاص بك يصدر دالة renderComponent. في src/index.js:

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

// Function to render a React component on the server
export function renderComponent(componentName, propsJson) {
    const props = JSON.parse(propsJson);
    let Component;
    switch (componentName) {
        case 'App':
            Component = App;
            break;
        // Add more components here
        default:
            throw new Error(`Unknown component: ${componentName}`);
    }
    return ReactDOMServer.renderToString(<Component {...props} />);
}

7. بناء تطبيق React الخاص بك

أعد بناء تطبيق React الخاص بك بعد تعديل src/index.js:

npm run build

الآن، يجب أن يكون تطبيق Spring Boot الخاص بك قادرًا على عرض مكونات React على الخادم باستخدام نقطة النهاية /render.

الملخص

باتباع هذه الخطوات، يمكنك دمج عرض جانب الخادم لمكونات React في تطبيق Spring Boot باستخدام GraalVM. هذا الإعداد يساعد في تحسين أداء وتحسين محركات البحث لتطبيق الويب الخاص بك. تأكد من التعامل مع أي أخطاء محتملة والحالات الحافة لتنفيذ قوي.

  • 0 تعليق

أضف تعليق