Я понимаю, что есть похожие вопросы, и я прошел через большинство из них. Но я не смог решить свою проблему.
Итак, я пробую рендеринг на стороне сервера с реакцией и экспрессом, и, как видно из названия, я не могу заставить работать обработчики событий
Через пару часов в Google я пришел к выводу, что мне нужно будет обработать приложение на стороне клиента и на стороне сервера, чтобы обработчики событий работали? Как мне это сделать?
Я знаю, как обслуживать только приложение React с сервером веб-разработки без использования SSR
но как сделать приложение на клиенте так же как на сервере ??
Я новичок, чтобы среагировать и выразить. Я совершенно растерялся, в этот момент были некоторые уроки, предлагающие мне попробовать hydrate() на стороне клиента, но все равно ничего!
Как включить обработчики событий при достижении рендеринга на стороне сервера ??
файл сервера
import {TextBlock} from "../components/textblock/textblock"
const path = require("path")
var express = require("express")
var React = require("react")
const ReactDOMServer = require('react-dom/server');
var app = express();
app.get("*", (req, res) => {
const markup = ReactDOMServer.renderToString(
<TextBlock />
)
res.send(`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React and Webpack4</title>
</head>
<body>
<section id="index">${markup}</section>
<script type="text/javascript" src="index_bundle.js"></script></body>
</html>
`)
})
app.listen(3000, () => {
console.log("server is listening");
})
**Client**
import React from "react";
import ReactDOM from "react-dom";
import {TextBlock} from "../components/textblock/textblock"
ReactDOM.hydrate(<TextBlock/>,document.getElementById("index"));
**Webpack Config**
const HtmlWebPackPlugin = require("html-webpack-plugin");
var path = require('path');
const htmlPlugin = new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
const serverConfig = {
entry: "./src/server/index.js",
target: "node",
output: {
path: path.resolve(__dirname, ""),
filename: 'server.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: "[name]_[local]_[hash:base64]",
sourceMap: true,
minimize: true
}
}
]
}
]
}
}
const browserConfig = {
entry: "./src/browser",
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: "[name]_[local]_[hash:base64]",
sourceMap: true,
minimize: true
}
}
]
}
]
},
plugins: [htmlPlugin]
}
module.exports = [browserConfig, serverConfig]
React Component
import React from 'react';
import ReactDom from 'react-dom'
export class TextBlock extends React.Component{
constructor()
{
super()
this.state=({count:1})
}
onComponentDidMount(){
console.log("component loaded")
}
increment(){
this.setstate({count:++this.state.count})
}
getState(){
return this.state.count
}
render(){
return(
<div>
<div onClick={(e)=>{this.increment()}} style={{border:"solid red 2px"}}>{this.getState()}</div>
</div>
)
}
}
Это как это должно быть ?? как реагирует на меня, если я отправляю визуализированные компоненты через экспресс?
Разве я не могу включить встроенные события браузера?
все еще достигая рендеринга на стороне сервера?
Ссылка на репо
https://github.com/xxxgrime/ssrerror