ReactJS, original Flux, react-router, nodeJS, socket.io
Everything is up to date.
If i'm switching off javascript in browser, only static code is being rendered.
During server side render ComponentWillMount and render methods being fired up, but not ComponentDidMount.
Even if I'm putting Flux logic into ComponentWillMount method, nothing happen: action is called, but socket.io doesn't send request to server to get data from database. Which means, no data being retrieved from database and nothing useful for search engines is being rendered.
If javascript is enabled, everything works perfect.
Here the important pieces of code:
Component. Add listener and call action:
componentDidMount() {
StoreUser.addChangeListener(this._onChange);
Actions.getUser(this.props.params.userid)
}
Client's action asks server for user data:
function _getUser (userid) {
socket.emit('getUser', userid)
}
up until this place server-side rendering works, but server itself doesn't received getUser event, so nothing happens further.
Again, if javascript is enabled in browser, all this works fine. Server receives this call and returns user's data.
How do i make server receive this event, return user's data and render it before sending to client?
As alternative, may be there is different way to make it SEO friendly?
React's componentDidMount lifecycle hook is not called server-side, as stated in the docs.
If you need to fetch data and use it server-side in the render method of a component, you need to pass this data as props during the initial render. This means, you cannot fetch it either during componentWillMount, even if the hook is called.
To achieve what you want, you need your server-side code to:
determine what components will be rendered
dispatch the proper actions so that your store will be properly populated
render your components only then - as the data is available to pass to your components in an initial render
The details on how to achieve that would of course depend on your flux implementation, the framework you use server-side, etc.
Related
How can i write a function to call an API, from web server to API within the server itself.
I do not want the browser to know that he is calling an API or and information about the API, even the link.
The API call(POST method) should be executed on the server.
Using Nextjs with axios.
I also want the function to be a component.
If you want to fetch data before loading the page (when the actural page load request happens), use server side rendering.
In Next.js you can use getServerSideProps for doing this. By doing this, you get to keep the api call inside the component, and the sever will fetch the data before rendering your component. Attaching a sample of code that you can refer for this.
export async function getServerSideProps(context) {
return {
props: {}, // will be passed to the page component as props
}
}
For more info, please visit the nextjs official documents. Attaching a link for the above example.
https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props
I am using angularjs on client-side and experss.js in server-side , i want to render a page and send data to the page (to fill a table) in the same get request
i tried using ejs engine to fill the table in the server-side and then render the page , but the problem with this solution is that the client-side (angularjs) cant access or manipulate the data.
other solution is (atrivial one) is to
make get request to get the page on cient-side
render the page on server-side
make another get request from client-side to get the data
send the data from server to client
The problem with this is that it contains two get requests.
Is there a possible way to render the page and send the data in one get request?
I am doing this to make the loading on site more efficient. Can i acheive more efficiency with one GET request ?
No, you can't. You can only have a single response to a given request. The browser is either expecting an HTML document or it is expecting JSON, it doesn't make sense to give it both at once. but you could render the page and send the data at the same time:
res.render('reports',{data:json});
and then access those data in the newly rendered page.
alternatively you could send a flag when making the call , and then decide whether you want to render or send based on this flag.
Or Ideally, it needs to be 2 separate route, one spitting json and other rendering a view. Else, you could pass a url param, depending on which you return json or render a view.
router.get('/reports/json', function(req,res){
var data = JSON_OBJECT;
res.send(data);
});
router.get('/reports', function(req,res){
var data = JSON_OBJECT;
res.render('path-to-view-file', data);
});
To access data in an AngularJS app without a second server request, include a .value script:
<script>
angular.module("myApp").value("myData",
<JSON data here>
}
</script>
Then in the controller, inject it:
app.controller("myCtrl", function($scope, myData) {
$scope.data = myData;
})
For more information, see
AngularJS angular.module API Reference - .value method
Could you please try using rout.getparam and pass values in route in the get request
I have basic express js application with following route:
router.get('/', function(req, res){
res.render('login');
});
It works fine - after logging into main page on my localhost, html from login.pug is nicely rendered on client side. However when my app runs, sometimes I want to render another pug file, when there already is html rendered on client side:
app.get('/dashboard', function(req, res){
res.render('dashboard', {user: req.query.login});
});
But when get request is send on'dashboard'path, nothing happens. As I understand, this happens because res.render just parses pug file into HTML and sends it to client as plain string (which I can inspect in browser developers tool, when I check AJAX response I see exactly rendered HTML).
Now my question is: is there a way to render HTML from res.render in client automatically? So on server side I just write res.render('template') and on client side page is re-rendered without handling the response?
I know I can clear whole DOM and append received string into document.body, I know also that I can make a POST form request and then page will be re-rendered automatically, but I want to avoid both solutions (don't ask why).
Thank you for help in advance.
When your Javascript sends an Ajax request, the response from that Ajax request is just returned back to your Javascript. That's it. The browser does not show anything. If you want to do something with that response, then it is the responsibility of your Javascript to do something with it (insert it in the page to show it, etc...).
If what you really want is that you want the browser to actually go to the /dashboard URL and then show that page, then your Javascript can just do:
window.location = '/dashboard';
This will tell the browser to fetch the contents of that URL, it will make a request to your server, your server will return the rendered HTML and the browser will display it in the page and show /dashboard as the URL in the browser bar. That should do everything you want.
So, it's totally up to your Javascript. Pick the right tool for the job. Either fetch data for your Javascript with an Ajax call and process the result in your Javascript or instruct the browser to load a new page. One or the other.
But when get request is send on'dashboard'path, nothing happens. As I understand, this happens because res.render just parses pug file into HTML and sends it to client as plain string (which I can inspect in browser developers tool, when I check AJAX response I see exactly rendered HTML).
Yes, that what Ajax requests do. They fetch content from the server and return the data back to your Javascript (and only to your Javascript).
is there a way to render HTML from res.render in client automatically?
Yes, use window.location = '/dashboard'; from your Javascript.
So on server side I just write res.render('template') and on client side page is re-rendered without handling the response?
Not from an ajax call. Ajax calls never automatically display content. Never. Ajax calls are programmatic requests that return data to your script. That's what they are. But, yes from Javascript you can cause content to be automatically displayed by setting window.location to a new URL.
I'm trying to build my app with React and Node (Isomorphic Rendering Architecture). I found on github example project but i have problem. I would like to develop my project client and server together, that the same Component can gets data/actions whataever from client nad server simultaneously. For example:
var Component = React.createClass({
render: function() {
return (
<div className="commentBox">
{this.props.client}
{this.props.server}
</div>
);
}
});
You can see that, Component gets props from client and server together. How i can do this?
I tryed 3 github projects but always i can't implement it. I dont know why. of course it's working when i render Component only by server or only by client but it's not working together.
For example when I render Component by server i can't make any actions specific for client (onclick alerting etc.) . So that's why it's important for me. Rendering some data from server and makes some client actions. But together, still on the same Component.
I'm sorry for my poor english!
Jan, it's impossible to do this using React.
They don't work "at the same time".
The server-side React code works by building the HTML page as a text-string, and serving the HTML text to the client.
After the browser loads the page, the React code in the browser will attach itself to the React code that was put on the page (because the server prints out IDs for all of the components, for the browser to attach to, after).
The goal, then, is to feed data to components, instead of expecting to have access to both the browser and the server at the same time.
That way, you can use server-side code to get data for the component, and you can use client-side code to get data for the component, and the component won't care.
This is not quite valid React, or the right way to do JS, in general but have a look:
class ServerElement {
render ( ) {
// sync calls should rarely ever (ideally never, other than booting up) be used
var articles = db.syncGetArticles();
return <Articles articles={ articles } />;
}
}
class BrowserElement {
render ( ) {
// isn't real, and should never be used even if it was
var articles = ajax.sync("GET", "/articles");
return <Articles articles={ articles } />;
}
}
The important part here is not the Server or Browser element (like I said, that's not really going to work), but rather that the <Articles /> element isn't expecting a server or a browser; it's expecting a list of articles.
The benefit of this approach, then, is that the server builds the HTML, but before the page is served, it's pre-filled with data, which will later be updated (replaced or added to) on the browser.
I hope that helps; if it doesn't, ask away, and I'll try to add to the answer.
#Norguard Thank you for your comprehensive answer. I am trying to own your answer. I know that your example code is not valid for React/JS cuz we have to build our db actions in models area. But one thing puzzles me. We are sending API with our '/articles' and gets data from this. OK, its cool, but this is still public data. I wonder about the private data. How to use React Isomorphic to get specific data or server if/else condition to build better app.
If we are using client-side templating language (like ejs) it's very easy. We are building our .html file and injection server methods(or whatever) to specific tags for templating language. How do to the same in React server? I can't imagines this using components and server.
I think that I understand idea you showed me but need time to efficiently build Isomorphic app using React.
I am a nodejs newbie and would like to understand the navigation flow when using nodejs to serve mobile applications.
Moible app
index.html
Show all users
Nodejs server snippit
var myData = {
"employees": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
};
res.send(myData);
Question: how do I display this data on another page (users.html)? I've worked with nodejs where I can just render to a specific path and it picks the appropriate Jade file but not sure how to do it since the html / js files are on the phone and not the server.
If you know of an example application I can just look through that code and figure it out.
Thanks for your help.
First of all you need to understand that your node.js is executed on server side, and all it can do - response on requests and do some logic, that stays on the server.
Then there is .html and .js that is sent to your clients (browser), and it is rendered and executed on client-side. This execution and logic is very different, and is focused to provide user interactions and render all sorts of data.
So all you need is be able to 'ask' server for data (request) and then get response, validate it in browser, if it is valid, you can render it using JS.
In order to make your life easier, consider using jQuery.
AJAX - to make requests to server and get response with data.
express.js - web framework for node, helps with routes.
And just generally - go and try things, experiment and it is better to understand whole picture or specific details frist, before you making any decisions.