On the "render" page, the button markup isn't served with the page, but only injected by ReactDOM.render, so it isn't immediately visible. Note how the appearance of the page is jarringly changed by the script finally loading.

Source

Here is the custom react component I am using. It will be used by the server in node with react to statically render components, and it will also be loaded dynamically from the server for use in pages (this is the purpose of checking for exports and React objects at the beginning of the file).

// components.jsx

var exports = typeof(exports) == 'object' ? exports : ;
var React = typeof(React) == 'object' ? React : require('react');

function MyButton(props) 
  [click, setClick] = React.useState(0);
  function handleClick()  setClick(click + 1); 
  return (
    Clicked: click
  );


exports.MyButton = MyButton;

This is the script used to generate all the pages required for the server. First, babel is used to transpile components.jsx into javascript, then these components are used, along with React and ReactDOMServer, to create the actual pages. These pages are created with the fuction getPage which is exported from the file pageTemplate.js, shown next.

// genScript.js

let babel          = require('@babel/core');
let fs             = require('fs');
let ReactDOMServer = require('react-dom/server');
let React          = require('react');
let pageTemplate   = require('./pageTemplate.js');

script = babel.transformFileSync(
  'components.jsx', 
  presets : [['@babel/react']]
);

fs.writeFileSync('components.js',script.code);
let components = require('./components.js');

hydrateHTML = pageTemplate.getPage(
  'MyButton',
  ReactDOMServer.renderToString(React.createElement(components.MyButton)),
  'hydrate'
);

renderHTML = pageTemplate.getPage(
  'MyButton',
  '',
  'render'
);

fs.writeFileSync('hydrate.html',hydrateHTML);
fs.writeFileSync('render.html',renderHTML);

This file just exports the getPage function mentioned previously.

// pageTemplate.js

exports.getPage = function(
  reactElementTag,
  reactElementString,
  reactDOMMethod
  ) 
  return `
  
  
    
      
      
      
      
    
     
      
$ reactDOMMethod
      
$ reactElementString
 
      hidratar
      hacer
    
    
  
  
  `;  

Finalmente, el servidor real

// server.js

let http = require('http');
let fs   = require('fs');

let renderPage       = fs.readFileSync('render.html');
let hydratePage      = fs.readFileSync('hydrate.html');
let componentsSource = fs.readFileSync('components.js');

http.createServer((req, res) => 
  if (req.url == '/components.js') 
    // artificial delay
    setTimeout(() => 
    res.setHeader('Content-Type','text/javascript');
    res.end(componentsSource);
    , 2000);
   else if (req.url == '/render.html') 
    res.end(renderPage);
   else 
    res.end(hydratePage);
  
).listen(80,'127.0.0.1');

Recuerda algo, que tienes la opción de decir si atinaste tu asunto justo a tiempo.

Utiliza Nuestro Buscador