如何使用redux和类组件在next中实现ssr？

我是next新手，几天来一直在尝试为next基于类的组件和react redux设置样板代码

到目前为止我试过什么

\u app.js

导入“./assets/css/generic.css”； 从“./Components/Nav/Nav”导入导航； 从“react redux”导入{Provider}； 从“redux thunk”导入thunk； 从“redux士兵”导入{reduxSoldierMiddleware}； 从“redux”导入{createStore，applyMiddleware，compose}； 从“./redux/stores/middleware”导入{clientMiddleware}； 从“./redux/stores/index”导入减速机； 从“下一个redux包装器”导入withRedux； 导入“bootstrap/dist/css/bootstrap.min.css”； 常量记录器=存储=>{ 返回下一步=>{ 返回操作=>{ 常量结果=下一步（操作）； 返回结果； }; }; }; const composeinhancers=合成； const store=createStore( 减速器， //window.REDUX_数据， 复合致癌物( applyMiddleware( clientMiddleware（）， 砰， ReduxSoldierMiddle软件， 记录器 ) ) ); 函数布局（{Component，pageProps}）{ 返回( ); } Layouts.getInitialProps=异步（{Component，ctx}）=>{ const pageProps=Component.getInitialProps ？等待组件。getInitialProps（ctx） : {}; //客户端可以访问此处返回的任何内容 返回{pageProps:pageProps}； }; const makeStore=（）=>store； 使用Redux（makeStore）（布局）导出默认值； index.js

import React，{Component，Fragment}来自“React”；
从“react bootstrap”导入{Container}；
从“react redux”导入{connect}；
将*作为UniversitiesActions从“./redux/actions/UniversitiesActions”导入；
从“./redux/actions/statesListations”导入*作为statesListations；
从“洛达斯”进口；
类Home扩展组件{
异步组件didmount（）{
等待这个。props.loaduniversions（）；
等待此消息。props.loadStatesList（）；
}
render（）{
返回(
在澳大利亚寻找大学和课程

有{this.props.universions.length}{”“}
澳大利亚的大学

);
}
}
常量mapStateToProps=状态=>{
返回{
stateslist:state.stateslist.stateslist，
大学：州立大学，
isLoading:state.universitiesstore.isLoading
};
};
const mapDispatchToProps=调度=>{
返回{
大学：（）=>
调度（UniversitiesActions.loaduniversions（）），
loadStatesList:（）=>调度（StateSStactions.loadStatesList（））
};
};
export const loadData=async（存储，匹配）=>{
待命(
UniversitiesActions.loadUniversities（），
statesListations.loadStatesList（）
);
};
导出默认连接（mapStateToProps、mapDispatchToProps）（主页）；

在上面的代码中，我正在加载大学和州的数据，而组件正在安装。在查看页面源代码时，我没有看到服务器呈现的html