Does react server rendering have to use redux to manage data? Can I write it directly in the component?

does react server rendering have to use redux to manage data? Can I write it directly in the component?

Dec.24,2021

of course. redux and react are independent libraries that can be combined at will. They are not written specifically for react . You can write them directly as variables

response.write(`
        <!doctype html>
            <html>
            <head>
                <title>FilterList</title>
                <link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"></head>
            <body>
            <div id="app">${app}</div>
            <script>
                window.__INIT_DATA={'name':'here'}
            </script>
            <script type="text/javascript" src="bundle.js"></script></body>
            </html>
        `)

then call

class App extends React.Component {
    render() {
        try {
            let {name} = window.__INIT_DATA
            return name
        } catch (e) {
            return "";
        }
    }
}

anyway, for the backend, JS , html , css are all just strings

because redux is not good at learning, it is time-consuming to write. Now you need to quickly complete the isomorphism of react spa to server rendering. Can you do without redux?
here is my original SPA code

import React, { Component } from 'react';
import { Link } from "react-router-dom";
import './index.less';
import channelId from '../../config/channel'
import host from '../../config/host'

import TitleText from '../TitleText';

export default class ProfessorList extends Component {
    constructor(props){
        super(props);
        this.state = {
            professorList: [],
        };
        this.fetchProfessorList=this.fetchProfessorList.bind(this);
    }
    fetchProfessorList(){
        let _this=this;
        fetch(`${host}/web/pub/list_pub_in_channel?channelId=${channelId}&page=0&size=6`,{
            method:'GET',
            mode:'cors',
        }).then(function(response){
            return response.json().then(function(res){
                _this.setState({
                    professorList:res.content
                });
            });
        }).then(function(res){
            if(res){
                console.log(res);
            }
        });
    }
    componentDidMount(){
        this.fetchProfessorList();
    }
    render() {
        let professorList=this.state.professorList;
        return (
            <div className="professorList">
                <TitleText headerName={''}/>
                <ul>
                    {
                        professorList.map((value, index) => {
                            return (
                                <li key={index}>
                                    <Link to={"/news_list/professor/"+value.pubId}>
                                        <div className="avatarBox">
                                            <img src={value.avatarUrl} alt=""/>
                                        </div>
                                        <div className="professor-name">{value.name}</div>
                                        <div className="professor-introduction">{value.introduction}</div>
                                    </Link>
                                </li>)
                        })
                    }
                </ul>
                <Link to="/professor_list">
                    <div className="btn-more">
                        
                    </div>
                </Link>
            </div>
        );
    }
}

Previous: Ask for advice, how to use WeChat Mini Programs wxParse?

Next: How to use an interface to define a class with a constructor