Визуализация HTML на стороне сервера с React и NExt Js - PullRequest
Новая
       35

Визуализация HTML на стороне сервера с React и NExt Js

0 голосов
/ 19 апреля 2020

Я использую Next Js и рендеринг на стороне сервера React для моего allpication для рендеринга на стороне сервера.

У меня есть приложение, которое я вызываю API для загрузки данных в HTML, который не должен быть обновление в HTML.

componentDidMount не будет работать, так как я не отправляю свои js файлы на клиентскую сторону.

Я пробовал getInitialProps, но до сих пор не повезло, любые предложения будут полезны помощь. 

//From index.js i Navigate to Redirection.tsk in index.js page
//redirection.ts

import ReactDOMServer from 'react-dom/server';
import Redirection from '../data';
import { renderToString } from "react-dom/server"
import { Helmet } from 'react-helmet';
import { NextApiRequest, NextApiResponse } from 'next';


export default (_req: NextApiRequest, res: NextApiResponse) => {
const helmet = Helmet.renderStatic();
  const data :_req.headers.referer ;
  const html = ReactDOMServer.renderToString(<Redirection data={data} />);
  res.send(`
  <!DOCTYPE html />
  <html>
  <head>
      ${helmet.meta.toString()}
      ${helmet.title.toString()}
      <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  </head>
  <body>
  <div id="app">${html}</div>
  </body>
  <script>window.__INITIAL__DATA__ = ${JSON.stringify({ data })}</script>
  </html>
    `);
}

//----
//Data.tsx
import React from 'react';
import { Helmet } from 'react-helmet';
import {IState,IProps} from '../domain/reactelements'



class Redirection extends React.Component {
  state: IState;
  props:IProps;
  constructor(data:IProps) {
    super(data);
    this.props={data:data}
    this.state = { message: '' };
    
  }
  static async getInitialProps(){
    console.log('Please work');
	const value =  calls External api to get data;
  }
  Headers = (title:string) => {
    return (
      <Helmet>
        <title>{title}</title>
      </Helmet>
    );
  };
  call api =  {
    try {
      const doRequest = 
	  //calling API from here
      const response = await doRequest;
      this.handleResponse(response.json());
      return true;
    } catch (error) {
      this.setState({ message: ERROR });
      return false;
    }
  };

  handleResponse(response:string){
    if (response.Status == 'error') {
      this.setState({ message: 'rejected' + response.Id });
    }
    else { 
        if (doRequest.ok) {
        const status = api call
        if (status && response.Status == 'auth') {
          this.setState({ message: 'success'});
        }
        else if(status && response.Status == 'cancelled')
        {
          this.setState({ message: 'error' + response.Id});
        }
        else {
          this.setState({ message: 'default' + response.Id});
        }
      }
    }
  }
  render() {
    console.log('in Payment Info render');
    return (
      <div className="loader-center">
        {this.state.message && (
          <React.Fragment>
            {this.Headers('Processing data...')}
            <div className="status-text">{this.state.message}</div>
          </React.Fragment>
        )}
        {!this.state.message && (
          <React.Fragment>
            {this.Headers('Processing data...')}
            <div className="loader" />
            <div className="loader-text">Please wait while processing...</div>
          </React.Fragment>
        )}
      </div>
    );
  }
}
export default Redirection;

Спасибо Arjun.M

...