React: Is there any way to use componentDidMount() when rendering via node server
So I'm quite new to react and node, and found it easiest for me to use node (express) server and then just linking to react using CDN. Until now everything has worked fine this way, but I would like to use something like componentDidMount() for rendering a list of books. Googled a little and found out that componentDidMount() is not fired when rendering via the server. So I was wondering if there is an alternative way, that can do the same thing. Tried with componentWillMount() as well, but no change.
Thanks for any advice
node.js reactjs express
asked Nov 22 '18 at 8:08
ANicholassonANicholasson
187
add a comment |
So I'm quite new to react and node, and found it easiest for me to use node (express) server and then just linking to react using CDN. Until now everything has worked fine this way, but I would like to use something like componentDidMount() for rendering a list of books. Googled a little and found out that componentDidMount() is not fired when rendering via the server. So I was wondering if there is an alternative way, that can do the same thing. Tried with componentWillMount() as well, but no change.
Thanks for any advice
node.js reactjs express
asked Nov 22 '18 at 8:08
ANicholassonANicholasson
187
What's your case? If it's an operation that you cannot use a constructor for, it's likely unsuitable for SSR.
– estus
Nov 22 '18 at 8:11
was thinking to fetch data, and then displaying it on page render
– ANicholasson
Nov 22 '18 at 8:25
Do you intend to render fetched data on server sdie?
– estus
Nov 22 '18 at 8:31
The plan was to render on client side, i have a method in React class that sends a fetch(), method: Get request to the server that executes a query to the database and sends the response back to the client
– ANicholasson
Nov 22 '18 at 8:39
Currently SSR is synchronous. A request likely shouldn't be coupled with a component then. Fetch it separately, pass hydration data to client side. Things are expected to change in 17.
– estus
Nov 22 '18 at 8:47
add a comment |
So I'm quite new to react and node, and found it easiest for me to use node (express) server and then just linking to react using CDN. Until now everything has worked fine this way, but I would like to use something like componentDidMount() for rendering a list of books. Googled a little and found out that componentDidMount() is not fired when rendering via the server. So I was wondering if there is an alternative way, that can do the same thing. Tried with componentWillMount() as well, but no change.
Thanks for any advice
node.js reactjs express
asked Nov 22 '18 at 8:08
ANicholassonANicholasson
187
So I'm quite new to react and node, and found it easiest for me to use node (express) server and then just linking to react using CDN. Until now everything has worked fine this way, but I would like to use something like componentDidMount() for rendering a list of books. Googled a little and found out that componentDidMount() is not fired when rendering via the server. So I was wondering if there is an alternative way, that can do the same thing. Tried with componentWillMount() as well, but no change.
Thanks for any advice
node.js reactjs express
node.js reactjs express
asked Nov 22 '18 at 8:08
ANicholassonANicholasson
187
asked Nov 22 '18 at 8:08
ANicholassonANicholasson
187
asked Nov 22 '18 at 8:08
ANicholassonANicholasson
187
asked Nov 22 '18 at 8:08
ANicholassonANicholasson
187
asked Nov 22 '18 at 8:08
ANicholassonANicholasson
187
187
What's your case? If it's an operation that you cannot use a constructor for, it's likely unsuitable for SSR.
– estus
Nov 22 '18 at 8:11
was thinking to fetch data, and then displaying it on page render
– ANicholasson
Nov 22 '18 at 8:25
Do you intend to render fetched data on server sdie?
– estus
Nov 22 '18 at 8:31
The plan was to render on client side, i have a method in React class that sends a fetch(), method: Get request to the server that executes a query to the database and sends the response back to the client
– ANicholasson
Nov 22 '18 at 8:39
Currently SSR is synchronous. A request likely shouldn't be coupled with a component then. Fetch it separately, pass hydration data to client side. Things are expected to change in 17.
– estus
Nov 22 '18 at 8:47
add a comment |
What's your case? If it's an operation that you cannot use a constructor for, it's likely unsuitable for SSR.
– estus
Nov 22 '18 at 8:11
was thinking to fetch data, and then displaying it on page render
– ANicholasson
Nov 22 '18 at 8:25
Do you intend to render fetched data on server sdie?
– estus
Nov 22 '18 at 8:31
The plan was to render on client side, i have a method in React class that sends a fetch(), method: Get request to the server that executes a query to the database and sends the response back to the client
– ANicholasson
Nov 22 '18 at 8:39
Currently SSR is synchronous. A request likely shouldn't be coupled with a component then. Fetch it separately, pass hydration data to client side. Things are expected to change in 17.
– estus
Nov 22 '18 at 8:47
What's your case? If it's an operation that you cannot use a constructor for, it's likely unsuitable for SSR.
– estus
Nov 22 '18 at 8:11
What's your case? If it's an operation that you cannot use a constructor for, it's likely unsuitable for SSR.
– estus
Nov 22 '18 at 8:11
was thinking to fetch data, and then displaying it on page render
– ANicholasson
Nov 22 '18 at 8:25
was thinking to fetch data, and then displaying it on page render
– ANicholasson
Nov 22 '18 at 8:25
Do you intend to render fetched data on server sdie?
– estus
Nov 22 '18 at 8:31
Do you intend to render fetched data on server sdie?
– estus
Nov 22 '18 at 8:31
The plan was to render on client side, i have a method in React class that sends a fetch(), method: Get request to the server that executes a query to the database and sends the response back to the client
– ANicholasson
Nov 22 '18 at 8:39
The plan was to render on client side, i have a method in React class that sends a fetch(), method: Get request to the server that executes a query to the database and sends the response back to the client
– ANicholasson
Nov 22 '18 at 8:39
Currently SSR is synchronous. A request likely shouldn't be coupled with a component then. Fetch it separately, pass hydration data to client side. Things are expected to change in 17.
– estus
Nov 22 '18 at 8:47
Currently SSR is synchronous. A request likely shouldn't be coupled with a component then. Fetch it separately, pass hydration data to client side. Things are expected to change in 17.
– estus
Nov 22 '18 at 8:47
add a comment |
1 Answer
1
active
oldest
votes
It is not possible. In an isomorphic react app, componentDidMount will only be called after the hydration is done in the client.
So, if you want to render something based on props or state, you can use the class constructor or the legacy componentWillMount as these methods will be called during render done in node.
Hope this helps!
answered Nov 22 '18 at 8:16
Pranesh RaviPranesh Ravi
9,48612548
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53426387%2freact-is-there-any-way-to-use-componentdidmount-when-rendering-via-node-serve%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
It is not possible. In an isomorphic react app, componentDidMount will only be called after the hydration is done in the client.
So, if you want to render something based on props or state, you can use the class constructor or the legacy componentWillMount as these methods will be called during render done in node.
Hope this helps!
answered Nov 22 '18 at 8:16
Pranesh RaviPranesh Ravi
9,48612548
add a comment |
It is not possible. In an isomorphic react app, componentDidMount will only be called after the hydration is done in the client.
So, if you want to render something based on props or state, you can use the class constructor or the legacy componentWillMount as these methods will be called during render done in node.
Hope this helps!
answered Nov 22 '18 at 8:16
Pranesh RaviPranesh Ravi
9,48612548
add a comment |
It is not possible. In an isomorphic react app, componentDidMount will only be called after the hydration is done in the client.
So, if you want to render something based on props or state, you can use the class constructor or the legacy componentWillMount as these methods will be called during render done in node.
Hope this helps!
answered Nov 22 '18 at 8:16
Pranesh RaviPranesh Ravi
9,48612548
It is not possible. In an isomorphic react app, componentDidMount will only be called after the hydration is done in the client.
So, if you want to render something based on props or state, you can use the class constructor or the legacy componentWillMount as these methods will be called during render done in node.
Hope this helps!
answered Nov 22 '18 at 8:16
Pranesh RaviPranesh Ravi
9,48612548
answered Nov 22 '18 at 8:16
Pranesh RaviPranesh Ravi
9,48612548
answered Nov 22 '18 at 8:16
Pranesh RaviPranesh Ravi
9,48612548
answered Nov 22 '18 at 8:16
Pranesh RaviPranesh Ravi
9,48612548
9,48612548
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53426387%2freact-is-there-any-way-to-use-componentdidmount-when-rendering-via-node-serve%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What's your case? If it's an operation that you cannot use a constructor for, it's likely unsuitable for SSR.
– estus
Nov 22 '18 at 8:11
was thinking to fetch data, and then displaying it on page render
– ANicholasson
Nov 22 '18 at 8:25
Do you intend to render fetched data on server sdie?
– estus
Nov 22 '18 at 8:31
The plan was to render on client side, i have a method in React class that sends a fetch(), method: Get request to the server that executes a query to the database and sends the response back to the client
– ANicholasson
Nov 22 '18 at 8:39
Currently SSR is synchronous. A request likely shouldn't be coupled with a component then. Fetch it separately, pass hydration data to client side. Things are expected to change in 17.
– estus
Nov 22 '18 at 8:47