score:1
to pass the title to your app
component server side, you have to pass it the same way as you're passing the path
, i.e. as props
and not state
.
so first you'll need to change:
<title>{@state.title}</title>
to:
<title>{@props.title}</title>
then in your backend pass the wanted title to the app
component when instantiating it, like so:
var url = require('url');
var reactasync = require('react-async');
var app = require('./path/to/your/root-component.jsx');
// app = your express app:
app.get('*', function (req, res) {
var path = url.parse(req.url).pathname;
var title = gettitlefrompath(path); // made up function to get title from a path..
reactasync.rendercomponenttostringwithasyncstate(
app({path: path, title: title}),
function (err, markup) {
if (err) return res.send(500, err);
res.send('<!doctype html>\n' + markup);
}
);
});
hope that helps!
as for setting the title client side i think your solution with setting the document.title
probably is the best option.
update
i've now tested the above and the title is set correctly, however react gets a different checksum for the server generated component and the client generated one, which is no good:
uncaught error: invariant violation: you're trying to render a component to the document using server rendering but the checksum was invalid
so actually you shouldn't use this solution!
will have to play around a little more...
score:2
top-level react component
var react = require('react');
var appstore = require('../stores/appstore');
var application = react.createclass({
proptypes: {
path: react.proptypes.string.isrequired,
onsettitle: react.proptypes.func.isrequired
},
render() {
var page = appstore.getpage(this.props.path);
this.props.onsettitle(page.title);
return (
<div classname="container">
<h1>{page.title}</h1>
<div return <div dangerouslysetinnerhtml={{__html: page.body}}>;
</div>
);
}
});
module.exports = application;
client-side startup script (entry point)
var react = require('react');
var dispatcher = require('./core/dispatcher');
var application = require('./components/application');
dispatcher.register((payload) => {
var action = payload.action;
if (action.actiontype === actiontypes.change_location) {
app.setprops({path: action.path});
}
});
var app = react.createelement(application, {
path: window.location.pathname,
onsettitle: (title) => document.title = title
}));
app = react.render(app, document.body);
more info: https://gist.github.com/koistya/24715d295fbf710d1e24
demo project: https://github.com/kriasoft/react-starter-kit
Source: stackoverflow.com
Related Query
- Set document title on client and server side
- Is there a cleaner way of getting current URL in both client and server side in isomorphic react apps?
- Render different components on client and server side
- How to push both the client side and server side project folders together as a one project (api + front end) on github?
- What's the best way to deal with an error in the server side and in the client side using nodejs + express
- How to download pdf from puppeteer using Nest js as Server Side and React in Client Side?
- Socket.io connection fails between client and server side (Reacr/Node.js)
- How to manage socket in client side as ejs template and react js and the server side it is nodejs
- How to stop 2 times data fetch in SSR (first on server side and then on client side)?
- Using react, axios and django, i'm trying to send data from my client side to my server but I can't get the data
- What is client side and server side in Next.js?
- Unable to get dynamic component in Next.js to skip server side rendering and show only on the client
- How do you set the document title in React?
- Server side rendering with react, react-router, and express
- Webpack 4 and react loadable does not seems to create correct chunk for server side rendering
- How to fetch data only once in a Next.js app and make it accesible to all the app, both in server and client
- How to server side redirect to other page without reloading the page and still keeping the url in Nextjs app?
- how to get the ip address of the client from server side in next.js app?
- WebSocket connection between reactjs Client and flask-socketio Server doesn't open
- Using express and es6 to render react and jsx server side
- ReactJS server side rendering and componentDidMount method
- React server-side and client side rendering not seamless
- Microservices UI Frontend with Java and ReactJS Server Side Rendering
- Server Side Render re-render at client
- React SSR: Prevent client side rendering of components which are rendered on the server
- Use Auth0's hook useAuth0 to get token and set header in Apollo client
- What is the general practice for express and react based application. Keeping the server and client code in same or different projects/folders?
- How we can convert client side rendering react js app to server side rendering using react router 4?
- What is the difference between server side rendering (Next.js) and Static Site rendering (Gatsby.js)?
- How to send file from React/Next.js client UI to Node server and next to Flask service
More Query from same tag
- React goes back to initial state after POST ajax call
- Retrieve the latest data by using API link
- Toggle language using React without Redux
- How do I conditionally render an object to display one section of code if the object is not empty and one section of code if the object has key: value
- when I use this code to resize and upload image yo server get 400 error
- Music playback: Enter the music address from the Array and type in onClick
- Add functional component dynamical in react with out using class component
- Redux Action only dispatched on refresh and not after redirect
- Redirect is not working with onClick method in anchor tag
- Fetch in ReactJS with Basic Auth return 401 (Unauthorized). Preflight request doesn't pass access control check
- Difference between anonymous function vs named function as value for an object key
- how to change document scroll speed in react without jquery
- how to disable some dates in react-calendar
- Jsx is used without importing react
- Webpack 2 Code Spliting with Server Side Rendering and React-Router-v4
- React-Redux Component not showing new props in store
- Is there a way to take a code which is defined inside render , out from render function in React?
- Passing props from outlet to parent using React Router 6
- Custom Hooks SetInterval
- The data passed via this.props.history.push has weird behavior in the target page
- react-transition-group on Modal
- react-helmet changing css in the head tag during runtime has lag (no css for 1 sec before it shows updated css)
- How to dynamically create an array of buttons in React using MonogoDB?
- Unit Testing in React JS using Jest
- Hide spin buttons in the react-select component
- How to force reactJS to redraw?
- React & Redux - "Actions must be plain objects"
- ReactJS: Calculate average from array of strings in JSON object during render
- Pass method with parameters through react props?
- Reload component via <Link> in React Router