Meta tags ssr #1

fireantlabs · 2018-03-30T08:04:14Z

Thanks for help me make react ssr with php.
But i have problem when make it better for me. I add meta tags use react-helmet or react-meta-tags . It change title with my route but when i view source page, Meta tags is not change.
Can you have solution for this problem.

chenos · 2018-03-30T10:46:47Z

Look at the example

https://github.com/s-yadav/react-meta-tags/blob/master/examples/app.js

Mainly look at the code

match({
  routes, location: req.url
}, (error, redirectLocation, renderProps) => {
  if(error) {
    res.status(500).send(error.message);
  } else if (redirectLocation) {
    res.redirect(302, redirectLocation.pathname + redirectLocation.search)
  } else if (renderProps) {
      let reactString;

      const metaTagsInstance = MetaTagsServer();

      try{
        reactString = ReactDomServer.renderToString(
          <MetaTagsContext extract = {metaTagsInstance.extract}>
            <RouterContext {...renderProps}/>
          </MetaTagsContext>
        );
      }
      catch(e){
        console.log(e);
        res.status(500).send(e.stack);
        return;
      }

      const meta = metaTagsInstance.renderToString();

      const template = `
        <!doctype html>
        <html lang="en">
        <head>
          <meta charSet="utf-8"/>
          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
          <meta http-equiv="x-ua-compatible" content="ie=edge">

          ${meta}
          <!-- Bootstrap CSS -->
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">

        </head>
        <body>
          <div id="app">${reactString}</div>
          <script src="http://localhost:9000/bundle.js"></script>
        </body>
      `;

    res.status(200).send(template)
  } else {
    console.log('redirected');
    res.status(301).redirect('/')
  }

PHP

$context->set('req', new Request(), true);
$context->set('res', new Response(), true);

fireantlabs · 2018-03-30T14:54:06Z

Thanks you for helping me.
I was config success with "react-helmet ^^!.
in webpack.config.js i add

externals:{'react-helmet': 'react-helmet'}

and in App.php

function __construct(){
//......
$context->require('react-helmet', 'Helmet');
}

function responsive(){
//....................
$data['content']=$this->context->eval("ReactDOMServer.renderToString(React.createElement(App, httpServer.data))");
$this->context->eval("const helmet = Helmet.renderStatic()");
$data['title'] = $this->context->eval("helmet.title.toString()");
return $data;

and in Index.php file, i add

{$html['title']} ---> in head
{$html['content']} --> in content ID

One again, i thank u so much.

fireantlabs closed this as completed Mar 30, 2018

rkanagaraj mentioned this issue Apr 16, 2019

When ever I included axios Uncaught V8JsScriptException Error Happening #2

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Meta tags ssr #1

Meta tags ssr #1

fireantlabs commented Mar 30, 2018

chenos commented Mar 30, 2018 •

edited

fireantlabs commented Mar 30, 2018 •

edited

Meta tags ssr #1

Meta tags ssr #1

Comments

fireantlabs commented Mar 30, 2018

chenos commented Mar 30, 2018 • edited

fireantlabs commented Mar 30, 2018 • edited

chenos commented Mar 30, 2018 •

edited

fireantlabs commented Mar 30, 2018 •

edited